arcHIVE-tech
/
Arc-hive-list
4
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

changes accordion layout

This commit is contained in:
buttle 2021-11-24 11:03:36 +01:00
parent d953ecf297
commit 684cfe236b
2 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/archiveList.vue
View File

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

2
src/store.js
View File

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