diff --git a/DynamicBibleIonic/src/components/strongs/strongs.scss b/DynamicBibleIonic/src/components/strongs/strongs.scss index 90e905ad..286fb3e6 100644 --- a/DynamicBibleIonic/src/components/strongs/strongs.scss +++ b/DynamicBibleIonic/src/components/strongs/strongs.scss @@ -47,7 +47,7 @@ strongs { @media screen and (min-width: 750px) { strongs { ion-scroll { - height: 400px; + height: 250px; } .strongs-def { diff --git a/DynamicBibleIonic/src/components/words/words.scss b/DynamicBibleIonic/src/components/words/words.scss index 42741c4a..e1062874 100644 --- a/DynamicBibleIonic/src/components/words/words.scss +++ b/DynamicBibleIonic/src/components/words/words.scss @@ -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; } } } \ No newline at end of file diff --git a/DynamicBibleIonic/src/components/words/words.ts b/DynamicBibleIonic/src/components/words/words.ts index 61e80bdc..3ae0bc69 100644 --- a/DynamicBibleIonic/src/components/words/words.ts +++ b/DynamicBibleIonic/src/components/words/words.ts @@ -1,4 +1,5 @@ -import { EventEmitter, Component, Input, Output } from "@angular/core"; +/// +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(); @Output() onItemClicked = new EventEmitter(); - + @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); diff --git a/DynamicBibleIonic/src/pages/search/search.scss b/DynamicBibleIonic/src/pages/search/search.scss index a64566bc..71a21840 100644 --- a/DynamicBibleIonic/src/pages/search/search.scss +++ b/DynamicBibleIonic/src/pages/search/search.scss @@ -1,7 +1,6 @@ .search-card { p { margin: 1em 0; - line-height: 1em; font-size: 1em; }