FEATURE: added responsive logic to css for passage, strongs, words to change size and columns depending on width

* fixed splash image

DynamicBibleIonic/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "./node_modules/typescript/lib"
+}

DynamicBibleIonic/config.xml

@@ -1,4 +1,4 @@
-<?xml version='1.0' encoding='utf-8'?>
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <widget id="com.walljm.dynamicbible" version="3.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <name>Dynamic Bible</name>
   <description>A bible app designed for bible study</description>
@@ -13,24 +13,24 @@
   <allow-intent href="geo:*"/>
   <platform name="android">
     <allow-intent href="market:*"/>
-        <splash density="land-ldpi" src="resources\android\splash\drawable-land-ldpi-screen.png" />
-        <splash density="land-mdpi" src="resources\android\splash\drawable-land-mdpi-screen.png" />
-        <splash density="land-hdpi" src="resources\android\splash\drawable-land-hdpi-screen.png" />
-        <splash density="land-xhdpi" src="resources\android\splash\drawable-land-xhdpi-screen.png" />
-        <splash density="land-xxhdpi" src="resources\android\splash\drawable-land-xxhdpi-screen.png" />
-        <splash density="land-xxxhdpi" src="resources\android\splash\drawable-land-xxxhdpi-screen.png" />
-        <splash density="port-ldpi" src="resources\android\splash\drawable-port-ldpi-screen.png" />
-        <splash density="port-mdpi" src="resources\android\splash\drawable-port-mdpi-screen.png" />
-        <splash density="port-hdpi" src="resources\android\splash\drawable-port-hdpi-screen.png" />
-        <splash density="port-xhdpi" src="resources\android\splash\drawable-port-xhdpi-screen.png" />
-        <splash density="port-xxhdpi" src="resources\android\splash\drawable-port-xxhdpi-screen.png" />
-        <splash density="port-xxxhdpi" src="resources\android\splash\drawable-port-xxxhdpi-screen.png" />
-        <icon density="ldpi" src="resources\android\icon\drawable-ldpi-icon.png" />
-        <icon density="mdpi" src="resources\android\icon\drawable-mdpi-icon.png" />
-        <icon density="hdpi" src="resources\android\icon\drawable-hdpi-icon.png" />
-        <icon density="xhdpi" src="resources\android\icon\drawable-xhdpi-icon.png" />
-        <icon density="xxhdpi" src="resources\android\icon\drawable-xxhdpi-icon.png" />
-        <icon density="xxxhdpi" src="resources\android\icon\drawable-xxxhdpi-icon.png" />
+    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
+    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
+    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
+    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
+    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
+    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
+    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
+    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
+    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
+    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
+    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
+    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
+    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
+    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
+    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
+    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
+    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
+    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
   </platform>
   <platform name="ios">
     <allow-intent href="itms:*"/>
@@ -61,7 +61,6 @@
   <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
   <plugin name="cordova-plugin-device" spec="1.1.4"/>
   <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
-    <icon src="resources\android\icon\drawable-xhdpi-icon.png" />
   <plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
     <variable name="XWALK_VERSION" value="22+"/>
     <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+"/>
@@ -69,4 +68,5 @@
     <variable name="XWALK_MODE" value="embedded"/>
     <variable name="XWALK_MULTIPLEAPK" value="true"/>
   </plugin>
+  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
 </widget>

DynamicBibleIonic/src/components/passage/passage.html

@@ -5,9 +5,11 @@
     </button>
 </ion-item>
 <ion-card-content>
-    <div *ngFor="let ch of item.cs">
     <br>
-        <h2 *ngIf="item.cs.length > 1"><b>Chapter {{ch.ch}}</b></h2>
+    
+    <div class="passage-text" *ngFor="let ch of item.cs">
+        <h2 *ngIf="item.cs.length > 1"><b>Chapter {{ch.ch}}</b>
+        </h2>
         <span *ngFor="let vs of ch.vss"><b>{{vs.v}}.</b> <span *ngFor="let w of vs.w"><template [ngIf]="!isPunct(w.t)">
 </template><a *ngIf="w.s != null" (click)="openStrongs(w.s)">{{w.t}}</a><template [ngIf]="!(w.s != null)">{{w.t}}</template></span><br></span>
     </div>

DynamicBibleIonic/src/components/passage/passage.scss

@@ -1,3 +1,54 @@
 .passage-title {
     background-color:#c3cce4;
 }
+
+@media screen and (max-width: 599px) {
+    passage .passage-text 
+    {
+        -webkit-column-count: 1; /* Chrome, Safari, Opera */
+        -moz-column-count: 1; /* Firefox */
+        column-count: 1;
+    }
+}
+
+@media screen and (min-width: 600px) and (max-width: 849px) {
+    passage .passage-text 
+    {
+        -webkit-column-count: 2; /* Chrome, Safari, Opera */
+        -moz-column-count: 2; /* Firefox */
+        column-count: 2;
+        
+        -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
+        -moz-column-gap: 30px; /* Firefox */
+        column-gap: 30px;
+        
+        -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
+        -moz-column-rule-style: solid; /* Firefox */
+        column-rule-style: solid;
+        
+        -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
+        -moz-column-rule-width: 1px; /* Firefox */
+        column-rule-width: 1px;
+    }
+}
+
+@media screen and (min-width: 850px) {
+    passage .passage-text 
+    {
+        -webkit-column-count: 3; /* Chrome, Safari, Opera */
+        -moz-column-count: 3; /* Firefox */
+        column-count: 3;
+        
+        -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
+        -moz-column-gap: 30px; /* Firefox */
+        column-gap: 30px;
+        
+        -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
+        -moz-column-rule-style: solid; /* Firefox */
+        column-rule-style: solid;
+
+        -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
+        -moz-column-rule-width: 1px; /* Firefox */
+        column-rule-width: 1px;
+    }
+}

DynamicBibleIonic/src/components/strongs/strongs.html

@@ -6,6 +6,7 @@
 </ion-item>
 <ion-card-content>
     <br>
+    <div class="strongs-def">
         <h2>Strongs Definitition</h2>
         <p>
             <b>{{item.def.tr}} ({{item.def.sn}})</b> - {{item.def.p}} - {{item.def.lemma}} - <span [innerHTML]="item.def.de"></span><br>
@@ -20,6 +21,8 @@
                 </li>
             </ul>
         </template>
+    </div>
+    <div class="strongs-cross">
         <h2>Cross References</h2>
         <ion-scroll scrollY="true">
             <dl>
@@ -28,4 +31,5 @@
                 </dd>
             </dl>
         </ion-scroll>
+    </div>
 </ion-card-content>

DynamicBibleIonic/src/components/strongs/strongs.scss

@@ -1,6 +1,58 @@
-strongs ion-scroll {
-    height: 250px;
-}
-.strongs-title {
+.strongs-title {
     background-color: #c6efd4;
 }
+
+strongs {
+    ion-scroll {
+        height: 250px;
+    }
+
+    .strongs-def {
+        float: left;
+    }
+
+    .strongs-cross {
+        float: left;
+    }
+
+    p {
+        padding-left: 1em;
+    }
+
+    .scroll-content {
+        padding: 0px !important;
+    }
+
+    dd {
+        -webkit-margin-start: 12px;
+    }
+}
+
+@media screen and (max-width: 749px) {
+    strongs {
+        .strongs-def {
+            width: 100%;
+        }
+
+        .strongs-cross {
+            width: 100%;
+        }
+    }
+}
+
+@media screen and (min-width: 750px) {
+    strongs {
+        ion-scroll {
+            height: 400px;
+        }
+
+        .strongs-def {
+            width: 50%;
+            padding-right: 12px;
+        }
+
+        .strongs-cross {
+            width: 50%;
+        }
+    }
+}

DynamicBibleIonic/src/components/words/words.scss

@@ -1,8 +1,18 @@
-.words-title {
+words {
+    .words-title {
         background-color: #f5b9f3;
     }
 
-words ion-scroll {
+    .passage-button {
+        font-size: 1em;
+        float: left;
+        padding: .5em;
+        background-color: #fceeee;
+        margin: .3em;
+        text-align: center;
+    }
+
+    ion-scroll {
         white-space: nowrap;
         height: 200px;
     }
@@ -14,58 +24,79 @@ ion-col .button{
         height: 100%;
     }
 
-
     ion-col {
         margin-bottom: 0px !important;
     }
+}
 
 @media screen and (max-width: 499px) {
-    words .passage-button
-    {
+    words {
+        .passage-button {
             width: 100%;
         }
+
+        ion-scroll {
+            height: 250px;
+        }
+    }
 }
 
 @media screen and (max-width: 699px) and (min-width: 500px) {
-    words .passage-button
-    {
+    words {
+        .passage-button {
             width: 46%;
         }
+
+        ion-scroll {
+            height: 250px;
+        }
+    }
 }
 
 @media screen and (max-width: 799px) and (min-width: 700px) {
-    words .passage-button
-    {
+    words {
+        .passage-button {
             width: 31%;
         }
+
+        ion-scroll {
+            height: 300px;
+        }
+    }
 }
 
 @media screen and (max-width: 899px) and (min-width: 800px) {
-    words .passage-button
-    {
+    words {
+        .passage-button {
             width: 23%;
         }
+
+        ion-scroll {
+            height: 350px;
+        }
+    }
 }
 
 @media screen and (max-width: 1199px) and (min-width: 900px) {
-    words .passage-button
-    {
+    words {
+        .passage-button {
             width: 18%;
         }
+
+        ion-scroll {
+            height: 350px;
         }
-@media screen and (min-width: 1200px) {
-    words .passage-button
-    {
-        width: 13.5%;
     }
 }
 
-words .passage-button
-{
-    font-size: 1em;
-    float: left;
-    padding: .5em;
-    background-color: #fceeee;
-    margin: .3em;
-    text-align: center;
+@media screen and (min-width: 1200px) {
+    words {
+        .passage-button {
+            width: 13.5%;
+        }
+
+        ion-scroll {
+            height: 350px;
+        }
+    }
 }