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

Compare commits

base: hj:e8338a2f651ecd38270e9d481de275e15131a000
Branches Tags
hj:shigusegubu-themes3
hj:develop
hj:shigusegubu-clean
hj:shigusegubu-vue3
...
compare: hj:1348bbb4d2ff40217ed4335a64353b513134d185
Branches Tags
hj:shigusegubu-themes3
hj:develop
hj:shigusegubu-clean
hj:shigusegubu-vue3

3 commits
e8338a2f65 ... 1348bbb4d2

Author SHA1 Message Date
Henry Jameson
1348bbb4d2 Merge branch 'mobile-modals' into shigusegubu-themes3 2024-12-29 22:30:04 +02:00
Henry Jameson
fbb1dad55f better support for 3+ buttons 2024-12-29 22:29:50 +02:00
Henry Jameson
b593cadff8 better centering 2024-12-29 22:19:49 +02:00
1 changed files with 35 additions and 24 deletions
Show stats Expand all files Collapse all files

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

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