jonas/Hoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile responsiveness and touch targets

Browse Source 
Add comprehensive mobile-first adjustments across the UI: reorganize topbar actions and context in Layout.vue, make the navigation drawer mobile-friendly (new mobile class, bottom location, density and block-button behavior), and add many responsive CSS rules. Introduce safe-area variables and larger touch targets in global.css (44px buttons, icon sizes, nav item heights), plus additional responsive patterns in page-layouts.css and surface-patterns.css. Apply mobile breakpoints and spacing/stacking tweaks to Home, Login, Impressum and 404 pages to ensure CTAs, cards and forms behave well on <=960px and <=600px viewports. Document the responsive implementation standard in GUI/style.md and update codexInfo.md to note the mobile/usability changes. Changes are scoped to mobile breakpoints to avoid desktop regressions.
This commit is contained in:
Jonas
2026-04-17 23:57:02 +02:00
parent 8ccc515a7b
commit 36ba210323
10 changed files with 481 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/styles/global/page-layouts.css
+30 -1
View File
@@ -28,19 +28,48 @@
@media (width <= 960px) {
.hoard-page {
width: 100%;
gap: var(--hoard-page-gap-mobile, var(--space-5));
padding-inline:
var(--hoard-page-padding-inline-start-mobile, max(var(--space-2), env(safe-area-inset-left)))
var(--hoard-page-padding-inline-end-mobile, max(var(--space-2), env(safe-area-inset-right)));
padding-block:
var(--hoard-page-padding-start-mobile, var(--space-2))
var(--hoard-page-padding-end-mobile, var(--space-6));
}
.hoard-page--centered {
width: 100%;
min-height: calc(100vh - var(--hoard-centered-offset-mobile, 180px));
padding: var(--hoard-centered-padding-mobile, var(--space-5) var(--space-2));
}
.hoard-shell-grid {
width: 100%;
gap: var(--hoard-shell-gap-mobile, var(--space-5));
padding: var(--hoard-shell-padding-mobile, var(--space-5));
padding:
var(--hoard-shell-padding-block-mobile, var(--space-5))
var(--hoard-shell-padding-inline-mobile, var(--space-4));
}
}
@media (width <= 600px) {
.hoard-page {
gap: var(--hoard-page-gap-mobile-xs, var(--space-4));
padding-block:
var(--hoard-page-padding-start-mobile-xs, var(--space-2))
var(--hoard-page-padding-end-mobile-xs, var(--space-5));
}
.hoard-page--centered {
min-height: calc(100vh - var(--hoard-centered-offset-mobile-xs, 164px));
padding: var(--hoard-centered-padding-mobile-xs, var(--space-4) var(--space-2));
}
.hoard-shell-grid {
gap: var(--hoard-shell-gap-mobile-xs, var(--space-4));
padding:
var(--hoard-shell-padding-block-mobile-xs, var(--space-4))
var(--hoard-shell-padding-inline-mobile-xs, var(--space-3));
}
}
GUI/src/styles/global/surface-patterns.css
+22
View File
@@ -31,3 +31,25 @@
var(--hoard-gradient-end, var(--color-surface)) var(--hoard-gradient-end-stop, 52%)
);
}
@media (width <= 960px) {
.hoard-action-row {
gap: var(--space-2);
}
}
@media (width <= 600px) {
.hoard-kicker {
margin-bottom: var(--space-1);
}
.hoard-action-row {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.hoard-action-row > * {
width: 100%;
}
}