added jquery and also fixed fontawsome

This commit is contained in:
Mark Gregory
2026-06-15 15:33:54 +01:00
parent 58e5f2e203
commit 0b2d7225cc
150 changed files with 8507 additions and 168 deletions
+1
View File
@@ -1,3 +1,4 @@
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@import 'flatpickr/dist/flatpickr.css';
@@ -24,7 +24,7 @@
})();
</script>
<body class="min-h-screen bg-white text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
<body class="min-h-screen bg-white font-sans text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
<style>
:root {
--wms-sidebar-width: 288px;
@@ -699,137 +699,6 @@
</div>
</div>
<div
id="wms-toast-stack"
class="fixed right-4 top-4 z-[9999] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3"
aria-live="polite"
aria-atomic="true"
></div>
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
window.jQuery = window.jQuery || window.$;
window.$ = window.$ || window.jQuery;
</script>
<script>
window.wmsToast = function (options) {
const stack = document.getElementById('wms-toast-stack');
if (!stack) {
return;
}
const config = {
type: options.type || 'info',
title: options.title || '',
message: options.message || '',
timeout: Number(options.timeout || 4500),
};
const palette = {
success: 'border-emerald-400/40 bg-emerald-950/95 text-emerald-50',
error: 'border-red-400/40 bg-red-950/95 text-red-50',
warning: 'border-amber-400/40 bg-amber-950/95 text-amber-50',
info: 'border-blue-400/40 bg-blue-950/95 text-blue-50',
};
const icon = {
success: 'fa-circle-check',
error: 'fa-circle-xmark',
warning: 'fa-triangle-exclamation',
info: 'fa-circle-info',
};
const toast = document.createElement('div');
toast.className = [
'wms-toast pointer-events-auto rounded-2xl border px-4 py-3 shadow-2xl backdrop-blur',
'transition duration-200 ease-out translate-y-0 opacity-100',
palette[config.type] || palette.info,
].join(' ');
toast.innerHTML = `
<div class="flex items-start gap-3">
<i class="fa-solid ${icon[config.type] || icon.info} mt-0.5 text-lg" aria-hidden="true"></i>
<div class="min-w-0 flex-1">
${config.title ? `<div class="text-sm font-bold">${config.title}</div>` : ''}
<div class="text-sm leading-5">${config.message}</div>
</div>
<button type="button" class="ml-2 text-white/70 hover:text-white" aria-label="Close notification">
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
</button>
</div>
`;
const close = function () {
toast.classList.add('translate-y-[-0.35rem]', 'opacity-0');
window.setTimeout(function () {
toast.remove();
}, 200);
};
toast.querySelector('button').addEventListener('click', close);
stack.appendChild(toast);
if (config.timeout > 0) {
window.setTimeout(close, config.timeout);
}
};
window.addEventListener('wms:toast', function (event) {
window.wmsToast(event.detail || {});
});
function showSessionToasts() {
@if(session('success'))
window.wmsToast({
type: 'success',
title: @json(__('Success')),
message: @json(session('success')),
});
@endif
@if(session('error'))
window.wmsToast({
type: 'error',
title: @json(__('Error')),
message: @json(session('error')),
});
@endif
@if(session('warning'))
window.wmsToast({
type: 'warning',
title: @json(__('Warning')),
message: @json(session('warning')),
});
@endif
@if(session('info'))
window.wmsToast({
type: 'info',
title: @json(__('Information')),
message: @json(session('info')),
});
@endif
}
document.addEventListener('DOMContentLoaded', showSessionToasts);
document.addEventListener('livewire:navigated', showSessionToasts);
</script>
@fluxScripts
<script>
+16 -18
View File
@@ -24,7 +24,7 @@
})();
</script>
<body class="min-h-screen bg-white text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
<body class="min-h-screen bg-white font-sans text-zinc-950 antialiased dark:bg-zinc-950 dark:text-zinc-100">
<style>
:root {
--wms-sidebar-width: 288px;
@@ -695,24 +695,11 @@
<div
id="wms-toast-stack"
class="fixed right-4 top-4 z-[9999] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3"
class="fixed right-4 top-4 z-[9999] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3 font-sans"
aria-live="polite"
aria-atomic="true"
></div>
@persist('toast')
<flux:toast.group>
<flux:toast />
</flux:toast.group>
@endpersist
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
window.jQuery = window.jQuery || window.$;
window.$ = window.$ || window.jQuery;
</script>
<script>
window.wmsToast = function (options) {
const stack = document.getElementById('wms-toast-stack');
@@ -745,7 +732,7 @@
const toast = document.createElement('div');
toast.className = [
'wms-toast pointer-events-auto rounded-2xl border px-4 py-3 shadow-2xl backdrop-blur',
'wms-toast pointer-events-auto select-none rounded-2xl border px-4 py-3 font-sans shadow-2xl backdrop-blur',
'transition duration-200 ease-out translate-y-0 opacity-100',
palette[config.type] || palette.info,
].join(' ');
@@ -820,8 +807,19 @@
@endif
}
document.addEventListener('DOMContentLoaded', showSessionToasts);
document.addEventListener('livewire:navigated', showSessionToasts);
let wmsSessionToastsShown = false;
function showSessionToastsOnce() {
if (wmsSessionToastsShown) {
return;
}
wmsSessionToastsShown = true;
showSessionToasts();
}
document.addEventListener('DOMContentLoaded', showSessionToastsOnce);
document.addEventListener('livewire:navigated', showSessionToastsOnce);
</script>
@fluxScripts