isaacclad/ladill-frontdesk
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add back icon to kiosk type picker and check-in steps.
Deploy Ladill Frontdesk / deploy (push) Successful in 22s
Details

Browse Source 
Place a circular back control at the top-left of the content area; return to welcome or previous form step.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-27 22:02:14 +00:00
co-authored by Cursor
parent 8602f894e4
commit c9a1f7683b
2 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/frontdesk/kiosk/index.blade.php
+22 -9
View File
@@ -50,9 +50,13 @@
{{-- Visitor type carousel --}}
<template x-if="step === 'type'">
<div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8"
<div class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8"
@touchstart="onTypeTouchStart($event)"
@touchend="onTypeTouchEnd($event)">
<div class="absolute left-6 top-8 z-10">
@include('frontdesk.partials.kiosk-back')
</div>
<h2 class="mb-10 text-center text-2xl font-semibold text-slate-900 sm:text-3xl">What brings you here?</h2>
<div class="flex w-full max-w-lg items-center gap-3">
@@ -103,7 +107,11 @@
{{-- Multi-step check-in form --}}
<template x-if="step === 'details'">
<div class="flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
<div class="relative flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
<div class="absolute left-6 top-8 z-10">
@include('frontdesk.partials.kiosk-back')
</div>
<div class="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
<div class="mb-6">
<div class="flex items-center justify-between text-xs font-medium text-slate-500">
@@ -187,15 +195,10 @@
</label>
</div>
<div class="mt-6 flex gap-3">
<button type="button"
@click="prevFormStep()"
class="flex-1 rounded-full border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">
Back
</button>
<div class="mt-6">
<button type="submit"
:disabled="loading"
class="btn-primary flex-1 py-3 disabled:opacity-50">
class="btn-primary w-full py-3 disabled:opacity-50">
<span x-text="loading ? 'Submitting…' : (isLastFormStep ? 'Complete check-in' : 'Continue')"></span>
</button>
</div>
@@ -358,6 +361,16 @@
}
},
goBack() {
if (this.step === 'type') {
this.step = 'welcome';
this.typeIndex = 0;
} else if (this.step === 'details') {
this.prevFormStep();
}
this.resetTimer();
},
resetTimer() {
clearTimeout(this.timer);
this.timer = setTimeout(() => this.reset(), {{ $resetSeconds }} * 1000);
resources/views/frontdesk/partials/kiosk-back.blade.php
+8
View File
@@ -0,0 +1,8 @@
<button type="button"
@click="goBack()"
class="flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-indigo-200 hover:bg-indigo-50 active:scale-95"
aria-label="Go back">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</button>