Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/SmallDialog: fix scaling on small screens

Browse source
This commit is contained in:
wukko 2024-07-20 18:49:51 +06:00
parent cd41fc9d49
commit 205494b367
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
web/src/components/dialog/SmallDialog.svelte
View file

@ -25,7 +25,7 @@
setTimeout(() => { setTimeout(() => {
dialogParent.close(); dialogParent.close();
killDialog(); killDialog();
}, 150) }, 150);
} }
}; };
@ -33,7 +33,7 @@
dialogParent.showModal(); dialogParent.showModal();
tick().then(() => { tick().then(() => {
open = true; open = true;
}) });
} }
</script> </script>
@ -73,11 +73,7 @@
</div> </div>
</div> </div>
<div <div id="dialog-backdrop" aria-hidden="true" on:click={() => close()}></div>
id="dialog-backdrop"
aria-hidden="true"
on:click={() => close()}
></div>
</dialog> </dialog>
<style> <style>
@ -113,17 +109,21 @@
} }
.small-dialog { .small-dialog {
--small-dialog-padding: 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: var(--padding); gap: var(--padding);
max-width: 340px; max-width: 340px;
width: 340px; width: calc(
100% - var(--padding) * 2 - var(--small-dialog-padding) * 2
);
background: var(--popup-bg); background: var(--popup-bg);
box-shadow: 0 0 0 2px var(--popup-stroke) inset, box-shadow:
0 0 0 2px var(--popup-stroke) inset,
0 0 60px 10px var(--popup-bg); 0 0 60px 10px var(--popup-bg);
padding: 18px; padding: var(--small-dialog-padding);
margin: var(--padding); margin: var(--padding);
border-radius: 29px; border-radius: 29px;
position: relative; position: relative;
@ -165,7 +165,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
gap: calc(var(--padding) / 2) gap: calc(var(--padding) / 2);
} }
.popup-button { .popup-button {