sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-08-04 04:59:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

replace the questInfo to use table-like behavior, expands to the content (#10995)

Browse source
This commit is contained in:
negue 2019-03-03 17:17:45 +01:00 committed by Matteo Pagliazzi
parent ff3df55639
commit 3ebd37f7cb
1 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
website/client/components/shops/quests/questInfo.vue
View file

@ -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;
}