fix verse picker and words for responsive design

This commit is contained in:
Jason Wall 2020-08-18 19:17:40 -04:00
parent 4dae14599b
commit a0157258c7
5 changed files with 50 additions and 28 deletions

View File

@ -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],
},

View File

@ -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

View File

@ -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 {

View File

@ -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() {

View File

@ -41,3 +41,9 @@
width: 50%;
}
}
@media screen and (max-width: 470px) {
.passage-button-wrapper {
width: 100%;
}
}