tweak size of dialogs on small screens

This commit is contained in:
Jason Wall 2021-03-03 14:18:01 -05:00
parent 298a54e8e8
commit 82159cc84c
4 changed files with 189 additions and 154 deletions

View File

@ -7,38 +7,41 @@
</button>
</span>
</mat-toolbar>
<div class="content">
<h2>How to search for a verse</h2>
<p>
To bring up a passage, just type in a reference, or use the verse picker in
the top right corner. Dynamic Bible will recognize most abbreviations of
books, and can handle ranges within a book. Here are a few examples to get
you started:
</p>
<h3>Examples of Search Items:</h3>
<mat-dialog-content>
<div class="content">
<h3 class="paragraph-heading">How to search for a verse</h3>
To bring up a passage, just type in a reference, or use the verse picker
in the top right corner. Dynamic Bible will recognize most abbreviations
of books, and can handle ranges within a book. Here are a few examples to
get you started:
<h3 class="paragraph-heading">Examples of Search Items:</h3>
<ul>
<li><b>John 1</b> (displays whole chapter)</li>
<li><b>John 3:16</b> (displays single verse)</li>
<li><b>Jn 3:16</b> (handles abbreviation of John)</li>
<li><b>John 1</b><br />displays whole chapter</li>
<li><b>John 3:16</b><br />displays single verse</li>
<li><b>Jn 3:16</b><br />handles abbreviation of John</li>
<li>
<b>Jn 3:16-17</b> (displays verses starting with chapter 1 verse 3 through
chapter 1 vs 5)
<b>Jn 3:16-17</b><br />displays verses starting with chapter 1 verse 3
through chapter 1 vs 5
</li>
<li><b>John 3:16-4:4</b></li>
<li><b>Jn 3-4</b> (displays both chapters)</li>
<li><b>John 3 - John 4</b> (displays both chapters)</li>
<li><b>Jn 3-4</b><br />displays both chapters</li>
<li><b>John 3 - John 4</b><br />displays both chapters</li>
<li>
<b>Jn 3:1-*</b> (this will get all the verses in the chapter. the * char
can be used in verse ranges, but not chapter ranges.)
<b>Jn 3:1-*</b><br />this will get all the verses in the chapter. the * char
can be used in verse ranges, but not chapter ranges.
</li>
<li>
<b>H1234</b> (displays the strongs definition for the Hebrew # 1234)
<b>H1234</b><br />displays the strongs definition for the Hebrew # 1234
</li>
<li><b>G1234</b> (displays the strongs definition for the Greek # 1234)</li>
<li>
<b>Jesus</b> (searches for "Jesus". all search terms assume boolean AND,
i.e. "Jesus Christ" assumes "Jesus AND Christ". A word without a number is
interpreted as search term).
<b>G1234</b><br />displays the strongs definition for the Greek # 1234
</li>
<li>
<b>Jesus</b><br />searches for "Jesus". all search terms assume boolean AND,
i.e. "Jesus Christ" assumes "Jesus AND Christ". A word without a number
is interpreted as search term.
</li>
</ul>
@ -46,11 +49,11 @@
for "John 12 - Romans 3" you will get an error. the second book name is
ignored.
<h3>Further Notes:</h3>
<h3 class="paragraph-heading">Further Notes:</h3>
<ul>
<li>
Multiple lookups can be made using a semicolon as a seperator, i.e. "Ruth
1; g1234; spirit").
Multiple lookups can be made using a semicolon as a seperator, i.e.
"Ruth 1; g1234; spirit".
</li>
<li>
All greek/hebrew cross references translations are taken from the 1933
@ -69,22 +72,20 @@
</li>
</ul>
<h3>Visit Us Online</h3>
<p>
<h3 class="paragraph-heading">Visit Us Online</h3>
<a href="http://www.dynamicbible.com">www.dynamicbible.com</a> hosts the
online version of the web app. We are currently available on the
<a
href="https://bitbucket.org/walljm/dynamicbible/downloads/DynamicBible-3.1.0.zip"
>Windows Platform</a
>
via the <a href="http://electron.atom.io/">Electron app from atom.io</a> and
on the
via the
<a href="http://electron.atom.io/">Electron app from atom.io</a> and on the
<a href="https://play.google.com/store/apps/details?id=walljm.dynamicbible"
>Google Android Play store</a
>. We are working on an IOS distribution and will be releasing that soon.
</p>
<h3>Book Names and Accepted Abbreviations</h3>
<h3 class="paragraph-heading">Book Names and Accepted Abbreviations</h3>
<ul>
<li><b>Genesis</b>: gen, ge, gn</li>
<li><b>Exodus</b>: ex, exo, exod, exd</li>
@ -97,7 +98,9 @@
<li><b>1 Samuel</b>: 1, i, 1st, first samuel, sa, sam, sml</li>
<li><b>2 Samuel</b>: 2, ii, 2nd, second, sec samuel, sa, sam, sml</li>
<li><b>1 Kings</b>: 1, i, 1st, first kings, king, kgs, kn, k, ki</li>
<li><b>2 Kings</b>: 2, ii, 2nd, second, sec kings, king, kgs, kn, k, ki</li>
<li>
<b>2 Kings</b>: 2, ii, 2nd, second, sec kings, king, kgs, kn, k, ki
</li>
<li><b>1 Chronicles</b>: 1, i, 1st, first chronicles, chron, ch, chr</li>
<li>
<b>2 Chronicles</b>: 2, ii, 2nd, second, sec chronicles, chron, ch, chr
@ -158,17 +161,22 @@
thessa, thessalonian, thes, thess, th
</li>
<li><b>1 Timothy</b>: 1, i, 1st, first timothy, tim, ti, timoth, tm</li>
<li><b>2 Timothy</b>: 2, ii, 2nd, second, sec timothy, tim, timoth, tm</li>
<li>
<b>2 Timothy</b>: 2, ii, 2nd, second, sec timothy, tim, timoth, tm
</li>
<li><b>Titus</b>: tit</li>
<li><b>Philemon</b>: phlmn, phl, phm, phile, philem</li>
<li><b>Hebrews</b>: heb, he, hebrew</li>
<li><b>James</b>: jam, ja, jas, jms, jame, jm</li>
<li><b>1 Peter</b>: 1, i, 1st, first peter, pe, pet, pete, pt, p</li>
<li><b>2 Peter</b>: 2, ii, 2nd, second, sec peter, pe, pet, pete, pt, p</li>
<li>
<b>2 Peter</b>: 2, ii, 2nd, second, sec peter, pe, pet, pete, pt, p
</li>
<li><b>1 John</b>: 1, i, 1st, first john, jn, jo</li>
<li><b>2 John</b>: 2, ii, 2nd, second, sec john, jn, jo</li>
<li><b>3 John</b>: 3, iii, 3rd, third john, jn, jo</li>
<li><b>Jude</b>: ju</li>
<li><b>Revelation</b>: rev, re, revelations, rv</li>
</ul>
</div>
</div>
</mat-dialog-content>

View File

@ -13,6 +13,15 @@
.content {
margin-top: 12px;
max-height: 80vh;
overflow-y: scroll;
font-size: var(--card-font-size);
font-family: var(--card-font-family);
line-height: calc(var(--card-font-size) + 0.68rem);
}
.paragraph-heading {
font-family: var(--card-heading-font-family);
font-weight: 600;
margin-bottom: 1em;
margin-top: 1em;
}

View File

@ -1,4 +1,4 @@
import { EventEmitter, Component, Output } from '@angular/core';
import { Component } from '@angular/core';
import { AppService } from 'src/app/services/app.service';
import { MatDialogRef } from '@angular/material/dialog';
import { Book, BibleReference } from 'src/app/common/bible-reference';

View File

@ -183,3 +183,21 @@ p {
.mat-icon-button {
line-height: inherit !important;
}
.mat-dialog-container {
padding: 0 !important;
}
.mat-dialog-content {
padding: 12px !important;
margin: 0 !important;
}
@media screen and (max-width: 500px) {
.cdk-overlay-pane {
max-width: 95vw !important;
max-height: 95vh !important;
}
.mat-dialog-content {
max-height: 85vh !important;
}
}