From b8a9ab2e2470f7a9bca8766c9ed4e86ecf0ea2da Mon Sep 17 00:00:00 2001 From: Mark Gregory Date: Thu, 2 Jul 2026 09:32:00 +0100 Subject: [PATCH] made all components common --- .../views/livewire/ticket-create.blade.php | 12 +- .../views/partials/page-header.blade.php | 12 +- resources/css/app.css | 143 +++++++++++------- resources/js/app.js | 23 +++ .../views/components/wms/page-hero.blade.php | 66 ++++---- 5 files changed, 162 insertions(+), 94 deletions(-) diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php index 234cc61d..efb152a8 100644 --- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php +++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php @@ -80,7 +80,7 @@
- @@ -126,7 +126,7 @@
- @@ -171,7 +171,7 @@
- diff --git a/Modules/Helpdesk/Resources/views/partials/page-header.blade.php b/Modules/Helpdesk/Resources/views/partials/page-header.blade.php index 2c9d35c3..b9a31634 100644 --- a/Modules/Helpdesk/Resources/views/partials/page-header.blade.php +++ b/Modules/Helpdesk/Resources/views/partials/page-header.blade.php @@ -1,24 +1,24 @@ -
-
+
+
-

+

{{ $eyebrow ?? 'Helpdesk' }}

-

+

{{ $title ?? 'Helpdesk' }}

@if (!empty($subtitle)) -

+

{{ $subtitle }}

@endif
@isset($actions) -
+
{{ $actions }}
@endisset diff --git a/resources/css/app.css b/resources/css/app.css index 53bff57f..6b2790cf 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -413,18 +413,29 @@ select:focus[data-flux-control] { } .wms-page-hero { + overflow: hidden; + margin-bottom: 1.5rem; + border-radius: 1.5rem; + border: 1px solid rgb(228 228 231); + background: rgb(255 255 255); + box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.08); + } + + .dark .wms-page-hero { + border-color: rgb(63 63 70); + background: rgb(24 24 27); + } + + .wms-page-hero-inner { + padding: 1.75rem 1.5rem; + background: linear-gradient(135deg, rgb(2 6 23), rgb(15 23 42) 52%, rgb(23 37 84)); + color: rgb(255 255 255); + } + + .wms-page-hero-row { display: flex; - align-items: center; - justify-content: space-between; - gap: 1.25rem; - margin-bottom: 1.25rem; - border-radius: 1rem; - padding: 1.45rem 1.75rem; - background: - radial-gradient(circle at 95% 85%, rgb(8 145 178 / 0.62), transparent 36%), - linear-gradient(135deg, rgb(4 8 24), rgb(10 18 42) 54%, rgb(7 44 58)); - color: white; - box-shadow: 0 24px 60px rgb(0 0 0 / 0.30); + flex-direction: column; + gap: 1rem; } .wms-page-hero-copy { @@ -433,70 +444,96 @@ select:focus[data-flux-control] { } .wms-page-hero-kicker { - margin-bottom: 0.55rem; - color: rgb(103 232 249); - font-size: 0.72rem; - font-weight: 850; - letter-spacing: 0.32em; + margin: 0; + color: rgb(191 219 254); + font-size: 0.75rem; + font-weight: 650; + letter-spacing: 0.28em; + line-height: 1rem; + text-transform: uppercase; } .wms-page-hero-title { - margin: 0; - font-size: clamp(1.9rem, 3vw, 2.75rem); - font-weight: 850; - line-height: 1.05; - letter-spacing: -0.04em; + margin: 0.5rem 0 0; + color: rgb(255 255 255); + font-size: 1.875rem; + font-weight: 650; + line-height: 2.25rem; + letter-spacing: -0.025em; } .wms-page-hero-description { - max-width: 44rem; - margin-top: 0.65rem; - color: rgb(203 213 225); - font-size: clamp(0.9rem, 1.15vw, 1.05rem); - line-height: 1.45; + max-width: 48rem; + margin: 0.5rem 0 0; + color: rgb(219 234 254 / 0.90); + font-size: 0.875rem; + line-height: 1.35rem; } .wms-page-hero-actions { display: flex; - align-items: stretch; - gap: 0.75rem; - flex: 0 0 auto; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; } .wms-page-hero-stat { display: grid; - min-width: 10.5rem; - gap: 0.6rem; - border-radius: 0.9rem; - background: rgb(51 65 85 / 0.72); - padding: 0.9rem 1rem; - color: rgb(203 213 225); - backdrop-filter: blur(10px); + min-width: 8.5rem; + gap: 0.25rem; + border-radius: 0.85rem; + border: 1px solid rgb(255 255 255 / 0.18); + background: rgb(255 255 255 / 0.10); + padding: 0.7rem 0.85rem; + color: rgb(219 234 254 / 0.90); + box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); + } + + .wms-page-hero-stat span { + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; } .wms-page-hero-stat strong { display: flex; align-items: center; - gap: 0.75rem; + gap: 0.55rem; color: white; - font-size: 1.35rem; - font-weight: 850; + font-size: 1.25rem; + font-weight: 800; line-height: 1; } .wms-page-hero-stat strong i { - color: rgb(74 222 128); + color: rgb(134 239 172); } .wms-page-hero-icon-card { - min-width: 5.75rem; + min-width: 3.25rem; + width: 3.25rem; + height: 3.25rem; place-items: center; + padding: 0; text-align: center; } .wms-page-hero-icon-card strong { justify-content: center; - font-size: 1.85rem; + font-size: 1.25rem; + } + + @media (min-width: 1024px) { + .wms-page-hero-row { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + .wms-page-hero-actions { + justify-content: flex-end; + } } .wms-hero-mobile-menu { @@ -737,12 +774,13 @@ select:focus[data-flux-control] { } .wms-page-hero { - align-items: flex-start; - flex-direction: column; - gap: 1rem; - margin-bottom: 0.85rem; - border-radius: 0.9rem; - padding: 1rem; + max-width: 100%; + margin-bottom: 1rem; + border-radius: 1rem; + } + + .wms-page-hero-inner { + padding: 1.25rem; } .wms-page-hero-actions { @@ -751,13 +789,8 @@ select:focus[data-flux-control] { } .wms-page-hero-stat { - min-width: min(12rem, 100%); - flex: 1 1 12rem; - padding: 0.8rem; - } - - .wms-page-hero-stat strong { - font-size: 1.2rem; + min-width: min(10rem, 100%); + flex: 1 1 10rem; } .wms-hero-mobile-menu { diff --git a/resources/js/app.js b/resources/js/app.js index 2a77cd04..804a5b7b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -136,6 +136,27 @@ function renderWmsCharts() { }); } + +function livewireComponentFor(element) { + const componentRoot = element.closest('[wire\:id]'); + + if (!componentRoot || !window.Livewire) { + return null; + } + + return window.Livewire.find(componentRoot.getAttribute('wire:id')); +} + +function setLivewireProperty(element, model, value) { + const component = livewireComponentFor(element); + + if (!component || !model) { + return; + } + + component.set(model, value === '' ? null : value); +} + /** * Initialise Select2 controls. * @@ -168,6 +189,8 @@ function initialiseSelect2() { $select.off('change.select2-livewire'); $select.on('change.select2-livewire', function () { + setLivewireProperty(this, this.dataset.wireModel, $select.val()); + this.dispatchEvent( new Event('change', { bubbles: true, diff --git a/resources/views/components/wms/page-hero.blade.php b/resources/views/components/wms/page-hero.blade.php index 1ff5daac..fd15c5fb 100644 --- a/resources/views/components/wms/page-hero.blade.php +++ b/resources/views/components/wms/page-hero.blade.php @@ -2,40 +2,52 @@ 'eyebrow' => 'MPBA WMS', 'title', 'description' => null, + 'subtitle' => null, 'icon' => null, 'stats' => [], ]) +@php + $heroDescription = $description ?? $subtitle ?? null; +@endphp +
merge(['class' => 'wms-page-hero']) }}> -
-

{{ $eyebrow }}

-

{{ $title }}

- @if ($description) -

{{ $description }}

- @endif -
+
+
+
+

{{ $eyebrow }}

+

{{ $title }}

-
- @foreach ($stats as $stat) -
- {{ $stat['label'] ?? '' }} - - @if (!empty($stat['icon'])) - + @if ($heroDescription) +

{{ $heroDescription }}

+ @endif +
+ + @if (count($stats) > 0 || $icon || $slot->isNotEmpty()) +
+ @foreach ($stats as $stat) +
+ {{ $stat['label'] ?? '' }} + + @if (!empty($stat['icon'])) + + @endif + {{ $stat['value'] ?? '' }} + +
+ @endforeach + + @if ($icon && count($stats) === 0 && $slot->isEmpty()) + @endif - {{ $stat['value'] ?? '' }} - - - @endforeach - @if ($icon && count($stats) === 0) - - @endif - - @if ($slot->isNotEmpty()) - {{ $slot }} - @endif + @if ($slot->isNotEmpty()) + {{ $slot }} + @endif +
+ @endif +