changes accordion layout

src/components/archiveList.vue

@@ -19,14 +19,11 @@ This file is part of ArciveList.
     <main class="">
       <article class="">
 
-        <ul class="accordion"
-            data-responsive-accordion-tabs="accordion small-accordion"
-            data-multi-expand="true"
-            data-allow-all-closed="true"
-            data-deep-link="true">
+        <ul class="accordion">
           <li class="accordion-item title"
-              data-accordion-item disabled>
-            <a href="#" class="accordion-title">
+              data-accordion-item
+              disabled>
+            <div class="accordion-title">
               <ul class="">
                 <li class="title"
                     v-on:click="setActiveColumn('title')">
@@ -61,18 +58,12 @@ This file is part of ArciveList.
                   </span>
                 </li>
               </ul>
-            </a>
-            <div class="accordion-content"
-                 data-tab-content>
-              <figure>
-              </figure>
-              <p>
-              </p>
             </div>
           </li>
           <li v-for="site in sites"
-              class="accordion-item" data-accordion-item>
-            <a href="#" class="accordion-title">
+              class="accordion-item accordion-site-item"
+              data-accordion-item>
+            <div class="accordion-title">
               <ul class="">
                 <li class="title">
                   {{ site.title }}
@@ -87,8 +78,10 @@ This file is part of ArciveList.
                   {{ site.project_date }}
                 </li>
               </ul>
-            </a>
-            <aside class="accordion-content" data-tab-content>
+            </div>
+            <aside class="accordion-content
+                          accordion-site-content"
+                   data-tab-content>
              <section>
               <figure>
                 <img :src="site.thumbnail" />
@@ -105,9 +98,8 @@ This file is part of ArciveList.
           </li>
         </ul>
         <div class="load_more"
-             v-if="more_sites_to_display"
-             v-on:click="loadMoreSites()">
-          <button>
+             v-if="more_sites_to_display">
+          <button v-on:click="loadMoreSites()">
             Load more
           </button>
         </div>
@@ -139,11 +131,8 @@ export default {
     return {
       columns_order: {'title': 'asc', 'artist': 'asc', 'collection': 'asc', 'date': 'asc'},
       active_column: 'date',
-      //faSortAlphaUp: faSortAlphaUp,
-      //faSortAlphaDown: faSortAlphaDown,
       faLongArrowAltUp: faLongArrowAltUp,
       faLongArrowAltDown: faLongArrowAltDown,
-      //faArrowsV: faArrowsV,
     };
   },
   created() {
@@ -179,7 +168,7 @@ export default {
       this.incrementPageCount()
     },
     ...mapGetters([
-      'getDisplayedSites', 'getPageSize', 'getPageCount'
+      'getSitesForDisplay', 'getPageCount'
     ]),
     ...mapMutations([
       'setSites', 'setColumnOrder', 'incrementPageCount'
@@ -190,10 +179,10 @@ export default {
   },
   computed: {
     sites: function() {
-      return this.getDisplayedSites().slice(0, this.getPageCount() *  this.page_size)
+      return this.getSitesForDisplay().slice(0, this.getPageCount() *  this.page_size)
     },
     more_sites_to_display: function() {
-      if (this.getDisplayedSites().length > this.getPageCount() * this.page_size) {
+      if (this.getSitesForDisplay().length > this.getPageCount() * this.page_size) {
         return true
       }
       return false

src/store.js

@@ -52,7 +52,7 @@ const store = new Vuex.Store({
     },
   },
   getters: {
-    getDisplayedSites: state => {
+    getSitesForDisplay: state => {
       if (state.search_text === "") {
         return state.sites
       }