mirror of
https://gitlab.com/walljm/dynamicbible.git
synced 2025-07-23 07:19:50 -04:00
fix verse picker and words for responsive design
This commit is contained in:
parent
4dae14599b
commit
a0157258c7
@ -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],
|
||||
},
|
||||
|
@ -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
|
||||
|
@ -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 {
|
||||
|
@ -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() {
|
||||
|
@ -41,3 +41,9 @@
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) {
|
||||
.passage-button-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user