dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 02:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

fullscreen modal template, sql generator modal

Browse Source
This commit is contained in:
Jan Prochazka
2021-03-27 16:45:51 +01:00
parent 2268d6126b
commit 9c27c224ec
6 changed files with 109 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/web/src/modals/ModalBase.svelte
View File

@@ -8,8 +8,6 @@
export let fullScreen = false;
export let noPadding = false;
export let modalId;
export let skipBody = false;
export let skipFooter = false;
function handleCloseModal() {
if (modalId == getActiveModalId()) {
@@ -43,18 +41,14 @@
</div>
</div>
{/if}
{#if !skipBody}
<div class="content" class:noPadding>
<slot />
</div>
{:else}
<div class="content" class:noPadding class:fullScreen>
<slot />
{/if}
{#if !skipFooter}
<div class="footer">
<slot name="footer" />
</div>
{/if}
</div>
<div class="footer" class:fullScreen>
<slot name="footer" />
</div>
</div>
</div>
@@ -113,18 +107,37 @@
background-color: var(--theme-bg-modalheader);
}
.content {
.content:not(.fullScreen) {
border-bottom: 1px solid var(--theme-border);
border-top: 1px solid var(--theme-border);
}
.content:not(.noPadding) {
.content:not(.noPadding):not(.fullScreen) {
padding: 15px;
}
.footer {
.content.fullScreen {
display: flex;
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 100px;
}
.footer:not(.fullScreen) {
border-bottom: 1px solid var(--theme-border);
padding: 15px;
background-color: var(--theme-bg-modalheader);
}
.footer.fullScreen {
position: fixed;
height: 100px;
left: 0;
right: 0;
bottom: 0px;
border-top: 1px solid var(--theme-border);
background-color: var(--theme-bg-modalheader);
}
</style>