zaphar/dynamicbible
1
0
Fork 0
mirror of https://gitlab.com/walljm/dynamicbible.git synced 2025-07-25 16:29:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Dynamically calculate the height of search box to accomodate small data sets and different screen sizes.

Browse Source
This commit is contained in:
jason.wall 2017-01-23 14:05:59 -05:00
parent 4d75b532ef
commit 5493c07db5
4 changed files with 68 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
DynamicBibleIonic/src/components/strongs/strongs.scss
View File

@ -47,7 +47,7 @@ strongs {
@media screen and (min-width: 750px) {
strongs {
ion-scroll {
height: 400px;
height: 250px;
}
.strongs-def {

8
DynamicBibleIonic/src/components/words/words.scss
View File

@ -64,7 +64,7 @@
}
ion-scroll {
height: 300px;
height: 275px;
}
}
}
@ -76,7 +76,7 @@
}
ion-scroll {
height: 350px;
height: 275px;
}
}
}
@ -88,7 +88,7 @@
}
ion-scroll {
height: 350px;
height: 300px;
}
}
}
@ -100,7 +100,7 @@
}
ion-scroll {
height: 350px;
height: 300px;
}
}
}

66
DynamicBibleIonic/src/components/words/words.ts
View File

@ -1,4 +1,5 @@
import { EventEmitter, Component, Input, Output } from "@angular/core";
/// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked } from "@angular/core";
import { Reference } from '../../libs/Reference';
import { OpenData, CardItem } from "../../pages/search/search";
@ -6,21 +7,80 @@ import { OpenData, CardItem } from "../../pages/search/search";
selector: "words",
templateUrl: "words.html"
})
export class Words
export class Words implements AfterViewChecked
{
@Output()
onClose = new EventEmitter<CardItem>();
@Output()
onItemClicked = new EventEmitter<OpenData>();
@Input()
cardItem: CardItem;
$: any;
constructor()
{
}
@HostListener('window:resize', ['$event'])
onResize(evt)
{
$("words ion-scroll").each((i, el) =>
{
let wr = $(el).find(".scroll-content .scroll-zoom-wrapper")[0];
let len = $(el).find(".scroll-zoom-wrapper a").length;
if (wr.scrollWidth < 500) // 1 col
{
if (len < 6) // 5 rows
$(el).css("height", len * 44.4 + 25);
else
$(el).css("height", 250);
}
else if (wr.scrollWidth < 699) // 2 col
{
if (len < 13) // 6 rows
$(el).css("height", Math.ceil(len / 2) * 44.4 + 25);
else
$(el).css("height", 300);
}
else if (wr.scrollWidth < 799) // 3 col
{
if (len < 22) // 7 rows
$(el).css("height", Math.ceil(len / 3) * 44.4 + 25);
else
$(el).css("height", 350);
}
else if (wr.scrollWidth < 899) // 4 col
{
if (len < 29) // 7 rows
$(el).css("height", Math.ceil(len / 4) * 44.4 + 25);
else
$(el).css("height", 350);
}
else if (wr.scrollWidth < 1199) // 5 col
{
if (len < 41) // 8 rows
$(el).css("height", Math.ceil(len / 5) * 44.4 + 25);
else
$(el).css("height", 400);
}
else // 6 col
{
if (len < 49) // 8 rows
$(el).css("height", Math.ceil(len / 6) * 44.4 + 25);
else
$(el).css("height", 400);
}
});
}
public ngAfterViewChecked(): void
{
this.onResize(null);
}
close()
{
this.onClose.emit(this.cardItem);

1
DynamicBibleIonic/src/pages/search/search.scss
View File

@ -1,7 +1,6 @@
.search-card {
p {
margin: 1em 0;
line-height: 1em;
font-size: 1em;
}