getBible
/
app
mirror of https://github.com/getbible/app.git
4
2
Fork 0
Code

Added/changed and applied themes, fixed responsive issues

This commit is contained in:
Erastus Amunwe 2020-12-04 14:08:49 +02:00
parent a2ee1d4d5e
commit 77324dfa62
6 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/App.vue
View File

@ -6,7 +6,7 @@
</div>
</div> -->
<navbar/>
<div class="uk-container uk-animation-slide-bottom">
<div class="uk-container uk-animation-slide-bottom uk-margin-top">
<selections/>
<div class="uk-container uk-container-small">
<verses/>
@ -61,7 +61,9 @@ export default {
@import "../node_modules/uikit/src/less/uikit.less";
@import "../node_modules/uikit/src/less/uikit.theme.less";
@global-link-color: #DA7D02;
@global-background: #f5f4f4;;
@global-background: #f5f4f4;
@primary:#55828b;
@secondary: #fed18c;
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@ -95,10 +97,15 @@ export default {
}
.primary {
background-color: #f9a03f !important;
}
// background-color: #813405 !important;
// background-color: #55828b !important;
background-color: @primary !important;
}
.secondary {
background-color: #813405 !important;
// background-color: #f9a03f !important;
// background-color: #87bba2 !important;
// background-color: #fed18c !important;
background-color: @secondary !important;
}
.tertiary {
background-color: #d45113;
@ -107,13 +114,22 @@ export default {
background-color: rgba(224, 222, 221, 1);
}
.text-primary {
color: #f9a03f !important;
}
// color: #813405 !important;
color: #55828b !important;
}
.text-secondary {
color: #813405 !important;
// font: #813405 !important;
// color: #f9a03f !important;
// color: #87bba2 !important;
color: #fed18c !important;
}
.text-tertiary {
color: #d45113;
}
.rounded {
border-radius: 10px;
}
.rounded-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>

2
src/components/NavBar.vue
View File

@ -19,7 +19,7 @@
<a class="uk-navbar-item uk-position-center-right primary text-secondary" href="#modal-sections" uk-toggle><span class="uk-icon-button primary text-secondary" uk-icon="icon: cog; ratio:2"></span></a>
<div id="modal-sections" uk-modal>
<div class="uk-modal-dialog primary text-secondary">
<div class="uk-modal-dialog primary text-secondary rounded-bottom">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header secondary ">
<h2 class="uk-modal-title text-primary">Settings</h2>

13
src/components/Options.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="uk-container">
<div class="uk-margin">
<ul class="uk-pagination">
<li @click="prev"><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
<li class="uk-margin-auto-left" @click="next"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
<div class="uk-margin" uk-margin>
<ul class="uk-pagination" v-if="chapter">
<li @click="prev"><a class="text-primary" href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
<li class="uk-margin-auto-left" @click="next"><a class="text-primary" href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul>
</div>
</div>
@ -131,9 +131,6 @@ export default {
});
}
},
created(){
}
}
</script>

28
src/components/Search.vue
View File

@ -7,9 +7,9 @@
<div class="uk-margin">
<form class="uk-search uk-search-default" action="javascript:void(0)">
<!-- <span uk-search-icon></span> -->
<input class="uk-search-input text-primary" v-model="search" type="search" placeholder="Search Words...">
<input class="uk-search-input text-secondary primary rounded" v-model="search" type="search" placeholder="Search Words...">
<div class="uk-margin">
<button class="uk-button uk-button-default uk-button-small text-primary">Search</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary rounded">Search</button>
</div>
</form>
@ -18,30 +18,30 @@
<div class="uk-margin">
<div class="uk-margin">
<div class="uk-button-group text-primary">
<button class="uk-button uk-button-default uk-button-small text-primary uk-active">ALL WORDS</button>
<button class="uk-button uk-button-default uk-button-small text-primary">ANY WORDS</button>
<button class="uk-button uk-button-default uk-button-small text-primary">PHRASE</button>
<div class="uk-button-group text-primary ">
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">ALL WORDS</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">ANY WORDS</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button>
</div>
</div>
<div class="uk-margin">
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small text-primary uk-active">BIBLE</button>
<button class="uk-button uk-button-default uk-button-small text-primary">OT</button>
<button class="uk-button uk-button-default uk-button-small text-primary">NT</button>
<button class="uk-button uk-button-default uk-button-small text-primary">CHAPTER</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">BIBLE</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">OT</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">NT</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">CHAPTER</button>
</div>
</div>
<div class="uk-margin">
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small text-primary uk-active">EXACT MATCH</button>
<button class="uk-button uk-button-default uk-button-small text-primary">PARTIAL MATCH</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">EXACT MATCH</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PARTIAL MATCH</button>
</div>
</div>
<div class="uk-margin">
<div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small text-primary uk-active">CASE INSENSITIVE</button>
<button class="uk-button uk-button-default uk-button-small text-primary">CASE SENSITIVE</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">CASE INSENSITIVE</button>
<button class="uk-button uk-button-default uk-button-small text-secondary primary">CASE SENSITIVE</button>
</div>
</div>
</div>

14
src/components/Selection.vue
View File

@ -1,15 +1,15 @@
<template>
<div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body " uk-margin>
<div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded" uk-margin>
<div class="" v-if="!saved_translations.length>0">No translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div>
<div v-else>
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
<li class="uk-parent uk-witdth-1-1"><a>Translation</a>
<li class="uk-parent uk-witdth-1-1"><a class="text-secondary">Translation</a>
<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
class="uk-card uk-card-hover text-secondary"
class="uk-card uk-card-hover text-secondary rounded"
v-for="(tr,i) in saved_translations"
@click="set_translation(tr.abbreviation)"
:key="i"
@ -18,7 +18,7 @@
</ul>
</li>
<li class="uk-nav-divider uk-witdth-1-1"></li>
<li v-if="translation" class="uk-parent uk-witdth-1-1"><a>Books</a>
<li v-if="translation" class="uk-parent uk-witdth-1-1"><a class="text-secondary">Books</a>
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
@ -26,12 +26,12 @@
v-for="(bk,i) in books"
@click="set_book(bk['nr'])"
:key="i"
><a href="#">{{bk['name']}}</a></li>
><a href="#" class="text-secondary">{{bk['name']}}</a></li>
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
</ul>
</li>
<li class="uk-nav-divider uk-witdth-1-1"></li>
<li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a>Chapters</a>
<li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a class="text-secondary">Chapters</a>
<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
@ -39,7 +39,7 @@
v-for="(ch,i) in chapters"
@click="set_chapter(ch['chapter'])"
:key="i"
><a href="#selection" uk-toggle>{{ch['chapter']}}</a></li>
><a href="#selection" class="text-secondary" uk-toggle>{{ch['chapter']}}</a></li>
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
</ul>
</li>

11
src/components/Verses.vue
View File

@ -1,8 +1,8 @@
<template >
<div v-if="verses.length">
<div v-if="verses.length" >
<!-- {{search.toLowerCase() + fverses.length}} -->
<br />
<div class="uk-card uk-card-default primary uk-card-body uk-width-1-1">
<div class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded">
<ul :dir="dir"
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
<li v-for="(verse, i) in pverses" :key="i"
@ -11,11 +11,14 @@
<h5 class=" uk-primary text-secondary">
<span class="uk-heading-bullet"> {{book_name+' '}} </span>
<span class="uk-badge secondary badge-light">
<span class="uk-badge secondary text-primary badge-light">
{{verse.chapter}}:{{verse.verse}}
</span>
</h5>
{{verse.text}} <br/>
<span class="text-secondary">
{{verse.text}}
</span>
<br/>
<p></p>
</li>
</ul>