krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Minor responsive updates to the spell bar (#10580)

Browse Source
This commit is contained in:
Keith Holliday
2018-08-09 15:24:44 -05:00
committed by GitHub
parent 1eb1fe76a8
commit f1c1ba8efa
1 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
website/client/components/tasks/spells.vue
View File

@@ -9,36 +9,50 @@ div(v-if='user.stats.lvl > 10')
.col-4.mana
.img(:class='`shop_${spell.key} shop-sprite item-img`')
drawer(
:title="$t('skillsTitle')",
v-if='user.stats.class && !user.preferences.disableClasses',
v-mousePosition="30",
@mouseMoved="mouseMoved($event)",
:openStatus='openStatus',
@toggled='drawerToggled'
)
div(slot="drawer-slider")
.container.spell-container
.row
.col-3(
@click='castStart(skill)',
v-for='(skill, key) in spells[user.stats.class]',
v-if='user.stats.lvl >= skill.lvl',
v-b-popover.hover.auto='skill.notes()')
.spell.col-12.row
.col-8.details
a(:class='{"disabled": spellDisabled(key)}')
div.img(:class='`shop_${skill.key} shop-sprite item-img`')
span.title {{skill.text()}}
.col-4.mana
.mana-text
.svg-icon(v-html="icons.mana")
div {{skill.mana}}
.drawer-wrapper.d-flex.justify-content-center
drawer(
:title="$t('skillsTitle')",
v-if='user.stats.class && !user.preferences.disableClasses',
v-mousePosition="30",
@mouseMoved="mouseMoved($event)",
:openStatus='openStatus',
@toggled='drawerToggled'
)
div(slot="drawer-slider")
.container.spell-container
.row
.col-12.col-md-3(
@click='castStart(skill)',
v-for='(skill, key) in spells[user.stats.class]',
v-if='user.stats.lvl >= skill.lvl',
v-b-popover.hover.auto='skill.notes()')
.spell.col-12.row
.col-8.details
a(:class='{"disabled": spellDisabled(key)}')
div.img(:class='`shop_${skill.key} shop-sprite item-img`')
span.title {{skill.text()}}
.col-4.mana
.mana-text
.svg-icon(v-html="icons.mana")
div {{skill.mana}}
</template>
<style lang="scss" scoped>
.drawer-wrapper {
width: 100vw;
position: fixed;
bottom: 0;
left: 0;
z-index: 19;
.drawer-container {
left: auto !important;
right: auto !important;
min-width: 60%;
}
}
.drawer-container {
left: calc((100% - 978px) / 2);
}
.drawer-slider {