Kingsmai/dticket.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): improve mobile responsiveness and touch targets

Browse Source 
Add mobile-optimized card view for seat lists on smaller screens
Increase minimum height for buttons and form items for better touch interaction
Adjust grid layouts, padding, and spacing across pages for mobile devices
This commit is contained in:
xiaomai
2026-05-08 16:28:47 +08:00
parent 227c64d346
commit b6749bc5e7
4 changed files with 89 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/pages/index.vue
View File

@@ -235,8 +235,8 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
<template>
<UContainer class="page-shell-narrow">
<div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_34rem] xl:items-start">
<section class="space-y-6 xl:sticky xl:top-6">
<div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_34rem] xl:items-start xl:gap-8">
<section class="space-y-4 xl:sticky xl:top-6 xl:space-y-6">
<div class="page-header">
<UBadge :label="t('layout.brand')" color="primary" variant="soft" class="page-eyebrow" />
<h1 class="page-title">
@@ -247,11 +247,11 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
</p>
</div>
<div class="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
<div class="grid gap-2 sm:grid-cols-3 xl:grid-cols-1 xl:gap-3">
<div
v-for="detail in eventDetails"
:key="detail.label"
class="surface-card rounded-lg p-4"
class="surface-card rounded-lg p-3 sm:p-4"
>
<div class="flex items-start gap-3">
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
@@ -273,7 +273,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
<UCard
id="booking-form"
class="surface-card overflow-hidden rounded-lg"
:ui="{ body: 'space-y-6 p-5 sm:p-6' }"
:ui="{ body: 'space-y-5 p-4 sm:space-y-6 sm:p-6' }"
>
<div class="space-y-1">
<p class="text-sm font-semibold text-primary">
@@ -284,8 +284,8 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
</h2>
</div>
<UForm :state="form" :validate="validateBooking" class="space-y-6" @submit="bookTicket">
<div class="grid gap-5 sm:grid-cols-2">
<UForm :state="form" :validate="validateBooking" class="space-y-5 sm:space-y-6" @submit="bookTicket">
<div class="grid gap-4 sm:grid-cols-2 sm:gap-5">
<UFormField name="name" :label="t('booking.name')" required>
<UInput v-model="form.name" size="xl" class="w-full" :placeholder="t('booking.namePlaceholder')" />
</UFormField>
@@ -303,13 +303,13 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
indicator="hidden"
:items="bookingModeOptions"
:ui="{
fieldset: 'grid grid-cols-2 gap-3',
item: 'rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
}"
/>
</UFormField>
<div class="grid gap-5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]">
<div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] sm:gap-5">
<UFormField :label="quantityLabel" name="quantity">
<UInputNumber v-model="form.quantity" size="xl" class="w-full" :min="1" :step="1" />
<template #help>
@@ -337,13 +337,13 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
:items="ticketCatalogOptions"
:ui="{
fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
item: 'rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
}"
/>
</UFormField>
<div class="surface-panel rounded-lg px-4 py-4">
<div class="flex items-center justify-between gap-4">
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<span class="text-sm font-medium text-muted">{{ t('common.totalPrice') }}</span>
<span class="text-2xl font-bold tabular-nums text-highlighted">{{ totalFormatted }}</span>
</div>
@@ -354,7 +354,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
type="submit"
:label="t('booking.bookNow')"
size="xl"
class="w-full justify-center"
class="min-h-12 w-full justify-center"
:disabled="!selectedPersonInCharge || !selectedBookingMode || !selectedTicket"
:loading="submittingBooking"
/>