suroh
/
mm.site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.js
View File

@ -34,20 +34,23 @@ export class App extends LitElement {
this.addEventListener('single-fullscreen-image', ({ detail }) => { this.addEventListener('single-fullscreen-image', ({ detail }) => {
const { src, details } = detail const { src, details } = detail
const grid = document.createElement('div')
grid.classList.add('grid')
const img = new Image() const img = new Image()
img.src = src img.src = src
this.dialogEl.appendChild(img) grid.appendChild(img)
detail.details = 'some details to add to the image to see if this aligns properly'
if (detail.details) { if (detail.details) {
const div = document.createElement('div') const div = document.createElement('div')
const p = document.createElement('p') const p = document.createElement('p')
p.innerHTML = details p.innerHTML = details
div.appendChild(p) div.appendChild(p)
this.dialogEl.appendChild(div) grid.appendChild(div)
} }
this.dialogEl.appendChild(grid)
this.dialogEl.showModal() this.dialogEl.showModal()
this.dialogEl.addEventListener('click', () => { 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.route.path == '/' ? '' : html`<mm-header title=${Router.route.title}></mm-header>`}
${Router.render()} ${Router.render()}
${Router.route.path == '/' ? '' : html`<mm-footer path=${Router.route.path}></mm-footer>`} ${Router.route.path == '/' ? '' : html`<mm-footer path=${Router.route.path}></mm-footer>`}
<dialog class="popup"> <dialog class="popup"></dialog>
</dialog>
` `
} }
@ -79,22 +81,23 @@ export class App extends LitElement {
margin: auto; margin: auto;
border: none; border: none;
outline: none; outline: none;
display: grid; height: 80svh;
grid-template-rows: minmax(0em, 1fr) auto;
max-height: calc(100vmin - 2em);
> * { & .grid {
margin-inline: auto; display: grid;
grid-template-rows: minmax(0em, 1fr) auto;
height: 100%;
} }
& div { & .grid > div {
padding-block-start: 1em; padding-block-start: 1em;
font-size: 1.25em; font-size: 1.25em;
} }
& img { & .grid > img {
display: block; display: block;
height: 100%; height: 100%;
width: 100%;
object-fit: contain; object-fit: contain;
} }
} }