From a0157258c72b38ae9fbcf94690ed550bee3896bc Mon Sep 17 00:00:00 2001
From: Jason Wall <jason@walljm.com>
Date: Tue, 18 Aug 2020 19:17:40 -0400
Subject: [PATCH] fix verse picker and words for responsive design

---
 src/src/app/common/bible-reference.ts         | 14 +++++-----
 .../verse-picker-modal.component.html         | 26 +++++++------------
 .../verse-picker-modal.component.scss         | 26 +++++++++++++++++--
 .../verse-picker-modal.component.ts           |  6 +++--
 .../words/words-card.component.scss           |  6 +++++
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/src/app/common/bible-reference.ts b/src/src/app/common/bible-reference.ts
index 010c8f89..2277039d 100644
--- a/src/src/app/common/bible-reference.ts
+++ b/src/src/app/common/bible-reference.ts
@@ -33,7 +33,7 @@ export class BibleReference {
       bookNumber: 3,
       name: 'Leviticus',
       abbreviation: 'Lev',
-      longName: 'Leviticus',
+      longName: 'Book of Leviticus',
       lastChapter: 27,
       chapters: [0, 17, 16, 17, 35, 19, 30, 38, 36, 24, 20, 47, 8, 59, 57, 33, 34, 16, 30, 37, 27, 24, 33, 44, 23, 55, 46, 34],
     },
@@ -185,7 +185,7 @@ export class BibleReference {
       bookNumber: 22,
       name: 'Song of Solomon',
       abbreviation: 'Song',
-      longName: 'Song of Solomon',
+      longName: 'Book of the Song of Solomon',
       lastChapter: 8,
       chapters: [0, 17, 17, 11, 16, 16, 13, 13, 14],
     },
@@ -328,7 +328,7 @@ export class BibleReference {
     {
       bookNumber: 40,
       name: 'Matthew',
-      abbreviation: 'Matt',
+      abbreviation: 'Mat',
       longName: 'Gospel of Matthew',
       lastChapter: 28,
       chapters: [0, 25, 23, 17, 25, 48, 34, 29, 34, 38, 42, 30, 50, 58, 36, 39, 28, 27, 35, 30, 34, 46, 46, 39, 51, 46, 75, 66, 20],
@@ -336,7 +336,7 @@ export class BibleReference {
     {
       bookNumber: 41,
       name: 'Mark',
-      abbreviation: 'Mark',
+      abbreviation: 'Mk',
       longName: 'Gospel of Mark',
       lastChapter: 16,
       chapters: [0, 45, 28, 35, 41, 43, 56, 37, 38, 50, 52, 33, 44, 37, 72, 47, 20],
@@ -344,7 +344,7 @@ export class BibleReference {
     {
       bookNumber: 42,
       name: 'Luke',
-      abbreviation: 'Luke',
+      abbreviation: 'Lk',
       longName: 'Gospel of Luke',
       lastChapter: 24,
       chapters: [0, 80, 52, 38, 44, 39, 49, 50, 56, 62, 42, 54, 59, 35, 35, 32, 31, 37, 43, 48, 47, 38, 71, 56, 53],
@@ -352,7 +352,7 @@ export class BibleReference {
     {
       bookNumber: 43,
       name: 'John',
-      abbreviation: 'John',
+      abbreviation: 'Jn',
       longName: 'Gospel of John',
       lastChapter: 21,
       chapters: [0, 51, 25, 36, 54, 47, 71, 53, 59, 41, 42, 57, 50, 38, 31, 27, 33, 26, 40, 42, 31, 25],
@@ -361,7 +361,7 @@ export class BibleReference {
       bookNumber: 44,
       name: 'Acts',
       abbreviation: 'Acts',
-      longName: 'Acts of the Apostles',
+      longName: 'The Acts of the Apostles',
       lastChapter: 28,
       chapters: [0, 26, 47, 26, 37, 42, 15, 60, 40, 43, 48, 30, 25, 52, 28, 41, 40, 34, 28, 41, 38, 40, 30, 35, 27, 27, 32, 44, 31],
     },
diff --git a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html
index a290e791..37345908 100644
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html
@@ -18,25 +18,15 @@
     <span *ngIf="hasBook === false">
       <h2>Old Testament</h2>
       <div>
-        <span *ngFor="let bk of this.books"
-          ><a
-            class="button"
-            (click)="setBook(bk)"
-            *ngIf="bk.bookNumber !== 0 && bk.bookNumber < 40"
-            >{{ bk.shortName }}</a
-          ></span
-        >
+        <span class="button-wrapper" *ngFor="let bk of this.otBooks">
+          <a class="button" (click)="setBook(bk)">{{ bk.name }}</a>
+        </span>
       </div>
       <h2>New Testament</h2>
       <div>
-        <span *ngFor="let bk of this.books"
-          ><a
-            class="button"
-            (click)="setBook(bk)"
-            *ngIf="bk.bookNumber !== 0 && bk.bookNumber > 39"
-            >{{ bk.shortName }}</a
-          ></span
-        >
+        <span class="button-wrapper" *ngFor="let bk of this.ntBooks">
+          <a class="button" (click)="setBook(bk)">{{ bk.name }}</a>
+        </span>
       </div>
     </span>
     <span *ngIf="hasBook === true">
@@ -46,7 +36,9 @@
       </button>
       <h2>{{ book.name }}</h2>
       <div>
-        <span *ngFor="let bk of book.chapters; index as i"
+        <span
+          class="button-wrapper"
+          *ngFor="let bk of book.chapters; index as i"
           ><a class="button" (click)="setChapter(i)" *ngIf="i !== 0">{{
             i
           }}</a></span
diff --git a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
index 648fa34f..b4af632e 100644
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.scss
@@ -1,3 +1,7 @@
+.button:hover {
+  background-color: var(--words-color-primary);
+}
+
 .button {
   color: #fff;
   font-size: 1em;
@@ -5,8 +9,26 @@
   background-color: #1c2e4c;
   margin: 0.3em;
   text-align: center;
-  width: 95px;
-  display: inline-block;
+
+  cursor: pointer;
+  width: 100%;
+}
+
+.button-wrapper {
+  width: 33.3%;
+  display: inline-flex;
+}
+
+@media screen and (max-width: 550px) and (min-width: 395px) {
+  .button-wrapper {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 395px) {
+  .button-wrapper {
+    width: 100%;
+  }
 }
 
 .backbutton {
diff --git a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts
index 39de91d9..6cf6c6d9 100644
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts
@@ -9,13 +9,15 @@ import { Book, BibleReference } from 'src/app/common/bible-reference';
   styleUrls: ['./verse-picker-modal.component.scss'],
 })
 export class VersePickerModalComponent {
-  books: Array<Book>;
+  otBooks: Array<Book>;
+  ntBooks: Array<Book>;
   hasBook = false;
   book: Book;
 
   constructor(public appService: AppService, public dialogRef: MatDialogRef<VersePickerModalComponent>) {
     this.hasBook = false;
-    this.books = BibleReference.Books;
+    this.otBooks = BibleReference.Books.slice(1, 40);
+    this.ntBooks = BibleReference.Books.slice(40, 67);
   }
 
   toBooks() {
diff --git a/src/src/app/components/words/words-card.component.scss b/src/src/app/components/words/words-card.component.scss
index 33bfe2df..ab9a0a24 100644
--- a/src/src/app/components/words/words-card.component.scss
+++ b/src/src/app/components/words/words-card.component.scss
@@ -41,3 +41,9 @@
     width: 50%;
   }
 }
+
+@media screen and (max-width: 470px) {
+  .passage-button-wrapper {
+    width: 100%;
+  }
+}