settings updates, fixed
This commit is contained in:
Mark Gregory
@@ -1005,3 +1005,263 @@ span.flatpickr-weekday {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helpdesk mobile / tablet responsive layer
|
||||
Keeps the Core desktop presentation while making every Helpdesk screen
|
||||
usable on touch devices and narrow viewports.
|
||||
========================================================================== */
|
||||
|
||||
.hd-mobile-header {
|
||||
min-height: 3.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hd-helpdesk-surface {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface > * {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface,
|
||||
.hd-helpdesk-surface.hd-mobile-ready {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Hero/page headers */
|
||||
.hd-helpdesk-surface .rounded-3xl {
|
||||
border-radius: 1.15rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br {
|
||||
padding: 1.1rem !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br h1 {
|
||||
font-size: 1.65rem !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br p {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* All action rows become thumb-friendly full-width grids. */
|
||||
.hd-helpdesk-surface .hd-btn {
|
||||
min-height: 2.75rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-inline: .9rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
gap: .55rem !important;
|
||||
}
|
||||
|
||||
/* Dashboard metrics */
|
||||
.hd-helpdesk-surface .grid.md\:grid-cols-2,
|
||||
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Settings cards: two compact coloured cards per row, one on very small phones. */
|
||||
.hd-core-settings > .grid,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
gap: .55rem !important;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid > a,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a {
|
||||
min-width: 0;
|
||||
min-height: 4.4rem;
|
||||
padding: .75rem !important;
|
||||
border-radius: .8rem !important;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid > a .text-2xl,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a .text-2xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Configuration forms */
|
||||
.hd-core-settings form .grid,
|
||||
.hd-helpdesk-surface form .grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.hd-core-settings input,
|
||||
.hd-core-settings select,
|
||||
.hd-core-settings textarea,
|
||||
.hd-helpdesk-surface input,
|
||||
.hd-helpdesk-surface select,
|
||||
.hd-helpdesk-surface textarea {
|
||||
min-height: 2.8rem;
|
||||
font-size: 16px !important; /* prevents iOS input zoom */
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface textarea {
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
/* Search/filter bars */
|
||||
.hd-helpdesk-surface .grid.md\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.lg\:grid-cols-4,
|
||||
.hd-helpdesk-surface .grid.xl\:grid-cols-4 {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Tables remain usable rather than crushing columns. */
|
||||
.hd-helpdesk-surface .overflow-x-auto,
|
||||
.hd-core-settings .overflow-x-auto {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface table,
|
||||
.hd-core-settings table {
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface th,
|
||||
.hd-helpdesk-surface td,
|
||||
.hd-core-settings th,
|
||||
.hd-core-settings td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ticket list table gets a slightly smaller minimum than config tables. */
|
||||
.hd-helpdesk-surface[dusk="helpdesk-ticket-index"] table {
|
||||
min-width: 680px;
|
||||
}
|
||||
|
||||
/* Action button groups wrap instead of overflowing. */
|
||||
.hd-helpdesk-surface td .flex,
|
||||
.hd-core-settings td .flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Ticket show page */
|
||||
.hd-helpdesk-surface .xl\:grid-cols-\[minmax\(0\,1fr\)_20rem\],
|
||||
.hd-helpdesk-surface .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* Attachments/code blocks/content */
|
||||
.hd-helpdesk-surface pre,
|
||||
.hd-helpdesk-surface code,
|
||||
.hd-helpdesk-surface .prose {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Kanban: touch-friendly horizontal lanes with scroll snapping. */
|
||||
[data-helpdesk-kanban-board] {
|
||||
display: flex !important;
|
||||
gap: .75rem !important;
|
||||
overflow-x: auto !important;
|
||||
overscroll-behavior-inline: contain;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-left: .75rem;
|
||||
padding-bottom: 1rem !important;
|
||||
margin-inline: -.75rem;
|
||||
padding-inline: .75rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-board] > section {
|
||||
width: min(88vw, 330px) !important;
|
||||
min-width: min(88vw, 330px) !important;
|
||||
min-height: calc(100dvh - 16rem) !important;
|
||||
scroll-snap-align: start;
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-column] {
|
||||
min-height: 24rem !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-ticket] {
|
||||
cursor: default !important;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.hd-kanban-mobile-move {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Board selector */
|
||||
.hd-select-wrap,
|
||||
.hd-ticket-board-select-wrap {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Modal/dialog safety */
|
||||
[role="dialog"],
|
||||
[data-flux-modal] {
|
||||
max-width: calc(100vw - 1.5rem) !important;
|
||||
max-height: calc(100dvh - 1.5rem) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 479px) {
|
||||
.hd-helpdesk-surface,
|
||||
.hd-helpdesk-surface.hd-mobile-ready {
|
||||
padding-left: .55rem;
|
||||
padding-right: .55rem;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hd-core-settings > .grid,
|
||||
.hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
[data-helpdesk-kanban-board] > section {
|
||||
width: 91vw !important;
|
||||
min-width: 91vw !important;
|
||||
}
|
||||
|
||||
.hd-helpdesk-surface .text-3xl,
|
||||
.hd-helpdesk-surface .text-4xl {
|
||||
font-size: 1.55rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-only devices: rely on mobile status selector instead of requiring DnD. */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
[data-helpdesk-kanban-ticket] {
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hd-kanban-mobile-move {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
</flux:sidebar>
|
||||
|
||||
<!-- Mobile User Menu -->
|
||||
<flux:header class="lg:hidden">
|
||||
<flux:header class="hd-mobile-header lg:hidden">
|
||||
<flux:sidebar.toggle
|
||||
class="lg:hidden"
|
||||
icon="bars-2"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="hd-helpdesk-surface mx-auto max-w-[1800px] space-y-6" dusk="helpdesk-kanban-board"
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready mx-auto max-w-[1800px] space-y-6" dusk="helpdesk-kanban-board"
|
||||
wire:poll.visible.5s="refreshBoard" wire:key="helpdesk-kanban-root">
|
||||
<div
|
||||
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
@@ -197,6 +197,32 @@
|
||||
SLA breach</div>
|
||||
@endif
|
||||
|
||||
@can('update', $ticket)
|
||||
<div class="hd-kanban-mobile-move mt-3 md:hidden">
|
||||
<label
|
||||
for="mobile-status-{{ $ticket->id }}"
|
||||
class="mb-1.5 block text-[11px] font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
|
||||
>
|
||||
Move to status
|
||||
</label>
|
||||
<select
|
||||
id="mobile-status-{{ $ticket->id }}"
|
||||
class="hd-select w-full"
|
||||
wire:change="moveTicket({{ $ticket->id }}, $event.target.value)"
|
||||
aria-label="Move {{ $ticket->reference }} to another status"
|
||||
>
|
||||
@foreach ($statuses as $mobileStatus)
|
||||
<option
|
||||
value="{{ $mobileStatus->id }}"
|
||||
@selected((int) $ticket->status_id === (int) $mobileStatus->id)
|
||||
>
|
||||
{{ $mobileStatus->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
@endcan
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between gap-2 border-t border-zinc-100 pt-3 dark:border-zinc-800">
|
||||
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
$products = collect($products ?? []);
|
||||
@endphp
|
||||
|
||||
<div class="hd-helpdesk-surface hd-core-settings space-y-4" dusk="helpdesk-settings-manager">
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready hd-core-settings space-y-4" dusk="helpdesk-settings-manager">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-5 text-white">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
->unique()
|
||||
->implode(',');
|
||||
@endphp
|
||||
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-create" x-data="{ helpdeskAttachmentsUploading: false }">
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready space-y-6" dusk="helpdesk-ticket-create" x-data="{ helpdeskAttachmentsUploading: false }">
|
||||
@include('modules.helpdesk.partials.page-header', [
|
||||
'eyebrow' => 'Helpdesk',
|
||||
'title' => 'Create ticket',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-index">
|
||||
<div class="hd-helpdesk-surface hd-mobile-ready space-y-6" dusk="helpdesk-ticket-index">
|
||||
<div
|
||||
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
@endphp
|
||||
|
||||
|
||||
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
|
||||
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface hd-mobile-ready space-y-4">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-4 text-white">
|
||||
|
||||
Reference in New Issue
Block a user