removing the 24px top margin on .modal-dialog .title (#10377)

* removing the 24px top margin on .modal-dialog .title so boss HP and difficulty line up

* stop overloading title so much and use a properly-scoped style

* removing unnecessary temp vars

* using SCSS color vars as per CR

* using relative font size measurements instead of absolute pixels, and adding popover override CSS to not break quest shop & invite notifications

* removing redundant font declarations
This commit is contained in:
Brian Fenton
2018-06-15 03:58:28 -05:00
committed by Matteo Pagliazzi
parent 4044432fad
commit 88c625fe80
2 changed files with 24 additions and 15 deletions

View File

@@ -45,18 +45,16 @@ export default {
this.$router.push({ name: 'party' }); this.$router.push({ name: 'party' });
}, },
async questAccept () { async questAccept () {
let quest = await this.$store.dispatch('quests:sendAction', { this.user.party.quest = await this.$store.dispatch('quests:sendAction', {
groupId: this.notification.data.partyId, groupId: this.notification.data.partyId,
action: 'quests/accept', action: 'quests/accept',
}); });
this.user.party.quest = quest;
}, },
async questReject () { async questReject () {
let quest = await this.$store.dispatch('quests:sendAction', { this.user.party.quest = await this.$store.dispatch('quests:sendAction', {
groupId: this.notification.data.partyId, groupId: this.notification.data.partyId,
action: 'quests/reject', action: 'quests/reject',
}); });
this.user.party.quest = quest;
}, },
}, },
}; };

View File

@@ -1,17 +1,18 @@
<template lang="pug"> <template lang="pug">
.row(:class="{'small-version': smallVersion}") .row(:class="{'small-version': smallVersion}")
dl
template(v-if="quest.collect") template(v-if="quest.collect")
span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }} dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }}
span.col-8 dd.col-8
div(v-for="(collect, key) of quest.collect") div(v-for="(collect, key) of quest.collect")
span {{ collect.count }} {{ getCollectText(collect) }} span {{ collect.count }} {{ getCollectText(collect) }}
template(v-if="quest.boss") template(v-if="quest.boss")
span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }} dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }}
span.col-8 {{ quest.boss.hp }} dd.col-8 {{ quest.boss.hp }}
span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }} dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }}
span.col-8 dd.col-8
.svg-icon.inline( .svg-icon.inline(
v-for="star of stars()", v-html="icons[star]", v-for="star of stars()", v-html="icons[star]",
:class="smallVersion ? 'icon-12' : 'icon-16'", :class="smallVersion ? 'icon-12' : 'icon-16'",
@@ -21,10 +22,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~client/assets/scss/colors.scss'; @import '~client/assets/scss/colors.scss';
.title { dt {
text-align: left; font-size: 1.3em;
font-weight: bold; line-height: 1.2;
white-space: nowrap; color: $gray-50;
} }
.col-8 { .col-8 {
@@ -49,6 +50,16 @@
} }
</style> </style>
<style lang="scss">
.questPopover {
dt {
color: inherit;
font-size: 1em;
white-space: nowrap;
}
}
</style>
<script> <script>
import svgStar from 'assets/svg/difficulty-star.svg'; import svgStar from 'assets/svg/difficulty-star.svg';
import svgStarHalf from 'assets/svg/difficulty-star-half.svg'; import svgStarHalf from 'assets/svg/difficulty-star-half.svg';