getBible/app
4
2
Fork 0
mirror of https://github.com/getbible/app.git synced 2024-12-22 15:58:55 +00:00
Code

added animation, toggle on chapter click, and removed search filter methods

Browse Source
This commit is contained in:
Erastus Amunwe 2020-11-10 13:49:49 +02:00
parent 1e993baf84
commit 2d8213e0eb
1 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Selection.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class=" uk-width-1-1"> <div id="selection" class=" uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body ">
<div v-if="!translations.length">No translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div> <div v-if="!translations.length">No translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div>
<div v-else> <div v-else>
@ -9,6 +9,7 @@
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> --> <!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
<li <li
class="uk-card uk-card-hover "
v-for="(tr,i) in translations" v-for="(tr,i) in translations"
@click="set_translation(tr.abbreviation)" @click="set_translation(tr.abbreviation)"
:key="i" :key="i"
@ -34,10 +35,11 @@
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin> <ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
<li><a href="#"><span uk-pagination-previous></span></a></li> <li><a href="#"><span uk-pagination-previous></span></a></li>
<li <li
class="uk-card uk-card-hover "
v-for="(ch,i) in chapters" v-for="(ch,i) in chapters"
@click="set_chapter(ch['chapter'])" @click="set_chapter(ch['chapter'])"
:key="i" :key="i"
><a >{{ch['chapter']}}</a></li> ><a href="#selection" uk-toggle>{{ch['chapter']}}</a></li>
<li><a href="#"><span uk-pagination-next></span></a></li> <li><a href="#"><span uk-pagination-next></span></a></li>
</ul> </ul>
</li> </li>
@ -46,7 +48,7 @@
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash'; // import _ from 'lodash';
import UIkit from 'uikit'; import UIkit from 'uikit';
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
@ -64,18 +66,7 @@ export default {
return this.$store.state.saved_translations; return this.$store.state.saved_translations;
}, },
...mapGetters(['chapters', 'books', 'translation', 'book_nr']), ...mapGetters(['chapters', 'books', 'translation', 'book_nr']),
fchapters: function (){
if(!this.search)
return this.chapter.verses
return this.filteredChapters
},
filteredChapters() {
return _.orderBy(this.chapter.verses.filter((item) =>
item.verse.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.name.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
},
}, },
methods:{ methods:{
t(i){ t(i){