Refactor frontend components for improved functionality and accessibility
- Consolidated global error handling in app.vue to redirect users to the login page on API authentication failure. - Enhanced MapView component by reintroducing event listeners for selected map and marker updates, improving interactivity. - Updated PasswordInput and various modal components to ensure proper input handling and accessibility compliance. - Refactored MapControls and MapControlsContent to streamline prop management and enhance user experience. - Improved error handling in local storage operations within useMapBookmarks and useRecentLocations composables. - Standardized input elements across forms for consistency in user interaction.
This commit is contained in:
@@ -58,7 +58,7 @@
|
||||
placeholder="Search users…"
|
||||
class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
|
||||
aria-label="Search users"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 max-h-[60vh] overflow-y-auto">
|
||||
<div
|
||||
@@ -101,7 +101,7 @@
|
||||
placeholder="Search maps…"
|
||||
class="input input-sm input-bordered w-full min-h-11 touch-manipulation"
|
||||
aria-label="Search maps"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
<div class="overflow-x-auto max-h-[60vh] overflow-y-auto">
|
||||
<table class="table table-sm table-zebra min-w-[32rem]">
|
||||
@@ -121,7 +121,7 @@
|
||||
</th>
|
||||
<th scope="col">Hidden</th>
|
||||
<th scope="col">Priority</th>
|
||||
<th scope="col" class="text-right"></th>
|
||||
<th scope="col" class="text-right"/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -159,7 +159,7 @@
|
||||
v-model="settings.prefix"
|
||||
type="text"
|
||||
class="input input-sm w-full min-h-11 touch-manipulation"
|
||||
/>
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset w-full max-w-xs">
|
||||
<label class="label" for="admin-settings-title">Title</label>
|
||||
@@ -168,7 +168,7 @@
|
||||
v-model="settings.title"
|
||||
type="text"
|
||||
class="input input-sm w-full min-h-11 touch-manipulation"
|
||||
/>
|
||||
>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<label class="label gap-2 cursor-pointer justify-start min-h-11 touch-manipulation" for="admin-settings-default-hide">
|
||||
@@ -177,7 +177,7 @@
|
||||
v-model="settings.defaultHide"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
>
|
||||
Default hide new maps
|
||||
</label>
|
||||
</fieldset>
|
||||
@@ -211,7 +211,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" />
|
||||
<input ref="mergeFileRef" type="file" accept=".zip" class="hidden" @change="onMergeFile" >
|
||||
<button type="button" class="btn btn-sm min-h-11 touch-manipulation" @click="mergeFileRef?.click()">
|
||||
Choose merge file
|
||||
</button>
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
<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">
|
||||
<form v-if="map" class="flex flex-col gap-4" @submit.prevent="submit">
|
||||
<fieldset class="fieldset">
|
||||
<label class="label" for="name">Name</label>
|
||||
<input id="name" v-model="form.name" type="text" class="input min-h-11 touch-manipulation" 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">
|
||||
<input v-model="form.hidden" type="checkbox" class="checkbox" />
|
||||
<input v-model="form.hidden" type="checkbox" class="checkbox" >
|
||||
<span>Hidden</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<label class="label cursor-pointer gap-2">
|
||||
<input v-model="form.priority" type="checkbox" class="checkbox" />
|
||||
<input v-model="form.priority" type="checkbox" class="checkbox" >
|
||||
<span>Priority</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="container mx-auto p-4 max-w-2xl min-w-0">
|
||||
<h1 class="text-2xl font-bold mb-6">{{ isNew ? 'New user' : `Edit ${username}` }}</h1>
|
||||
|
||||
<form @submit.prevent="submit" class="flex flex-col gap-4">
|
||||
<form class="flex flex-col gap-4" @submit.prevent="submit">
|
||||
<fieldset class="fieldset">
|
||||
<label class="label" for="user">Username</label>
|
||||
<input
|
||||
@@ -12,7 +12,7 @@
|
||||
class="input min-h-11 touch-manipulation"
|
||||
required
|
||||
:readonly="!isNew"
|
||||
/>
|
||||
>
|
||||
</fieldset>
|
||||
<p id="admin-user-password-hint" class="text-sm text-base-content/60 mb-1">Leave blank to keep current password.</p>
|
||||
<PasswordInput
|
||||
@@ -25,7 +25,7 @@
|
||||
<label class="label">Auths</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<label v-for="a of authOptions" :key="a" class="label cursor-pointer gap-2" :for="`auth-${a}`">
|
||||
<input :id="`auth-${a}`" v-model="form.auths" type="checkbox" :value="a" class="checkbox checkbox-sm" />
|
||||
<input :id="`auth-${a}`" v-model="form.auths" type="checkbox" :value="a" class="checkbox checkbox-sm" >
|
||||
<span>{{ a }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user