zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mobile responsiveness across UI

Browse Source 
Sidenav becomes a full-screen overlay on mobile with slide-in animation.
Dialog goes full-screen on small screens. Settings dialog gets a mobile
nav with hamburger menu. Touch targets and text sizes scaled up for
mobile. Slider gets visual checked/unchecked colors. Sidebar auto-closes
on mobile route navigation. Resize handle hidden on mobile.
This commit is contained in:
Zoe
2026-04-27 12:06:15 -05:00
parent 8c2cefea49
commit 61c73f394d
13 changed files with 163 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Dialog/index.vue
+2 -2
View File
@@ -53,9 +53,9 @@ onUnmounted(() => {
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
<div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
<div v-if="open" class="z-50 fixed inset-0 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 flex items-center justify-center">
<div
class="absolute max-w-6xl bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
class="absolute w-full h-full md:w-auto md:h-auto max-w-6xl bg-[var(--bg-base)] rounded-none md:rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
<KeepAlive>
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />