From ff6b389a24044ffe234499bf14deae013df3300d Mon Sep 17 00:00:00 2001
From: "jason.wall" <jason@walljm.com>
Date: Wed, 4 Jan 2017 17:11:49 -0500
Subject: [PATCH] FIX: 1 column setting was creating 2 cols.  added dotted line
 to indicate chapter markers.

---
 .../src/components/passage/passage.html       |  2 +-
 .../src/components/passage/passage.scss       | 25 ++++++-------------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/DynamicBibleIonic/src/components/passage/passage.html b/DynamicBibleIonic/src/components/passage/passage.html
index f651e8e1..f447208d 100644
--- a/DynamicBibleIonic/src/components/passage/passage.html
+++ b/DynamicBibleIonic/src/components/passage/passage.html
@@ -11,6 +11,6 @@
         <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>
+</template><a *ngIf="w.s != null" (click)="openStrongs(w.s)" (press)="openMenu(w.s)">{{w.t}}</a><template [ngIf]="!(w.s != null)">{{w.t}}</template></span><br></span>
     </div>
 </ion-card-content>
diff --git a/DynamicBibleIonic/src/components/passage/passage.scss b/DynamicBibleIonic/src/components/passage/passage.scss
index 95bc0bf1..d78adeb3 100644
--- a/DynamicBibleIonic/src/components/passage/passage.scss
+++ b/DynamicBibleIonic/src/components/passage/passage.scss
@@ -1,31 +1,24 @@
 .passage-title {
-    background-color:#c3cce4;
+    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;
-    }
+passage .passage-text {
+    margin-bottom: 10px;
+    padding-bottom: 12px;
+    border-bottom: 1px dotted #808080;
 }
 
 @media screen and (min-width: 600px) and (max-width: 849px) {
-    passage .passage-text 
-    {
+    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;
@@ -33,20 +26,16 @@
 }
 
 @media screen and (min-width: 850px) {
-    passage .passage-text 
-    {
+    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;