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

Modified layout and added pagination

Browse Source
This commit is contained in:
Oh 2020-10-27 21:46:27 +02:00
parent 623c8b361d
commit 491993057b
2 changed files with 180 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/NavBar.vue
View File

@ -1,4 +1,12 @@
<template> <template>
<div class="uk-margin uk-container">
<div class="uk-margin uk-align-right">
<a href="https://github.com/getbible" class="uk-icon-button uk-margin-small-left" uk-icon="github"></a>
<a href="https://www.facebook.com/TheHolyScriptures" class="uk-icon-button uk-margin-small-left" uk-icon="facebook"></a>
<a href="https://truechristian.church/whybible" class="uk-icon-button uk-margin-small-left" uk-icon="world"></a>
</div>
<nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar> <nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar>
<div class="uk-navbar-left"> <div class="uk-navbar-left">
@ -25,14 +33,14 @@
<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">ALL WORDS</button> <button class="uk-button uk-button-default uk-button-small uk-active">ALL WORDS</button>
<button class="uk-button uk-button-default uk-button-small">ANY WORDS</button> <button class="uk-button uk-button-default uk-button-small">ANY WORDS</button>
<button class="uk-button uk-button-default uk-button-small">PHRASE</button> <button class="uk-button uk-button-default uk-button-small">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">BIBLE</button> <button class="uk-button uk-button-default uk-button-small uk-active">BIBLE</button>
<button class="uk-button uk-button-default uk-button-small">OT</button> <button class="uk-button uk-button-default uk-button-small">OT</button>
<button class="uk-button uk-button-default uk-button-small">NT</button> <button class="uk-button uk-button-default uk-button-small">NT</button>
<button class="uk-button uk-button-default uk-button-small">CHAPTER</button> <button class="uk-button uk-button-default uk-button-small">CHAPTER</button>
@ -40,15 +48,14 @@
</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">EXACT MATCH</button> <button class="uk-button uk-button-default uk-button-small uk-active">EXACT MATCH</button>
<button class="uk-button uk-button-default uk-button-small">PARTIAL MATCH</button> <button class="uk-button uk-button-default uk-button-small">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">CASE INSENSITIVE</button> <button class="uk-button uk-button-default uk-button-small uk-active">CASE INSENSITIVE</button>
<button class="uk-button uk-button-default uk-button-small">CASE SENSITIVE</button> <button class="uk-button uk-button-default uk-button-small">CASE SENSITIVE</button>
<!-- <button class="uk-button uk-button-default">Button</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -58,7 +65,7 @@
</div> </div>
<!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> --> <!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> -->
<a class="uk-navbar-item" href="#" uk-toggle><span uk-icon="icon: history; ratio:2"></span>History</a> <a class="uk-navbar-item" href="#" uk-toggle><span uk-icon="icon: history; ratio:2"></span></a>
</div> </div>
<a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span uk-icon="icon: cog; ratio:2"></span></a> <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span uk-icon="icon: cog; ratio:2"></span></a>
@ -114,6 +121,7 @@
</div> </div>
</nav> </nav>
</div>
</template> </template>
<script> <script>
export default { export default {

15
src/components/Options.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div class="uk-container">
<div class="uk-flex uk-flex-around"> <div class="uk-flex uk-flex-around">
<div class="input-group mb-3 cols-3"> <div class="input-group mb-3 cols-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h3>Translation</h3> </label> <label class="input-group-text" for="inputGroupSelect01"><h4>Translation</h4> </label>
</div> </div>
<select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01"> <select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> --> <!-- <option selected value="1">Choose...</option> -->
@ -18,7 +18,7 @@
</div> </div>
<div class="input-group mb-3 cols-3"> <div class="input-group mb-3 cols-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h3>Book of</h3> </label> <label class="input-group-text" for="inputGroupSelect01"><h4>Book</h4> </label>
</div> </div>
<select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01"> <select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> --> <!-- <option selected value="1">Choose...</option> -->
@ -32,7 +32,7 @@
</div> </div>
<div class="input-group mb-3 cols-3"> <div class="input-group mb-3 cols-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h3>Chapter</h3></label> <label class="input-group-text" for="inputGroupSelect01"><h4>Chapter</h4></label>
</div> </div>
<select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01"> <select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> --> <!-- <option selected value="1">Choose...</option> -->
@ -52,6 +52,13 @@
:book_name="books[book].name" :book_name="books[book].name"
:chapter="fchapters" :chapter="fchapters"
/> />
<div class="uk-margin">
<ul class="uk-pagination">
<li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
<li class="uk-margin-auto-left"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul>
</div>
</div> </div>
</template> </template>
<script> <script>