gaiety/my_spells
1
0
Fork 0
Code Releases Activity

wip

Browse source
This commit is contained in:
Joe Wroten 2017-05-12 23:12:25 -05:00
parent 16ca3af64b
commit 2fba3427cc
3 changed files with 42 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Index.vue
View file

@ -5,6 +5,7 @@
My Spells v2.0 My Spells v2.0
<q-search <q-search
class="primary"
v-model="search" v-model="search"
></q-search> ></q-search>
</q-toolbar-title> </q-toolbar-title>

64
src/components/Spellitem.vue
View file

@ -1,49 +1,49 @@
<template> <template>
<tr class="spell"> <div>
<td class="spell-level"> <div class="item-primary">
{{level}} {{level}}
</td> </div>
<td colspan="2" class="spell-label"> <div class="item-content has-secondary" v-on:click="openSpell">
<q-collapsible <div>
group="spells" {{spell.name}}
:label="label" </div>
> <div>
{{classes}}
<p>{{spell.description}}</p> </div>
</q-collapsible> </div>
</td> <div class="item-secondary">
</tr> <q-checkbox v-model="checked" disable></q-checkbox>
</div>
</div>
</template> </template>
<script> <script>
let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
export default { export default {
computed: { computed: {
level () { level () {
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 () { school () {
return this.schoolCapitalized + '\n' + this.spell.name return capitalize(this.spell.school)
}, },
schoolCapitalized () { classes () {
return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1) return this.spell.classes.map(cla => capitalize(cla)).join(', ')
}
},
data () {
return {
checked: false
} }
}, },
props: [ props: [
'spell' 'spell'
] ],
methods: {
openSpell (event) {
console.log(this.spell.name)
}
}
} }
</script> </script>
<style lang="stylus">
.spell
.item-content
position: relative
& > *
white-space: pre-line !important
overflow: visible !important
line-height: 0
padding-top: .5em
text-indent: 55%
.spell-level
padding-left: 1em !important
</style>

58
src/components/Spelllist.vue
View file

@ -1,53 +1,13 @@
<template> <template>
<table class="spell-list q-table compact striped-odd"> <div class="list striped no-border">
<thead> <label
<tr> is="spell-item"
<td colspan="3"> class="item two-line item-link"
<q-pagination v-for="spell in pagedSpells"
class="text-center" :spell="spell"
v-model="page" >
:max="pageMax" </label>
></q-pagination> </div>
</td>
</tr>
<tr>
<th class="sort-level">
<a
v-on:click="sortBy = 'level'"
>Level</a>
</th>
<th class="sort-name">
<a
v-on:click="sortBy = 'name'"
>Name</a>
</th>
<th class="sort-school">
<a
v-on:click="sortBy = 'school'"
>School</a>
</th>
</tr>
</thead>
<tbody>
<tr
is="spell-item"
v-for="spell in pagedSpells"
:spell="spell"
>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<q-pagination
class="text-center"
v-model="page"
:max="pageMax"
></q-pagination>
</td>
</tr>
</tfoot>
</table>
</template> </template>
<script> <script>