krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 07:07:35 +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 .col-4.mana
.img(:class='`shop_${spell.key} shop-sprite item-img`') .img(:class='`shop_${spell.key} shop-sprite item-img`')
drawer( .drawer-wrapper.d-flex.justify-content-center
:title="$t('skillsTitle')", drawer(
v-if='user.stats.class && !user.preferences.disableClasses', :title="$t('skillsTitle')",
v-mousePosition="30", v-if='user.stats.class && !user.preferences.disableClasses',
@mouseMoved="mouseMoved($event)", v-mousePosition="30",
:openStatus='openStatus', @mouseMoved="mouseMoved($event)",
@toggled='drawerToggled' :openStatus='openStatus',
) @toggled='drawerToggled'
div(slot="drawer-slider") )
.container.spell-container div(slot="drawer-slider")
.row .container.spell-container
.col-3( .row
@click='castStart(skill)', .col-12.col-md-3(
v-for='(skill, key) in spells[user.stats.class]', @click='castStart(skill)',
v-if='user.stats.lvl >= skill.lvl', v-for='(skill, key) in spells[user.stats.class]',
v-b-popover.hover.auto='skill.notes()') v-if='user.stats.lvl >= skill.lvl',
.spell.col-12.row v-b-popover.hover.auto='skill.notes()')
.col-8.details .spell.col-12.row
a(:class='{"disabled": spellDisabled(key)}') .col-8.details
div.img(:class='`shop_${skill.key} shop-sprite item-img`') a(:class='{"disabled": spellDisabled(key)}')
span.title {{skill.text()}} div.img(:class='`shop_${skill.key} shop-sprite item-img`')
.col-4.mana span.title {{skill.text()}}
.mana-text .col-4.mana
.svg-icon(v-html="icons.mana") .mana-text
div {{skill.mana}} .svg-icon(v-html="icons.mana")
div {{skill.mana}}
</template> </template>
<style lang="scss" scoped> <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 { .drawer-container {
left: calc((100% - 978px) / 2);
} }
.drawer-slider { .drawer-slider {