mirror of
https://github.com/getbible/app.git
synced 2024-12-22 07:48:55 +00:00
Added/changed and applied themes, fixed responsive issues
This commit is contained in:
Erastus Amunwe
parent
a2ee1d4d5e
commit
77324dfa62
34
src/App.vue
34
src/App.vue
@ -6,7 +6,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<navbar/>
|
<navbar/>
|
||||||
<div class="uk-container uk-animation-slide-bottom">
|
<div class="uk-container uk-animation-slide-bottom uk-margin-top">
|
||||||
<selections/>
|
<selections/>
|
||||||
<div class="uk-container uk-container-small">
|
<div class="uk-container uk-container-small">
|
||||||
<verses/>
|
<verses/>
|
||||||
@ -61,7 +61,9 @@ export default {
|
|||||||
@import "../node_modules/uikit/src/less/uikit.less";
|
@import "../node_modules/uikit/src/less/uikit.less";
|
||||||
@import "../node_modules/uikit/src/less/uikit.theme.less";
|
@import "../node_modules/uikit/src/less/uikit.theme.less";
|
||||||
@global-link-color: #DA7D02;
|
@global-link-color: #DA7D02;
|
||||||
@global-background: #f5f4f4;;
|
@global-background: #f5f4f4;
|
||||||
|
@primary:#55828b;
|
||||||
|
@secondary: #fed18c;
|
||||||
#app {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
@ -95,10 +97,15 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
background-color: #f9a03f !important;
|
// background-color: #813405 !important;
|
||||||
}
|
// background-color: #55828b !important;
|
||||||
|
background-color: @primary !important;
|
||||||
|
}
|
||||||
.secondary {
|
.secondary {
|
||||||
background-color: #813405 !important;
|
// background-color: #f9a03f !important;
|
||||||
|
// background-color: #87bba2 !important;
|
||||||
|
// background-color: #fed18c !important;
|
||||||
|
background-color: @secondary !important;
|
||||||
}
|
}
|
||||||
.tertiary {
|
.tertiary {
|
||||||
background-color: #d45113;
|
background-color: #d45113;
|
||||||
@ -107,13 +114,22 @@ export default {
|
|||||||
background-color: rgba(224, 222, 221, 1);
|
background-color: rgba(224, 222, 221, 1);
|
||||||
}
|
}
|
||||||
.text-primary {
|
.text-primary {
|
||||||
color: #f9a03f !important;
|
// color: #813405 !important;
|
||||||
}
|
color: #55828b !important;
|
||||||
|
}
|
||||||
.text-secondary {
|
.text-secondary {
|
||||||
color: #813405 !important;
|
// color: #f9a03f !important;
|
||||||
// font: #813405 !important;
|
// color: #87bba2 !important;
|
||||||
|
color: #fed18c !important;
|
||||||
}
|
}
|
||||||
.text-tertiary {
|
.text-tertiary {
|
||||||
color: #d45113;
|
color: #d45113;
|
||||||
}
|
}
|
||||||
|
.rounded {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.rounded-bottom {
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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>
|
<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 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>
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||||
<div class="uk-modal-header secondary ">
|
<div class="uk-modal-header secondary ">
|
||||||
<h2 class="uk-modal-title text-primary">Settings</h2>
|
<h2 class="uk-modal-title text-primary">Settings</h2>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="uk-container">
|
<div class="uk-container">
|
||||||
|
|
||||||
<div class="uk-margin">
|
<div class="uk-margin" uk-margin>
|
||||||
<ul class="uk-pagination">
|
<ul class="uk-pagination" v-if="chapter">
|
||||||
<li @click="prev"><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
|
<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 href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -131,9 +131,6 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -7,9 +7,9 @@
|
|||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
<form class="uk-search uk-search-default" action="javascript:void(0)">
|
<form class="uk-search uk-search-default" action="javascript:void(0)">
|
||||||
<!-- <span uk-search-icon></span> -->
|
<!-- <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">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@ -18,30 +18,30 @@
|
|||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
|
|
||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
<div class="uk-button-group text-primary">
|
<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-secondary 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-secondary primary">ANY WORDS</button>
|
||||||
<button class="uk-button uk-button-default uk-button-small text-primary">PHRASE</button>
|
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
<div class="uk-button-group">
|
<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-secondary 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-secondary 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-secondary 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">CHAPTER</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
<div class="uk-button-group">
|
<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-secondary 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">PARTIAL MATCH</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-margin">
|
<div class="uk-margin">
|
||||||
<div class="uk-button-group">
|
<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-secondary 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">CASE SENSITIVE</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
<template>
|
<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 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>
|
<div v-else>
|
||||||
|
|
||||||
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
|
<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>
|
<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 text-secondary"
|
class="uk-card uk-card-hover text-secondary rounded"
|
||||||
v-for="(tr,i) in saved_translations"
|
v-for="(tr,i) in saved_translations"
|
||||||
@click="set_translation(tr.abbreviation)"
|
@click="set_translation(tr.abbreviation)"
|
||||||
:key="i"
|
:key="i"
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="uk-nav-divider uk-witdth-1-1"></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>
|
<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> -->
|
||||||
@ -26,12 +26,12 @@
|
|||||||
v-for="(bk,i) in books"
|
v-for="(bk,i) in books"
|
||||||
@click="set_book(bk['nr'])"
|
@click="set_book(bk['nr'])"
|
||||||
:key="i"
|
: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> -->
|
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="uk-nav-divider uk-witdth-1-1"></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>
|
<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
|
||||||
@ -39,7 +39,7 @@
|
|||||||
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 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> -->
|
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template >
|
<template >
|
||||||
<div v-if="verses.length">
|
<div v-if="verses.length" >
|
||||||
<!-- {{search.toLowerCase() + fverses.length}} -->
|
<!-- {{search.toLowerCase() + fverses.length}} -->
|
||||||
<br />
|
<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"
|
<ul :dir="dir"
|
||||||
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
|
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
|
||||||
<li v-for="(verse, i) in pverses" :key="i"
|
<li v-for="(verse, i) in pverses" :key="i"
|
||||||
@ -11,11 +11,14 @@
|
|||||||
|
|
||||||
<h5 class=" uk-primary text-secondary">
|
<h5 class=" uk-primary text-secondary">
|
||||||
<span class="uk-heading-bullet"> {{book_name+' '}} </span>
|
<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}}
|
{{verse.chapter}}:{{verse.verse}}
|
||||||
</span>
|
</span>
|
||||||
</h5>
|
</h5>
|
||||||
{{verse.text}} <br/>
|
<span class="text-secondary">
|
||||||
|
{{verse.text}}
|
||||||
|
</span>
|
||||||
|
<br/>
|
||||||
<p></p>
|
<p></p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user