FIX: Tweaked display of prev, expand, next icons. Fixed apostophe and - handling in the text

.hgignore

@@ -31,5 +31,6 @@ DynamicBibleUtility/.vs
 DynamicBibleIonic/platforms/android/release-signing.properties
 DynamicBibleIonic/platforms/android/.gradle
 DynamicBibleIonic/platforms/android/build
+*.zip
 syntax: regexp
 npm-debug.log.*

DynamicBibleIonic/DynamicBibleIonic.njsproj

@@ -17,6 +17,7 @@
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">11.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
     <StartWebBrowser>False</StartWebBrowser>
+    <ToolsVersionPromptShown>0.0</ToolsVersionPromptShown>
   </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)' == 'Debug'" />
   <PropertyGroup Condition="'$(Configuration)' == 'Release'">
@@ -71,6 +72,7 @@
     <Folder Include="src\components\passage" />
     <Folder Include="src\components\strongs" />
     <Folder Include="src\components\strongs-modal" />
+    <Folder Include="src\components\verse-picker\" />
     <Folder Include="src\components\words" />
     <Folder Include="src\libs\" />
     <Folder Include="src\pages\help\" />

DynamicBibleIonic/src/components/passage/passage.html

@@ -1,4 +1,4 @@
-<ion-item class="title passage-title" (swipe)="close()">
+<ion-item class="title passage-title" (swipe)="close()">
     <ion-icon name="book" item-left></ion-icon> <span *ngIf="data !== undefined"><span *ngIf="data.status === -1">Error:</span>{{data.ref}}</span>
     <button ion-button icon-only item-right large clear (click)="close()">
         <ion-icon name="close-circle"></ion-icon>
@@ -21,30 +21,20 @@
 <ion-card-content *ngIf="data !== undefined && data.status === -1">
     <error-message [msg]="data.msg"></error-message>
 </ion-card-content>
-<ion-row>
+<div style="float: left">
-    <ion-col text-left class="col-fixed">
+    <button ion-button icon-left clear (click)="close()">
-        <button ion-button icon-left clear small (click)="close()">
+        <ion-icon name="close-circle"></ion-icon>
-            <ion-icon name="close-circle"></ion-icon>
+        <div>Close</div>
-            <div>Close</div>
+    </button>
-        </button>
+</div>
-    </ion-col>
+<div style="float: right">
-    <ion-col text-center col-auto> </ion-col>
+    <button ion-button icon-center clear (click)="prev()" *ngIf="ref !== undefined && ref.Section.start.chapter !== '1'">
-    <ion-col text-center  class="col-fixed" *ngIf="ref !== undefined && ref.Section.start.chapter !== '1'">
+        <ion-icon name="rewind"></ion-icon>
-        <button ion-button icon-left clear small (click)="prev()">
+    </button>
-            <ion-icon name="arrow-dropleft"></ion-icon>
+    <button ion-button icon-center clear (click)="expand()">
-            <div>Prev</div>
+        <ion-icon name="code-working"></ion-icon>
-        </button>
+    </button>
-    </ion-col>
+    <button ion-button icon-center clear (click)="next()" *ngIf="ref !== undefined && ref.Section.end.chapter !== ref.Section.end.lastchapter.toString()">
-    <ion-col text-center  class="col-fixed">
+        <ion-icon name="fastforward"></ion-icon>
-        <button ion-button icon-left clear small (click)="expand()">
+    </button>
-            <ion-icon name="code-working"></ion-icon>
+</div>
-            <div>Expand</div>
-        </button>
-    </ion-col>
-    <ion-col text-center  class="col-fixed" *ngIf="ref !== undefined && ref.Section.end.chapter !== ref.Section.end.lastchapter.toString()">
-        <button ion-button icon-right clear small (click)="next()">
-            <div>Next</div>
-            <ion-icon name="arrow-dropright"></ion-icon>
-        </button>
-    </ion-col>
-</ion-row>

DynamicBibleIonic/src/components/passage/passage.scss

@@ -1,4 +1,4 @@
-passage .button {
+passage .button {
     color: #3D5699;
 }
 
@@ -15,13 +15,7 @@ passage .passage-text {
     padding-top: 12px;
 }
 
-passage {
+@media screen and (min-width: 700px) {
-    .col-fixed {
-        width: 120px;
-    }
-}
-
-@media screen and (min-width: 800px) {
     passage .passage-text {
         -webkit-column-count: 2; /* Chrome, Safari, Opera */
         -moz-column-count: 2; /* Firefox */
@@ -36,4 +30,21 @@ passage {
         -moz-column-rule-width: 1px; /* Firefox */
         column-rule-width: 1px;
     }
-}
+}
+
+@media screen and (min-width: 900px) {
+    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: dotted; /* Chrome, Safari, Opera */
+        -moz-column-rule-style: dotted; /* Firefox */
+        column-rule-style: dotted;
+        -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
+        -moz-column-rule-width: 1px; /* Firefox */
+        column-rule-width: 1px;
+    }
+}

DynamicBibleIonic/src/components/passage/passage.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from '@angular/core';
+import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from '@angular/core';
 import { OpenData, CardItem } from '../../pages/search/search';
 import { BiblePassageResult, BibleService } from '../../services/bible-service';
 import { Reference } from '../../libs/Reference';
@@ -36,7 +36,7 @@ export class Passage implements OnInit
 
     close()
     {
-        let d = 275;
+        let d = 250;
         this.elementRef.nativeElement.parentElement.animate({
             transform: ['none', 'translate3d(110%, 0, 0)']
         }, {
@@ -53,9 +53,13 @@ export class Passage implements OnInit
 
     next()
     {
-        this.ref.Section.start.chapter = (parseInt(this.ref.Section.start.chapter) + 1).toString();
+        if (this.ref.Section.end.verse !== '*' && this.ref.Section.end.verse !== this.data.lastverse.toString())
+            this.ref.Section.end.chapter = this.ref.Section.end.chapter;
+        else
+            this.ref.Section.end.chapter = (parseInt(this.ref.Section.end.chapter) + 1).toString();
+
+        this.ref.Section.start.chapter = this.ref.Section.end.chapter;
         this.ref.Section.start.verse = '1';
-        this.ref.Section.end.chapter = this.ref.Section.start.chapter;
         this.ref.Section.end.verse = '*';
 
         this.bibleService.getResultAsPromise(this.ref.Section).then(data =>
@@ -68,9 +72,13 @@ export class Passage implements OnInit
 
     prev()
     {
-        this.ref.Section.start.chapter = (parseInt(this.ref.Section.start.chapter) - 1).toString();
+        if (this.ref.Section.start.verse !== '1')
-        this.ref.Section.start.verse = '1';
+            this.ref.Section.start.chapter = this.ref.Section.start.chapter;
+        else
+            this.ref.Section.start.chapter = (parseInt(this.ref.Section.start.chapter) - 1).toString();
+
         this.ref.Section.end.chapter = this.ref.Section.start.chapter;
+        this.ref.Section.start.verse = '1';
         this.ref.Section.end.verse = '*';
 
         this.bibleService.getResultAsPromise(this.ref.Section).then(data =>
@@ -84,7 +92,7 @@ export class Passage implements OnInit
     expand()
     {
         // if your verse is at the beginning, to go the prev chapter and add 3 verses from that
-        if (parseInt(this.ref.Section.start.verse) < 3)
+        if (parseInt(this.ref.Section.start.verse) < 4)
         {
             this.ref.Section.start.chapter = (parseInt(this.ref.Section.start.chapter) - 1).toString();
             this.ref.Section.start.verse = '*-' + (3 - parseInt(this.ref.Section.start.verse));
@@ -101,7 +109,10 @@ export class Passage implements OnInit
         if (this.ref.Section.end.verse === '*' || parseInt(this.ref.Section.end.verse) + 3 > this.data.lastverse)
         {
             this.ref.Section.end.chapter = (parseInt(this.ref.Section.end.chapter) + 1).toString();
-            this.ref.Section.end.verse = (parseInt(this.ref.Section.end.verse) + 3 - this.data.lastverse).toString();
+            if (this.ref.Section.end.verse === '*')
+                this.ref.Section.end.verse = '3';
+            else
+                this.ref.Section.end.verse = (parseInt(this.ref.Section.end.verse) + 3 - this.data.lastverse).toString();
 
             if (this.ref.Section.end.chapter === (this.ref.Section.end.lastchapter + 1).toString())
             {
@@ -112,6 +123,9 @@ export class Passage implements OnInit
         else // or add 3 verses
             this.ref.Section.end.verse = (parseInt(this.ref.Section.end.verse) + 3).toString();
 
+        if (this.ref.Section.start.verse === '0')
+            this.ref.Section.start.verse = '1';
+
         this.bibleService.getResultAsPromise(this.ref.Section).then(data =>
         {
             this.data = data;
@@ -133,4 +147,4 @@ export class Passage implements OnInit
     {
         return new RegExp('^[\.\,\;\:\?\!]$').test(c);
     }
-}
+}

DynamicBibleIonic/src/index.html

@@ -29,6 +29,7 @@
     <script src="build/polyfills.js"></script>
     <!-- The bundle js is generated during the build process -->
     <script src="build/main.js"></script>
+    <script src="lib/math.min.js"></script>
     <script src="lib/jquery.min.js"></script>
     <script src="lib/web-animations.min.js"></script>
 </body>