isaaccladandCursor
2b3eed8f84
Deploy Ladill Care / deploy (push) Successful in 35s
Desktop uses a right sticky Actions column; mobile uses a FAB above the nav that opens a bottomsheet. Request investigations moves into a modal/sheet, and Call next is available on the consultation panel. Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
3.3 KiB
PHP
79 lines
3.3 KiB
PHP
{{-- Mobile FAB + bottomsheet Actions. Place outside the page grid. --}}
|
|
@php
|
|
$actionsView = $actionsView ?? null;
|
|
$title = $title ?? 'Actions';
|
|
@endphp
|
|
@if ($actionsView)
|
|
<div
|
|
x-data="{ open: false }"
|
|
@keydown.escape.window="open = false"
|
|
class="lg:hidden"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="clinical-actions-fab"
|
|
@click="open = ! open"
|
|
:aria-expanded="open.toString()"
|
|
aria-label="Open actions"
|
|
>
|
|
<svg x-show="! open" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
|
</svg>
|
|
<svg x-show="open" x-cloak class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<template x-teleport="body">
|
|
<div
|
|
x-show="open"
|
|
x-cloak
|
|
class="fixed inset-0 z-[60] lg:hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="{{ $title }}"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-slate-900/40 backdrop-blur-[2px]"
|
|
@click="open = false"
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
></div>
|
|
|
|
<div
|
|
class="absolute inset-x-0 bottom-0 max-h-[85vh] overflow-y-auto rounded-t-3xl bg-white shadow-2xl"
|
|
style="padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px))"
|
|
@click.stop
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="translate-y-full"
|
|
x-transition:enter-end="translate-y-0"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="translate-y-0"
|
|
x-transition:leave-end="translate-y-full"
|
|
>
|
|
<div class="flex justify-center pb-1 pt-3">
|
|
<div class="h-1 w-10 rounded-full bg-slate-200"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between px-5 pb-2">
|
|
<h2 class="text-base font-semibold text-slate-900">{{ $title }}</h2>
|
|
<button type="button" class="rounded-full p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600" @click="open = false" aria-label="Close">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2 px-4 pb-4">
|
|
@include($actionsView)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
@endif
|