From e6334494f101b0a3aee66eaf400953d7afc85d80 Mon Sep 17 00:00:00 2001 From: suroh Date: Tue, 5 Dec 2023 12:36:41 +0100 Subject: [PATCH] fixed dialog visibility across all pages --- src/App.js | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index b2a4df6..736bffd 100644 --- a/src/App.js +++ b/src/App.js @@ -34,20 +34,23 @@ export class App extends LitElement { this.addEventListener('single-fullscreen-image', ({ detail }) => { const { src, details } = detail + + const grid = document.createElement('div') + grid.classList.add('grid') + const img = new Image() img.src = src - this.dialogEl.appendChild(img) - - detail.details = 'some details to add to the image to see if this aligns properly' + grid.appendChild(img) if (detail.details) { const div = document.createElement('div') const p = document.createElement('p') p.innerHTML = details div.appendChild(p) - this.dialogEl.appendChild(div) + grid.appendChild(div) } + this.dialogEl.appendChild(grid) this.dialogEl.showModal() this.dialogEl.addEventListener('click', () => { @@ -62,8 +65,7 @@ export class App extends LitElement { ${Router.route.path == '/' ? '' : html``} ${Router.render()} ${Router.route.path == '/' ? '' : html``} - - + ` } @@ -79,22 +81,23 @@ export class App extends LitElement { margin: auto; border: none; outline: none; - display: grid; - grid-template-rows: minmax(0em, 1fr) auto; - max-height: calc(100vmin - 2em); + height: 80svh; - > * { - margin-inline: auto; + & .grid { + display: grid; + grid-template-rows: minmax(0em, 1fr) auto; + height: 100%; } - & div { + & .grid > div { padding-block-start: 1em; font-size: 1.25em; } - & img { + & .grid > img { display: block; height: 100%; + width: 100%; object-fit: contain; } }