From 3ebd37f7cb3407389bbddf4730810a8a8990ea96 Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Sun, 3 Mar 2019 17:17:45 +0100
Subject: [PATCH] replace the questInfo to use table-like behavior, expands to
 the content (#10995)

---
 .../components/shops/quests/questInfo.vue     | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/website/client/components/shops/quests/questInfo.vue b/website/client/components/shops/quests/questInfo.vue
index a395eca04e..e68ea412e9 100644
--- a/website/client/components/shops/quests/questInfo.vue
+++ b/website/client/components/shops/quests/questInfo.vue
@@ -1,41 +1,57 @@
 <template lang="pug">
 .row(:class="{'small-version': smallVersion}")
   dl
-  template(v-if="quest.collect")
-    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }}
-    dd.col-8
+  .table-row(v-if="quest.collect")
+    dt {{ $t('collect') + ':' }}
+    dd
       div(v-for="(collect, key) of quest.collect")
         span {{ collect.count }} {{ getCollectText(collect) }}
 
-  template(v-if="quest.boss")
-    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }}
-    dd.col-8 {{ quest.boss.hp }}
+  .table-row(v-if="quest.boss")
+    dt {{ $t('bossHP') + ':' }}
+    dd {{ quest.boss.hp }}
 
-  dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }}
-  dd.col-8
-    .svg-icon.inline(
-      v-for="star of stars()", v-html="icons[star]",
-      :class="smallVersion ? 'icon-12' : 'icon-16'",
-    )
+  .table-row
+    dt {{ $t('difficulty') + ':' }}
+    dd
+      .svg-icon.inline(
+        v-for="star of stars()", v-html="icons[star]",
+        :class="smallVersion ? 'icon-12' : 'icon-16'",
+      )
 </template>
 
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
+.row {
+  display: table;
+  color: #E1E0E3;
+}
+
+.table-row {
+  display: table-row;
+  margin-bottom: 4px;
+}
+
+dd {
+  padding-left: 1em;
+  padding-bottom: 4px;
+}
+
+dt, dd {
+  display: table-cell;
+}
+
+dt, dd, dd > * {
+  text-align: left;
+}
+
 dt {
   font-size: 1.3em;
   line-height: 1.2;
   color: $gray-50;
 }
 
-.col-8 {
-  text-align: left;
-}
-
-.col-8:not(:last-child) {
-  margin-bottom: 4px;
-}
-
 .svg-icon {
   margin-right: 4px;
 }