From 706015c719ef3b4adbd482f4b5a370a018e767c3 Mon Sep 17 00:00:00 2001
From: Oh Martin <ohrionmartin@gmail.com>
Date: Tue, 27 Oct 2020 00:03:17 +0200
Subject: [PATCH 1/4] Search filters and history

---
 src/components/NavBar.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index d6a3c53..2bd4787 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -4,7 +4,7 @@
         
                 <a class="uk-navbar-item uk-logo" href="#">GetBible</a>
         
-               <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span></a>
+               <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
 
                     <div id="offcanvas-slide" uk-offcanvas>
                         <div class="uk-offcanvas-bar">
@@ -25,29 +25,29 @@
 
                                         <div class="uk-margin">
                                             <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default">All</button>
-                                                <button class="uk-button uk-button-default">Any</button>
-                                                <button class="uk-button uk-button-default">Phrase</button>
+                                                <button class="uk-button uk-button-default uk-button-small">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">PHRASE</button>
                                             </div>
                                         </div>
                                          <div class="uk-margin">
                                             <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
+                                                <button class="uk-button uk-button-default uk-button-small">BIBLE</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">CHAPTER</button>
                                             </div>
                                         </div>
                                          <div class="uk-margin">
                                             <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
+                                                <button class="uk-button uk-button-default uk-button-small">EXACT MATCH</button>
+                                                <button class="uk-button uk-button-default uk-button-small">PARTIAL MATCH</button>
                                             </div>
                                         </div>
                                          <div class="uk-margin">
                                             <div class="uk-button-group">
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Button</button>
+                                                <button class="uk-button uk-button-default uk-button-small">CASE INSENSITIVE</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>
@@ -58,6 +58,7 @@
                     </div>
                     
                 <!-- <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>
         
             </div>
             <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span  uk-icon="icon: cog; ratio:2"></span></a>

From 623c8b361d38039eee811b317b8eea1b6f8405e2 Mon Sep 17 00:00:00 2001
From: Oh Martin <ohrionmartin@gmail.com>
Date: Tue, 27 Oct 2020 00:17:16 +0200
Subject: [PATCH 2/4] solved merge conflict

---
 src/components/NavBar.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a564c4f..2bd4787 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -25,15 +25,9 @@
 
                                         <div class="uk-margin">
                                             <div class="uk-button-group">
-<<<<<<< HEAD
                                                 <button class="uk-button uk-button-default uk-button-small">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">PHRASE</button>
-=======
-                                                <button class="uk-button uk-button-default uk-button-small">All</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Any</button>
-                                                <button class="uk-button uk-button-default uk-button-small">Phrase</button>
->>>>>>> e59f24b414f547443bab3d9f17b2a4df4d12cfdb
                                             </div>
                                         </div>
                                          <div class="uk-margin">

From 491993057bbf11e900ee464cc64c57ea0f876764 Mon Sep 17 00:00:00 2001
From: Oh Martin <ohrionmartin@gmail.com>
Date: Tue, 27 Oct 2020 21:46:27 +0200
Subject: [PATCH 3/4] Modified layout and added pagination

---
 src/components/NavBar.vue  | 234 +++++++++++++++++++------------------
 src/components/Options.vue | 111 +++++++++---------
 2 files changed, 180 insertions(+), 165 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 2bd4787..ebb9ff3 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,119 +1,127 @@
 <template>
-    <nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar>
-            <div class="uk-navbar-left">
-        
-                <a class="uk-navbar-item uk-logo" href="#">GetBible</a>
-        
-               <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
+    <div class="uk-margin uk-container">
+        <div class="uk-margin uk-align-right">
 
-                    <div id="offcanvas-slide" uk-offcanvas>
-                        <div class="uk-offcanvas-bar">
-
-                            <div class="uk-nav uk-nav-default"> 
-                                    <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" v-model="search" type="search" placeholder="Search Words...">
-                                                <div class="uk-margin">
-                                                    <button class="uk-button uk-button-default uk-button-small">Search</button>
-                                                </div>
-                                        </form>
-
-                                    </div>
-                                    
-                                    <div class="uk-margin">
-
-                                        <div class="uk-margin">
-                                            <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">ANY WORDS</button>
-                                                <button class="uk-button uk-button-default uk-button-small">PHRASE</button>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <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">OT</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>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <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">PARTIAL MATCH</button>
-                                            </div>
-                                        </div>
-                                         <div class="uk-margin">
-                                            <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">CASE SENSITIVE</button>
-                                                <!-- <button class="uk-button uk-button-default">Button</button> -->
-                                            </div>
-                                        </div>
-                                    </div>
-                            </div>
-
-                        </div>
-                    </div>
-                    
-                <!-- <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>
-        
-            </div>
-            <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span  uk-icon="icon: cog; ratio:2"></span></a>
-
-            <div id="modal-sections" uk-modal>
-                <div class="uk-modal-dialog">
-                    <button class="uk-modal-close-default" type="button" uk-close></button>
-                    <div class="uk-modal-header">
-                        <h2 class="uk-modal-title">Settings</h2>
-                    </div>
-                    <div class="uk-modal-body">
-                         <div class="uk-margin">
-                             <h3>Saved Translations</h3>
-                              <div>
-                                    <ul class="uk-list uk-list-large uk-list-divider">
-                                        <li
-                                        v-for="(tr,i) in savedTranslations" 
-                                        :key="i"
-                                        ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
-                                        {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
-                                        </div> </li> 
-                                        <li v-if="!savedTranslations.length">No saved translation</li>
-                                        
-                                        <li>Add
-                                            <div uk-form-custom="target: > * > span:first-child">
-                                <select v-model="translation">
-                                    <option selected value="Add Translation...">Add Translation...</option>
-                                    <option 
-                                    v-for="(tr,i) in Object.keys(translations)" 
-                                    :key="i"
-                                    :value="tr"
-                                    >{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
-                                    </option>
-                                </select>
-                                <button class="uk-button uk-button-default" type="button" tabindex="-1">
-                                    <span></span>
-                                    <span uk-icon="icon: chevron-down"></span>
-                                </button>
-                            </div>
-                            <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
-                                        </li>
-                                    </ul>
-                                    
-                                </div>
-                            
-                        </div>
-                    </div>
-                    <div class="uk-modal-footer uk-text-right">
-                        <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
-                        <button class="uk-button uk-button-primary" type="button">Save</button>
-                    </div>  
-                </div>
-            </div>
+                <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>
+                <div class="uk-navbar-left">
             
-        </nav>
+                    <a class="uk-navbar-item uk-logo" href="#">GetBible</a>
+            
+                <a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
+
+                        <div id="offcanvas-slide" uk-offcanvas>
+                            <div class="uk-offcanvas-bar">
+
+                                <div class="uk-nav uk-nav-default"> 
+                                        <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" v-model="search" type="search" placeholder="Search Words...">
+                                                    <div class="uk-margin">
+                                                        <button class="uk-button uk-button-default uk-button-small">Search</button>
+                                                    </div>
+                                            </form>
+
+                                        </div>
+                                        
+                                        <div class="uk-margin">
+
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <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">PHRASE</button>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <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">NT</button>
+                                                    <button class="uk-button uk-button-default uk-button-small">CHAPTER</button>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <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>
+                                                </div>
+                                            </div>
+                                            <div class="uk-margin">
+                                                <div class="uk-button-group">
+                                                    <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>
+                                                </div>
+                                            </div>
+                                        </div>
+                                </div>
+
+                            </div>
+                        </div>
+                        
+                    <!-- <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></a>
+            
+                </div>
+                <a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span  uk-icon="icon: cog; ratio:2"></span></a>
+
+                <div id="modal-sections" uk-modal>
+                    <div class="uk-modal-dialog">
+                        <button class="uk-modal-close-default" type="button" uk-close></button>
+                        <div class="uk-modal-header">
+                            <h2 class="uk-modal-title">Settings</h2>
+                        </div>
+                        <div class="uk-modal-body">
+                            <div class="uk-margin">
+                                <h3>Saved Translations</h3>
+                                <div>
+                                        <ul class="uk-list uk-list-large uk-list-divider">
+                                            <li
+                                            v-for="(tr,i) in savedTranslations" 
+                                            :key="i"
+                                            ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
+                                            {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
+                                            </div> </li> 
+                                            <li v-if="!savedTranslations.length">No saved translation</li>
+                                            
+                                            <li>Add
+                                                <div uk-form-custom="target: > * > span:first-child">
+                                    <select v-model="translation">
+                                        <option selected value="Add Translation...">Add Translation...</option>
+                                        <option 
+                                        v-for="(tr,i) in Object.keys(translations)" 
+                                        :key="i"
+                                        :value="tr"
+                                        >{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
+                                        </option>
+                                    </select>
+                                    <button class="uk-button uk-button-default" type="button" tabindex="-1">
+                                        <span></span>
+                                        <span uk-icon="icon: chevron-down"></span>
+                                    </button>
+                                </div>
+                                <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
+                                            </li>
+                                        </ul>
+                                        
+                                    </div>
+                                
+                            </div>
+                        </div>
+                        <div class="uk-modal-footer uk-text-right">
+                            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
+                            <button class="uk-button uk-button-primary" type="button">Save</button>
+                        </div>  
+                    </div>
+                </div>
+                
+            </nav>
+        </div>
 </template>
 <script>
 export default {
diff --git a/src/components/Options.vue b/src/components/Options.vue
index 08ad746..fc405f3 100644
--- a/src/components/Options.vue
+++ b/src/components/Options.vue
@@ -1,58 +1,65 @@
 <template>
-    <div>
-    <div class="uk-flex     uk-flex-around">
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Translation</h3> </label>
+    <div class="uk-container">
+        <div class="uk-flex uk-flex-around">
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Translation</h4> </label>
+                    </div>
+                    <select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations" 
+                        :key="i"
+                        :value="tr.abbreviation"
+                        >{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}
+                        </option>
+                        
+                    </select>
+                </div> 
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Book</h4> </label>
+                    </div>
+                    <select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        v-for="(bk,i) in Object.keys(books)" 
+                        :key="i"
+                        :value="books[bk]['nr']"
+                        >{{books[bk]['name']}}
+                        </option>
+                    </select>
+                </div> 
+                <div class="input-group mb-3 cols-3">
+                    <div class="input-group-prepend">
+                        <label class="input-group-text" for="inputGroupSelect01"><h4>Chapter</h4></label>
+                    </div>
+                    <select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
+                        <!-- <option selected value="1">Choose...</option> -->
+                        <option 
+                        v-for="(ch,i) in Object.keys(chapters)" 
+                        :key="i"
+                        :value="chapters[ch]['chapter']"
+                        >{{chapters[ch]['chapter']}}
+                        </option>
+                        
+                    </select>
                 </div>
-                <select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations" 
-                    :key="i"
-                    :value="tr.abbreviation"
-                    >{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}
-                    </option>
-                    
-                </select>
-            </div> 
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Book of</h3> </label>
-                </div>
-                <select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    v-for="(bk,i) in Object.keys(books)" 
-                    :key="i"
-                    :value="books[bk]['nr']"
-                    >{{books[bk]['name']}}
-                    </option>
-                </select>
-            </div> 
-            <div class="input-group mb-3 cols-3">
-                <div class="input-group-prepend">
-                    <label class="input-group-text" for="inputGroupSelect01"><h3>Chapter</h3></label>
-                </div>
-                <select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
-                    <!-- <option selected value="1">Choose...</option> -->
-                    <option 
-                    v-for="(ch,i) in Object.keys(chapters)" 
-                    :key="i"
-                    :value="chapters[ch]['chapter']"
-                    >{{chapters[ch]['chapter']}}
-                    </option>
-                    
-                </select>
             </div>
-        </div>
-        <verses
-        v-if="translations.length && books[book]"
-        :dir="t(translation).direction.toLowerCase()"
-        :book_name="books[book].name"
-        :chapter="fchapters"
-        />
-        </div>
+            <verses
+            v-if="translations.length && books[book]"
+            :dir="t(translation).direction.toLowerCase()"
+            :book_name="books[book].name"
+            :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>
 </template>
 <script>
 import _ from 'lodash';

From 8e72cc31921e34392168168f1b22821fd91cb6b0 Mon Sep 17 00:00:00 2001
From: Oh Martin <ohrionmartin@gmail.com>
Date: Tue, 27 Oct 2020 22:20:31 +0200
Subject: [PATCH 4/4] Modified icons in Settings

---
 src/components/NavBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index ebb9ff3..d3c770c 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -85,11 +85,11 @@
                                             v-for="(tr,i) in savedTranslations" 
                                             :key="i"
                                             ><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> 
-                                            {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span   uk-icon="icon: minus-circle;"></span></a>
+                                            {{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span  class="uk-button uk-button-danger uk-button-small" uk-icon="icon: close;"></span></a>
                                             </div> </li> 
                                             <li v-if="!savedTranslations.length">No saved translation</li>
                                             
-                                            <li>Add
+                                            <li><b>Add: </b>
                                                 <div uk-form-custom="target: > * > span:first-child">
                                     <select v-model="translation">
                                         <option selected value="Add Translation...">Add Translation...</option>
@@ -105,7 +105,7 @@
                                         <span uk-icon="icon: chevron-down"></span>
                                     </button>
                                 </div>
-                                <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span  uk-icon="icon: plus-circle; ratio:2"></span></a>
+                                <a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span class="uk-button uk-button-primary" uk-icon="icon: plus;"></span></a>
                                             </li>
                                         </ul>