zaphar/dynamicbible
1
0
Fork 0
mirror of https://gitlab.com/walljm/dynamicbible.git synced 2025-07-27 01:19:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

FIX: 1 column setting was creating 2 cols. added dotted line to indicate chapter markers.

Browse Source
This commit is contained in:
jason.wall 2017-01-04 17:11:49 -05:00
parent 7793e07c4e
commit ff6b389a24
2 changed files with 8 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DynamicBibleIonic/src/components/passage/passage.html
View File

@ -11,6 +11,6 @@
<h2 *ngIf="item.cs.length > 1"><b>Chapter {{ch.ch}}</b> <h2 *ngIf="item.cs.length > 1"><b>Chapter {{ch.ch}}</b>
</h2> </h2>
<span *ngFor="let vs of ch.vss"><b>{{vs.v}}.</b> <span *ngFor="let w of vs.w"><template [ngIf]="!isPunct(w.t)"> <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> </div>
</ion-card-content> </ion-card-content>

25
DynamicBibleIonic/src/components/passage/passage.scss
View File

@ -1,31 +1,24 @@
.passage-title { .passage-title {
background-color:#c3cce4; background-color: #c3cce4;
} }
@media screen and (max-width: 599px) { passage .passage-text {
passage .passage-text margin-bottom: 10px;
{ padding-bottom: 12px;
-webkit-column-count: 1; /* Chrome, Safari, Opera */ border-bottom: 1px dotted #808080;
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
} }
@media screen and (min-width: 600px) and (max-width: 849px) { @media screen and (min-width: 600px) and (max-width: 849px) {
passage .passage-text passage .passage-text {
{
-webkit-column-count: 2; /* Chrome, Safari, Opera */ -webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */ -moz-column-count: 2; /* Firefox */
column-count: 2; column-count: 2;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */ -moz-column-gap: 30px; /* Firefox */
column-gap: 30px; column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */ -moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */ -moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px; column-rule-width: 1px;
@ -33,20 +26,16 @@
} }
@media screen and (min-width: 850px) { @media screen and (min-width: 850px) {
passage .passage-text passage .passage-text {
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */ -webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */ -moz-column-count: 3; /* Firefox */
column-count: 3; column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */ -moz-column-gap: 30px; /* Firefox */
column-gap: 30px; column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */ -moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid; column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */ -moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px; column-rule-width: 1px;