From 3dd055c66f3fc6b905aa4319407c56c443cd79e1 Mon Sep 17 00:00:00 2001 From: Adam Weston Date: Sun, 18 Sep 2022 17:05:14 -0400 Subject: [PATCH] Fix: overlay issues with notifications --- resources/css/plugin.css | 35 +++++++++-------------- resources/dist/filament-sticky-header.css | 2 +- resources/dist/filament-sticky-header.js | 2 +- resources/js/plugin.js | 14 +++++---- 4 files changed, 25 insertions(+), 28 deletions(-) diff --git a/resources/css/plugin.css b/resources/css/plugin.css index 2d289e0..3649331 100644 --- a/resources/css/plugin.css +++ b/resources/css/plugin.css @@ -1,31 +1,24 @@ @tailwind utilities; -.filament-main-topbar::before { - @apply opacity-0; - content: ""; - z-index: 5; -} -.is-sticky .filament-main-topbar::before { - @apply opacity-100 h-16 block absolute inset-0 backdrop-blur-md transition-all bg-white/75 border-b border-gray-200 dark:bg-gray-900/75 dark:border-gray-700; +@screen lg { + .filament-sidebar { + z-index: 2 !important; + } } .is-sticky .filament-header { - @apply transition-all z-10 min-h-[4rem] py-0 flex items-center space-y-0 sticky top-0; + @apply sticky inset-x-0 md:items-center py-3 md:-inset-x-6; + z-index: 1; } -.is-sticky .filament-header .filament-header-heading { - @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden; +.is-sticky .filament-header:before { + @apply backdrop-blur-md bg-white/95 dark:bg-gray-900/95 border-b border-gray-200 dark:border-gray-700 absolute block top-0 bottom-0; + content: ""; + z-index: -1; + left: -1000px; + right: -1000px; } -[stuck] .filament-header { - margin-inline: -1rem; - padding-inline: theme("spacing.4"); - padding-block: theme("spacing.3"); - z-index: 20; - min-height: 4rem; - align-items: center; - background-color: theme(colors.white / 75%); - border-color: theme("colors.gray.200"); - border-bottom: solid 1px; - backdrop-filter: blur(12px); +.is-sticky .filament-header .filament-header-heading { + @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden leading-none; } \ No newline at end of file diff --git a/resources/dist/filament-sticky-header.css b/resources/dist/filament-sticky-header.css index 4030b21..8ee862f 100644 --- a/resources/dist/filament-sticky-header.css +++ b/resources/dist/filament-sticky-header.css @@ -1 +1 @@ -.filament-main-topbar:before{opacity:0;content:"";z-index:5}.is-sticky .filament-main-topbar:before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;height:4rem;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));background-color:#ffffffbf;opacity:1;--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.dark .is-sticky .filament-main-topbar:before{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity));background-color:#111827bf}.is-sticky .filament-header{position:-webkit-sticky;position:sticky;top:0;z-index:10;display:flex;min-height:4rem;align-items:center}.is-sticky .filament-header>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.is-sticky .filament-header{padding-top:0;padding-bottom:0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.is-sticky .filament-header .filament-header-heading{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.25rem;line-height:1.75rem}[stuck] .filament-header{margin-inline:-1rem;padding-inline:1rem;padding-block:.75rem;z-index:20;min-height:4rem;align-items:center;background-color:#ffffffbf;border-color:#e5e7eb;border-bottom:1px solid;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} \ No newline at end of file +@media (min-width:1024px){.filament-sidebar{z-index:2!important}}.is-sticky .filament-header{position:-webkit-sticky;position:sticky;left:0;right:0;padding-top:.75rem;padding-bottom:.75rem}@media (min-width:768px){.is-sticky .filament-header{left:-1.5rem;right:-1.5rem;align-items:center}}.is-sticky .filament-header{z-index:1}.is-sticky .filament-header:before{position:absolute;top:0;bottom:0;display:block;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity));background-color:#fffffff2;--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.dark .is-sticky .filament-header:before{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity));background-color:#111827f2}.is-sticky .filament-header:before{content:"";z-index:-1;left:-1000px;right:-1000px}.is-sticky .filament-header .filament-header-heading{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.25rem;line-height:1.75rem;line-height:1} \ No newline at end of file diff --git a/resources/dist/filament-sticky-header.js b/resources/dist/filament-sticky-header.js index df4391b..7ddffbe 100644 --- a/resources/dist/filament-sticky-header.js +++ b/resources/dist/filament-sticky-header.js @@ -1 +1 @@ -(()=>{var i=document.querySelector(".filament-main-topbar"),t=document.querySelector(".filament-main");i&&t&&window.addEventListener("load",function(){let e=document.createElement("div");e.classList.add("filament-sticky-trigger"),i.after(e),new IntersectionObserver(([n])=>{if(n.isIntersecting){t.classList.remove("is-sticky");return}t.classList.add("is-sticky")},{threshold:[0]}).observe(e)});})(); +(()=>{var n=document.querySelector(".filament-main-topbar"),e=document.querySelector(".filament-main-content"),r=document.querySelector(".filament-header");n&&e&&r&&window.addEventListener("load",function(){let t=document.createElement("div");t.classList.add("filament-sticky-trigger"),e.prepend(t),new IntersectionObserver(([i])=>{if(i.isIntersecting){e.classList.remove("is-sticky");return}r.style.top=n.offsetHeight+"px",r.setAttribute("wire:ignore",!0),e.classList.add("is-sticky")},{rootMargin:`-${n.offsetHeight}px`,threshold:[0]}).observe(t)});})(); diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 4ebc82c..e1951cc 100644 --- a/resources/js/plugin.js +++ b/resources/js/plugin.js @@ -1,22 +1,26 @@ const filamentTopbar = document.querySelector(".filament-main-topbar"); -const filamentMain = document.querySelector(".filament-main"); +const filamentMainContent = document.querySelector(".filament-main-content"); +const filamentHeader = document.querySelector(".filament-header"); -if (filamentTopbar && filamentMain) { +if (filamentTopbar && filamentMainContent && filamentHeader) { window.addEventListener("load", function () { const trigger = document.createElement("div"); trigger.classList.add("filament-sticky-trigger"); - filamentTopbar.after(trigger); + filamentMainContent.prepend(trigger); const observer = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { - filamentMain.classList.remove("is-sticky"); + filamentMainContent.classList.remove("is-sticky"); return; } - filamentMain.classList.add("is-sticky"); + filamentHeader.style.top = filamentTopbar.offsetHeight + "px"; + filamentHeader.setAttribute("wire:ignore", true); + filamentMainContent.classList.add("is-sticky"); }, { + rootMargin: `-${filamentTopbar.offsetHeight}px`, threshold: [0], } );