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,72 +1,72 @@
-<?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>
-    <author email="jason@walljm.com" href="http://dynamicbible.com/">Jason Wall</author>
-    <content src="index.html" />
-    <access origin="*" />
-    <allow-intent href="http://*/*" />
-    <allow-intent href="https://*/*" />
-    <allow-intent href="tel:*" />
-    <allow-intent href="sms:*" />
-    <allow-intent href="mailto:*" />
-    <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" />
-    </platform>
-    <platform name="ios">
-        <allow-intent href="itms:*" />
-        <allow-intent href="itms-apps:*" />
-    </platform>
-    <preference name="webviewbounce" value="false" />
-    <preference name="UIWebViewBounce" value="false" />
-    <preference name="DisallowOverscroll" value="true" />
-    <preference name="android-minSdkVersion" value="16" />
-    <preference name="BackupWebStorage" value="none" />
-    <preference name="SplashMaintainAspectRatio" value="true" />
-    <preference name="FadeSplashScreenDuration" value="300" />
-    <preference name="SplashScreen" value="screen" />
-    <preference name="SplashScreenDelay" value="3000" />
-    <preference name="ShowSplashScreen" value="true" />
-    <preference name="AutoHideSplashScreen" value="true" />
-    <preference name="SplashShowOnlyFirstTime" value="false" />
-    <preference name="FadeSplashScreen" value="false" />
-    <feature name="SplashScreen">
-        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
-    </feature>
-    <feature name="StatusBar">
-        <param name="ios-package" onload="true" value="CDVStatusBar" />
-    </feature>
-    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
-    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
-    <plugin name="cordova-plugin-console" spec="1.0.5" />
-    <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+" />
-        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
-        <variable name="XWALK_MODE" value="embedded" />
-        <variable name="XWALK_MULTIPLEAPK" value="true" />
-    </plugin>
-</widget>
+  <name>Dynamic Bible</name>
+  <description>A bible app designed for bible study</description>
+  <author email="jason@walljm.com" href="http://dynamicbible.com/">Jason Wall</author>
+  <content src="index.html"/>
+  <access origin="*"/>
+  <allow-intent href="http://*/*"/>
+  <allow-intent href="https://*/*"/>
+  <allow-intent href="tel:*"/>
+  <allow-intent href="sms:*"/>
+  <allow-intent href="mailto:*"/>
+  <allow-intent href="geo:*"/>
+  <platform name="android">
+    <allow-intent href="market:*"/>
+    <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:*"/>
+    <allow-intent href="itms-apps:*"/>
+  </platform>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="android-minSdkVersion" value="16"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <preference name="SplashMaintainAspectRatio" value="true"/>
+  <preference name="FadeSplashScreenDuration" value="300"/>
+  <preference name="SplashScreen" value="screen"/>
+  <preference name="SplashScreenDelay" value="3000"/>
+  <preference name="ShowSplashScreen" value="true"/>
+  <preference name="AutoHideSplashScreen" value="true"/>
+  <preference name="SplashShowOnlyFirstTime" value="false"/>
+  <preference name="FadeSplashScreen" value="false"/>
+  <feature name="SplashScreen">
+    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
+  </feature>
+  <feature name="StatusBar">
+    <param name="ios-package" onload="true" value="CDVStatusBar"/>
+  </feature>
+  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
+  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
+  <plugin name="cordova-plugin-console" spec="1.0.5"/>
+  <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"/>
+  <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+"/>
+    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect"/>
+    <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>
+    <br>
+    
+    <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,26 +6,30 @@
 </ion-item>
 <ion-card-content>
     <br>
-    <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>
-    </p>
-    <template [ngIf]="item.rmac !== null">
-        <h2>RMAC</h2>
-        <b>{{item.rmac.id}}</b>
-        <br>
-        <ul>
-            <li *ngFor="let c of item.rmac.d">
-                {{c}}
-            </li>
-        </ul>
-    </template>
-    <h2>Cross References</h2>
-    <ion-scroll scrollY="true">
-        <dl>
-            <dd *ngFor="let wrd of item.crossrefs.ss">
-                <b>{{wrd.w}}</b>: <span *ngFor="let p of wrd.rs"><a (click)="openPassage(p.r)">{{makePassage(p.r)}}</a>, </span>
-            </dd>
-        </dl>
-    </ion-scroll>
+    <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>
+        </p>
+        <template [ngIf]="item.rmac !== null">
+            <h2>RMAC</h2>
+            <b>{{item.rmac.id}}</b>
+            <br>
+            <ul>
+                <li *ngFor="let c of item.rmac.d">
+                    {{c}}
+                </li>
+            </ul>
+        </template>
+    </div>
+    <div class="strongs-cross">
+        <h2>Cross References</h2>
+        <ion-scroll scrollY="true">
+            <dl>
+                <dd *ngFor="let wrd of item.crossrefs.ss">
+                    <b>{{wrd.w}}</b>: <span *ngFor="let p of wrd.rs"><a (click)="openPassage(p.r)">{{makePassage(p.r)}}</a>, </span>
+                </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 {
+    background-color: #c6efd4;
 }
-.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,71 +1,102 @@
-.words-title {
-    background-color:#f5b9f3;
-}
+words {
+    .words-title {
+        background-color: #f5b9f3;
+    }
 
-words ion-scroll {
-    white-space: nowrap;
-    height: 200px;
-}
+    .passage-button {
+        font-size: 1em;
+        float: left;
+        padding: .5em;
+        background-color: #fceeee;
+        margin: .3em;
+        text-align: center;
+    }
 
-ion-col .button{
-    background-color: #fceeee;
-    padding: 9px 6px 9px 6px;
-    width: 100%;
-    height: 100%;
-}
+    ion-scroll {
+        white-space: nowrap;
+        height: 200px;
+    }
 
+    ion-col .button {
+        background-color: #fceeee;
+        padding: 9px 6px 9px 6px;
+        width: 100%;
+        height: 100%;
+    }
 
-ion-col {
-    margin-bottom: 0px !important;
+    ion-col {
+        margin-bottom: 0px !important;
+    }
 }
 
 @media screen and (max-width: 499px) {
-    words .passage-button
-    {
-        width: 100%;
+    words {
+        .passage-button {
+            width: 100%;
+        }
+
+        ion-scroll {
+            height: 250px;
+        }
     }
 }
 
 @media screen and (max-width: 699px) and (min-width: 500px) {
-    words .passage-button
-    {
-        width: 46%;
+    words {
+        .passage-button {
+            width: 46%;
+        }
+
+        ion-scroll {
+            height: 250px;
+        }
     }
 }
 
 @media screen and (max-width: 799px) and (min-width: 700px) {
-    words .passage-button
-    {
-        width: 31%;
+    words {
+        .passage-button {
+            width: 31%;
+        }
+
+        ion-scroll {
+            height: 300px;
+        }
     }
 }
 
 @media screen and (max-width: 899px) and (min-width: 800px) {
-    words .passage-button
-    {
-        width: 23%;
+    words {
+        .passage-button {
+            width: 23%;
+        }
+
+        ion-scroll {
+            height: 350px;
+        }
     }
 }
 
 @media screen and (max-width: 1199px) and (min-width: 900px) {
-    words .passage-button
-    {
-        width: 18%;
-    }
-}
-@media screen and (min-width: 1200px) {
-    words .passage-button
-    {
-        width: 13.5%;
+    words {
+        .passage-button {
+            width: 18%;
+        }
+
+        ion-scroll {
+            height: 350px;
+        }
     }
 }
 
-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;
+        }
+    }
 }