Merge 163f316 into 18de42b

HabitRPG · Feb 15, 2019 · fc46d32 · fc46d32
2 parents 18de42b + 163f316
commit fc46d32
Showing 1 changed file with 36 additions and 20 deletions.
diff --git a/website/client/components/shops/quests/questInfo.vue b/website/client/components/shops/quests/questInfo.vue
@@ -1,39 +1,55 @@
 <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 }}
-
-  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(v-if="quest.boss")
+    dt {{ $t('bossHP') + ':' }}
+    dd {{ quest.boss.hp }}
+
+  .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';
 
-dt {
-  font-size: 1.3em;
-  line-height: 1.2;
-  color: $gray-50;
+.row {
+  display: table;
+  color: #E1E0E3;
 }
 
-.col-8 {
+.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;
 }
 
-.col-8:not(:last-child) {
-  margin-bottom: 4px;
+dt {
+  font-size: 1.3em;
+  line-height: 1.2;
+  color: $gray-50;
 }
 
 .svg-icon {