diff --git a/src/webpage/file.ts b/src/webpage/file.ts index ec234d4..e4671e9 100644 --- a/src/webpage/file.ts +++ b/src/webpage/file.ts @@ -27,7 +27,7 @@ class File { this.content_type = fileJSON.content_type; this.size = fileJSON.size; } - getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false): HTMLElement { + getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false, max = 96 * 3): HTMLElement { function makeSpoilerHTML(): HTMLElement { const spoil = document.createElement("div"); spoil.classList.add("fSpoil"); @@ -44,11 +44,12 @@ class File { if (this.width && this.height) { let scale = 1; - const max = 96 * 3; scale = Math.max(scale, this.width / max); scale = Math.max(scale, this.height / max); this.width /= scale; this.height /= scale; + this.width ^= 0; + this.height ^= 0; } if (this.height === null) { this.height = 96 * 3; @@ -57,6 +58,10 @@ class File { if (this.content_type.startsWith("image/")) { const div = document.createElement("div"); const img = createImg(src, undefined, div); + if (this.width && this.height) { + img.width = this.width; + img.height = this.height; + } if (!fullScreen) { img.classList.add("messageimg"); div.classList.add("messageimgdiv"); @@ -85,11 +90,11 @@ class File { }); div.append(img); if (this.width && !fullScreen) { - div.style.width = this.width + "px"; - div.style.height = this.height + "px"; + img.style.width = div.style.width = this.width + "px"; + img.style.height = div.style.height = this.height + "px"; } else if (!fullScreen) { - div.style.maxWidth = 96 * 3 + "px"; - div.style.maxHeight = 96 * 3 + "px"; + img.style.maxWidth = div.style.maxWidth = 96 * 3 + "px"; + img.style.maxHeight = div.style.maxHeight = 96 * 3 + "px"; } img.isAnimated().then((animated) => { if (!animated || !this.owner || fullScreen) return; diff --git a/src/webpage/infiniteScroller.ts b/src/webpage/infiniteScroller.ts index e11e85e..ca170d0 100644 --- a/src/webpage/infiniteScroller.ts +++ b/src/webpage/infiniteScroller.ts @@ -39,6 +39,7 @@ function fragAppend(div: HTMLElement, pre = false) { new Promise((res) => { count++; frag[pre ? "prepend" : "append"](elm); + elm.classList.add("noFlex"); if (!qued) { let lcount = count; function wait(t = 0) { diff --git a/src/webpage/interactions/compontents.ts b/src/webpage/interactions/compontents.ts index d1f1e30..4a41b49 100644 --- a/src/webpage/interactions/compontents.ts +++ b/src/webpage/interactions/compontents.ts @@ -115,21 +115,23 @@ class MediaGallery extends compObj { const div = document.createElement("div"); div.classList.add("flexttb", "mediaDisp"); const items = this.items.map((elm) => { - return elm.media.getHTML(); + const img = elm.media.getHTML(undefined, undefined, undefined, 150); + img.classList.add("mediaDispImg"); + return img; }); const row = document.createElement("div"); - row.classList.add("flexltr"); + row.classList.add("flexltr", "imgRow"); row.append(...items.slice(0, 2)); div.append(row); if (items.length > 2) { const row = document.createElement("div"); - row.classList.add("flexltr"); + row.classList.add("flexltr", "imgRow"); row.append(...items.slice(2, 5)); div.append(row); } if (items.length > 5) { const row = document.createElement("div"); - row.classList.add("flexltr"); + row.classList.add("flexltr", "imgRow"); row.append(...items.slice(5, 10)); div.append(row); } diff --git a/src/webpage/reporting/report.ts b/src/webpage/reporting/report.ts index 275543e..6e91b2c 100644 --- a/src/webpage/reporting/report.ts +++ b/src/webpage/reporting/report.ts @@ -236,7 +236,7 @@ class ReportNode { } this.owner.node = this; const div = document.createElement("div"); - div.classList.add("flexttb"); + div.classList.add("flexttb", "reportElm"); this.div = div; const title = document.createElement("h2"); title.textContent = this.header; diff --git a/src/webpage/style.css b/src/webpage/style.css index f0a49ad..5c716ca 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -343,20 +343,16 @@ body { align-items: center; } } -.mediaDisp { - > * { - height: 150px; - margin-bottom: 4px; - > * { - height: 150px !important; - margin-right: 4px; - border-radius: 6px; - img { - height: 150px; - object-fit: cover; - } - } - } +.imgRow { + height: 150px !important; + margin-right: 4px; + border-radius: 6px; + max-height: 150px; + min-height: 150px; +} +.mediaDispImg { + height: 150px !important; + object-fit: cover; } .messageComps { > .flexltr { @@ -2442,9 +2438,9 @@ span.instanceStatus { flex-direction: column; flex-shrink: 1; max-height: fit-content; - > * { - flex: 0; - } +} +.noFlex { + flex: 0; } #pasteimage { height: 30%; @@ -4080,12 +4076,12 @@ fieldset input[type="radio"] { height: 70%; overflow-y: auto; > div { - > * { - margin-bottom: 4px; - } min-height: 100%; } } +.reportElm { + margin-bottom: 4px; +} .removeElm { > .reportMenu { animation-duration: 0.2s;