gaiety/my_spells
1
0
Fork 0
Code Releases Activity

Better level alignment

Browse source
This commit is contained in:
Joe Wroten 2017-05-12 16:19:20 -05:00
parent 894532668e
commit 4ad1414be7
2 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/Spellitem.vue
View file

@ -1,6 +1,9 @@
<template> <template>
<tr> <tr class="spell">
<td colspan="3" class="spell"> <td class="spell-level">
{{level}}
</td>
<td colspan="2" class="spell-label">
<q-collapsible <q-collapsible
group="spells" group="spells"
:label="label" :label="label"
@ -19,7 +22,7 @@ export default {
return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0) return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0)
}, },
label () { label () {
return this.level + this.schoolCapitalized + '\n' + this.spell.name return this.schoolCapitalized + '\n' + this.spell.name
}, },
schoolCapitalized () { schoolCapitalized () {
return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1) return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1)
@ -32,15 +35,15 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
.spell .item-content .spell
.item-content
position: relative position: relative
.spell .item-content > * & > *
white-space: pre-line !important white-space: pre-line !important
overflow: visible !important overflow: visible !important
line-height: 0 line-height: 0
padding-top: .5em padding-top: .5em
text-indent: 33.333% text-indent: 55%
&::first-letter .spell-level
margin-right: 2em padding-left: 1em !important
float: right
</style> </style>

30
src/components/Spelllist.vue
View file

@ -10,21 +10,21 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th class="text-left no-padding"> <th class="sort-level">
<a class="sort-name" <a
v-on:click="sortBy = 'level'"
>Level</a>
</th>
<th class="sort-name">
<a
v-on:click="sortBy = 'name'" v-on:click="sortBy = 'name'"
>Name</a> >Name</a>
</th> </th>
<th class="text-left no-padding"> <th class="sort-school">
<a class="sort-school" <a
v-on:click="sortBy = 'school'" v-on:click="sortBy = 'school'"
>School</a> >School</a>
</th> </th>
<th class="text-right no-padding">
<a class="sort-level"
v-on:click="sortBy = 'level'"
>Level</a>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -100,13 +100,13 @@ export default {
<style scoped lang="stylus"> <style scoped lang="stylus">
.spell-list .spell-list
width: 100% width: 100%
th a th
a
display: inline-block display: inline-block
padding: 1em 0 padding: 1em 0
&.sort-name
margin-left: 1em
margin-right: -1em
&.sort-level &.sort-level
margin-left: -5em padding-left: 1em
margin-right: 5em width: 5em
&.sort-name
padding-left: 1em
</style> </style>