hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'mobile-modals' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2024-12-29 22:30:04 +02:00
commit 1348bbb4d2
1 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/components/dialog_modal/dialog_modal.vue
View file

@ -1,5 +1,6 @@
<template>
<span
class="dialog-container"
:class="{ 'dark-overlay': darkOverlay }"
@click.self.stop="onCancel()"
>
@ -41,14 +42,21 @@
}
}
.dialog-modal.panel {
.dialog-container {
display: grid;
position: fixed;
top: 0;
left: 50%;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-items: center;
justify-items: center;
}
.dialog-modal.panel {
max-height: 80vh;
max-width: 90vw;
margin: 15vh auto;
position: fixed;
transform: translateX(-50%);
z-index: 2001;
cursor: default;
display: block;
@ -71,11 +79,14 @@
border-top: 1px solid var(--border);
display: grid;
grid-gap: 0.5em;
grid-auto-columns: minmax(max-content, 1fr);
grid-template-columns: min-content;
grid-auto-columns: min-content;
grid-auto-flow: column dense;
height: auto;
button {
width: auto;
white-space: nowrap;
padding-left: 2em;
padding-right: 2em;
}
@ -83,29 +94,29 @@
}
#modal.-mobile {
.dialog-container {
justify-content: stretch;
align-items: end;
justify-items: stretch;
}
.dialog-modal.panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
max-width: none;
transform: none;
width: 100vw;
margin: auto;
z-index: 2001;
min-width: 100vw;
}
.dialog-modal-footer {
flex-direction: column;
justify-content: flex-end;
grid-auto-columns: initial;
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
grid-auto-columns: none;
grid-auto-rows: auto;
grid-auto-flow: row dense;
button {
grid-column: 1;
height: 2em;
}
}
}
}
</style>