Arnike/hnh-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance frontend styling and accessibility features

Browse Source 
- Updated .dockerignore to exclude backup directory with root-only permissions from build context.
- Added new CSS variables for card radius and transition duration in app.css.
- Implemented consistent focus ring styles for interactive elements to improve accessibility.
- Refactored card components across various pages to utilize a unified card style, enhancing visual consistency.
- Improved button styles with touch manipulation support for better user interaction on mobile devices.
This commit is contained in:
Nikolay Tatarinov
2026-03-01 22:19:51 +03:00
parent 225aaa36e7
commit d27eb2651e
9 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend-nuxt/pages/admin/index.vue
View File

@@ -3,7 +3,7 @@
<h1 class="text-2xl font-bold mb-6">Admin</h1>
<template v-if="loading">
<div class="card bg-base-200 shadow-xl mb-6">
<div class="card card-app card-bg-base-200 mb-6">
<div class="card-body">
<Skeleton class="h-6 w-24 mb-4" />
<div class="flex flex-col gap-2">
@@ -12,7 +12,7 @@
</div>
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6">
<div class="card card-app card-bg-base-200 mb-6">
<div class="card-body">
<Skeleton class="h-6 w-20 mb-4" />
<div class="overflow-x-auto">
@@ -20,7 +20,7 @@
</div>
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6">
<div class="card card-app card-bg-base-200 mb-6">
<div class="card-body">
<Skeleton class="h-6 w-16 mb-4" />
<div class="flex flex-col gap-3">
@@ -45,7 +45,7 @@
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
<div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
<div class="card-body">
<h2 class="card-title gap-2">
<icons-icon-users />
@@ -88,7 +88,7 @@
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
<div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
<div class="card-body">
<h2 class="card-title gap-2">
<icons-icon-map-pin />
@@ -145,7 +145,7 @@
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
<div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
<div class="card-body">
<h2 class="card-title gap-2">
<icons-icon-settings />
@@ -191,7 +191,7 @@
</div>
</div>
<div class="card bg-base-200 shadow-xl mb-6 transition-all duration-200">
<div class="card card-app card-bg-base-200 mb-6 transition-all duration-200">
<div class="card-body">
<h2 class="card-title gap-2">
<icons-icon-alert-triangle />
@@ -226,8 +226,8 @@
</button>
</form>
</div>
<div class="border-t border-red-500/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
<p class="text-sm font-medium text-error/90 mb-2">Danger zone</p>
<div class="border-t border-error/30 pt-4 mt-1 bg-error/5 rounded-lg p-3 -mx-1">
<p class="text-sm font-medium text-error mb-2">Danger zone</p>
<button class="btn btn-sm btn-error min-h-11 touch-manipulation" :disabled="wiping" @click="confirmWipe">
<span v-if="wiping" class="loading loading-spinner loading-sm" />
<span v-else>Wipe all data</span>