[IMPROVEMENT] Removed pagination, displays all spells now at once

src/App.vue

@@ -37,6 +37,10 @@ function fetchSuccess (data) {
       loaded: true
     }
   })
+  dispatch({
+    type: 'SPELLS_CREATE_INDEX',
+    data
+  })
 }
 
 function fetchFailure (reason) {
@@ -63,9 +67,7 @@ export default {
   },
   mounted () {
     if (LocalStorage.has('chosen')) {
-      dispatch({
+      dispatch({type: 'LOAD_LOCAL_CHOSEN'})
-        type: 'LOAD_LOCAL_CHOSEN'
-      })
     }
 
     if (!this.state.spells.loaded) {

src/components/Index.vue

@@ -1,8 +1,8 @@
 <template>
   <main>
     <spell-list
-      v-if="state.spells.data.length"
+      v-if="state.indexedSpells.length"
-      :spells="state.spells.data"
+      :spells="state.indexedSpells"
     ></spell-list>
     <page-empty
       v-else

src/components/Myspells.vue

@@ -8,7 +8,7 @@
       v-else
       title="You haven't chosen any spells"
     >
-      Try <i>bookmark</i> bookmarking spells from the
+      Try <span class="text-pink"><i>bookmark</i> Bookmarking</span> spells from the
       <router-link to="/">all spells page</router-link> to add to your spellbook.
     </page-empty>
   </main>
@@ -34,7 +34,7 @@ export default {
       }
 
       return this.state.chosen.map(chosen => {
-        return this.state.spells.data.find(spell => {
+        return this.state.indexedSpells.find(spell => {
           return spell.name === chosen
         })
       })

src/components/Spell.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="page-spell">
-    <router-link
+    <button
-      tag="button"
+      v-go-back=" '/' "
-      to="/"
       class="page-back-small primary shadow-1"
     >
       <i>arrow_back</i>
       Back
-    </router-link>
+    </button>
 
-    <router-link
+    <button
-      tag="button"
+      v-go-back=" '/' "
-      to="/"
       class="page-back-big primary circular big shadow-2"
     >
       <i>arrow_back</i>
-    </router-link>
+    </button>
 
     <div class="card bg-white">
       <div class="card-title bg-pink text-white">
@@ -93,7 +91,7 @@ export default {
     return { state }
   },
   mounted () {
-    state.lastSpell = this.state.spell.data.name
+    this.state.lastSpell = this.spell.name
   },
   computed: {
     checked () {

src/components/Spellitem.vue

@@ -11,22 +11,15 @@
         {{classes}}
       </div>
     </div>
-    <div class="item-secondary">
+    <div class="item-secondary" v-on:click="toggle">
       <i
-        class="float-left text-pink"
+        class="float-left text-pink bookmark checked"
         v-if="checked"
-        v-on:click="checked = false"
       >bookmark</i>
       <i
-        class="float-left text-grey-5"
+        class="float-left text-grey-7 bookmark"
         v-else
-        v-on:click="checked = true"
       >bookmark_border</i>
-      <q-checkbox
-        class="float-right pink"
-        v-model="checked"
-        @input="toggle"
-      ></q-checkbox>
     </div>
   </div>
 </template>
@@ -60,11 +53,11 @@ export default {
     openSpell (event) {
       this.$router.push('/spell/' + this.spell.name)
     },
-    toggle (want) {
+    toggle () {
       dispatch({
         type: 'CHANGE_CHOSEN',
         data: {
-          want,
+          want: !this.checked,
           name: this.spell.name
         }
       })
@@ -76,4 +69,18 @@ export default {
 <style scoped lang="stylus">
   .item-secondary
     width: 50px
+    height: 50px
+    margin: 0
+    padding: 12px
+    .bookmark
+      transition: transform .25s ease
+    &:hover,
+    &:target
+      .bookmark
+        transform: scale(1.5)
+      .bookmark:not(.checked)
+        color: yellow !important
+    &:active
+      .bookmark:not(.checked)
+        color: deeppink !important
 </style>

src/components/Spelllist.vue

@@ -1,26 +1,25 @@
 <template>
   <div class="spell-list-container">
     <nav-filter></nav-filter>
-    <section class="spell-list list striped no-border" id="spell_list">
+    <section
+      class="spell-list list striped no-border"
+      id="spell_list"
+    >
       <label
         is="spell-item"
         class="item two-lines item-link"
-        v-for="spell in pagedSpells"
+        v-for="spell in filteredSpells"
+        :key="spell.name"
+        :ref="spell.name"
         :spell="spell"
       >
       </label>
-      <q-pagination
-        class="text-center"
-        v-model="state.page"
-        :max="numPages"
-      ></q-pagination>
     </section>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { Utils } from 'quasar'
 import Query from 'json-query-chain'
 import Filter from './Filter'
 import SpellItem from './Spellitem'
@@ -31,43 +30,21 @@ Vue.component('spell-item', SpellItem)
 
 export default {
   data () {
-    return {
+    return { state }
-      state,
-      perPage: 0
-    }
   },
-  props: [
+  props: [ 'spells' ],
-    'spells'
-  ],
   mounted () {
-    this.$nextTick(() => {
+    let lastSpellPosition = this.$refs[this.state.lastSpell][0].$el.offsetTop
-      window.addEventListener('resize', this.newPerPage)
+    let scrollingPageElement = document.getElementsByClassName('layout-view')[0]
-    })
+    scrollingPageElement.scrollTo(0, lastSpellPosition)
-    this.calculateNewPage()
-  },
-  methods: {
-    newPerPage: Utils.debounce(function () {
-      this.calculateNewPage()
-    }, 100),
-    calculateNewPage () {
-      let fontSize = 14
-      this.perPage = Math.floor(window.innerHeight / (fontSize * 5)) - 4
-    }
   },
   computed: {
-    numPages () {
-      return Math.ceil(this.filteredSpells.length / this.perPage)
-    },
     filteredSpells () {
-      return new Query(this.spells)
+      let spells = this.spells
+      return new Query(spells)
       .search('name', this.state.search)
       .sort(this.state.sortBy)
       .results
-    },
-    pagedSpells () {
-      return new Query(this.filteredSpells)
-      .paginate(this.state.page, this.perPage)
-      .results
     }
   }
 }

src/store.js

@@ -5,11 +5,12 @@ export let state = {
     loaded: false,
     data: []
   },
+  indexedSpells: [],
   chosen: [],
   search: '',
   sortBy: 'name',
   previousSortBy: 'name',
-  page: 1
+  lastSpell: ''
 }
 
 export function dispatch (action) {
@@ -17,6 +18,15 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
+    case 'SPELLS_CREATE_INDEX':
+      state.indexedSpells = action.data.map(spell => {
+        return {
+          name: spell.name,
+          classes: spell.classes,
+          level: spell.level
+        }
+      })
+      break
     case 'LOAD_LOCAL_CHOSEN' :
       state.chosen = LocalStorage.get.item('chosen').split(',')
       break