hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve modals on mobile (sadly no blur because animations wont be smooth :((()

Browse source
This commit is contained in:
hippoz 2022-11-29 21:49:29 +02:00
parent faf8d3a518
commit 402807995c
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/public/global.css
View file

@ -190,12 +190,23 @@ body {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.modal { .modal {
width: 100%; width: 100%;
height: 100%; border-radius: var(--radius-xl);
border-radius: 0px; border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
.modal-backdrop { .modal-backdrop {
align-items: flex-end;
justify-content: center;
backdrop-filter: unset;
}
.modal-backdrop-opaque {
display: block; display: block;
} }
.modal-backdrop-opaque .modal {
width: 100%;
height: 100%;
border-radius: 0;
}
} }
/* input */ /* input */

4
frontend/src/animations.js
View file

@ -1,12 +1,16 @@
import { fade, fly, scale } from "svelte/transition"; import { fade, fly, scale } from "svelte/transition";
import { cubicInOut } from "svelte/easing"; import { cubicInOut } from "svelte/easing";
import { getItem } from "./storage"; import { getItem } from "./storage";
import { smallViewport } from "./stores";
export function maybeModalFade(node) { export function maybeModalFade(node) {
return maybeFade(node, { duration: 175, easing: cubicInOut }); return maybeFade(node, { duration: 175, easing: cubicInOut });
} }
export function maybeModalScale(node) { export function maybeModalScale(node) {
if (smallViewport.value) {
return maybeFly(node, { duration: 175, easing: cubicInOut, y: 20 })
}
return maybeScale(node, { duration: 175, easing: cubicInOut, start: 0.93 }); return maybeScale(node, { duration: 175, easing: cubicInOut, start: 0.93 });
} }