added jquery and also fixed fontawsome
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user