tweak size of dialogs on small screens

src/src/app/components/help-modal/help-modal.component.html

@@ -7,38 +7,41 @@
     </button>
   </span>
 </mat-toolbar>
+
+<mat-dialog-content>
   <div class="content">
-  <h2>How to search for a verse</h2>
+    <h3 class="paragraph-heading">How to search for a verse</h3>
-  <p>
+      To bring up a passage, just type in a reference, or use the verse picker
-    To bring up a passage, just type in a reference, or use the verse picker in
+      in the top right corner. Dynamic Bible will recognize most abbreviations
-    the top right corner. Dynamic Bible will recognize most abbreviations of
+      of books, and can handle ranges within a book. Here are a few examples to
-    books, and can handle ranges within a book. Here are a few examples to get
+      get you started:
-    you started:
+
-  </p>
+    <h3 class="paragraph-heading">Examples of Search Items:</h3>
-  <h3>Examples of Search Items:</h3>
     <ul>
-    <li><b>John 1</b> (displays whole chapter)</li>
+      <li><b>John 1</b><br />displays whole chapter</li>
-    <li><b>John 3:16</b> (displays single verse)</li>
+      <li><b>John 3:16</b><br />displays single verse</li>
-    <li><b>Jn 3:16</b> (handles abbreviation of John)</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
+        <b>Jn 3:16-17</b><br />displays verses starting with chapter 1 verse 3
-      chapter 1 vs 5)
+        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>Jn 3-4</b><br />displays both chapters</li>
-    <li><b>John 3 - John 4</b> (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
+        <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.)
+        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,
+        <b>G1234</b><br />displays the strongs definition for the Greek # 1234
-      i.e. "Jesus Christ" assumes "Jesus AND Christ". A word without a number is
+      </li>
-      interpreted as search term).
+      <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
+        Multiple lookups can be made using a semicolon as a seperator, i.e.
-      1; g1234; spirit").
+        "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>
+    <h3 class="paragraph-heading">Visit Us Online</h3>
-  <p>
     <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
+    via the
-    on 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,13 +161,17 @@
         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>
@@ -172,3 +179,4 @@
       <li><b>Revelation</b>: rev, re, revelations, rv</li>
     </ul>
   </div>
+</mat-dialog-content>

src/src/app/components/help-modal/help-modal.component.scss

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

src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts

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

src/src/styles/app.scss

@@ -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;
+  }
+}