Enhance frontend styling and accessibility features
- 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:
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="container mx-auto p-4 max-w-lg">
|
||||
<div class="container mx-auto p-4 max-w-2xl min-w-0">
|
||||
<h1 class="text-2xl font-bold mb-6">Edit map {{ id }}</h1>
|
||||
|
||||
<form v-if="map" @submit.prevent="submit" class="flex flex-col gap-4">
|
||||
<fieldset class="fieldset">
|
||||
<label class="label" for="name">Name</label>
|
||||
<input id="name" v-model="form.name" type="text" class="input" required />
|
||||
<input id="name" v-model="form.name" type="text" class="input min-h-11 touch-manipulation" required />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<label class="label cursor-pointer gap-2">
|
||||
@@ -21,16 +21,16 @@
|
||||
</fieldset>
|
||||
<p v-if="error" class="text-error text-sm">{{ error }}</p>
|
||||
<div class="flex gap-2">
|
||||
<button type="submit" class="btn btn-primary" :disabled="loading">
|
||||
<button type="submit" class="btn btn-primary min-h-11 touch-manipulation" :disabled="loading">
|
||||
<span v-if="loading" class="loading loading-spinner loading-sm" />
|
||||
<span v-else>Save</span>
|
||||
</button>
|
||||
<NuxtLink to="/admin" class="btn btn-ghost">Back</NuxtLink>
|
||||
<NuxtLink to="/admin" class="btn btn-ghost min-h-11 touch-manipulation">Back</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
<template v-else-if="mapsLoaded">
|
||||
<p class="text-base-content/70">Map not found.</p>
|
||||
<NuxtLink to="/admin" class="btn btn-ghost mt-2">Back to Admin</NuxtLink>
|
||||
<NuxtLink to="/admin" class="btn btn-ghost mt-2 min-h-11 touch-manipulation">Back to Admin</NuxtLink>
|
||||
</template>
|
||||
<p v-else class="text-base-content/70">Loading…</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user