fixed dialog visibility across all pages

This commit is contained in:
suroh 2023-12-05 12:36:41 +01:00
parent 062cc98516
commit e6334494f1
1 changed files with 16 additions and 13 deletions

View File

@ -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`<mm-header title=${Router.route.title}></mm-header>`}
${Router.render()}
${Router.route.path == '/' ? '' : html`<mm-footer path=${Router.route.path}></mm-footer>`}
<dialog class="popup">
</dialog>
<dialog class="popup"></dialog>
`
}
@ -79,22 +81,23 @@ export class App extends LitElement {
margin: auto;
border: none;
outline: none;
height: 80svh;
& .grid {
display: grid;
grid-template-rows: minmax(0em, 1fr) auto;
max-height: calc(100vmin - 2em);
> * {
margin-inline: 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;
}
}