From 0aa9db23a1fdd068ea0c51059624cd453e47f3ae Mon Sep 17 00:00:00 2001 From: Adam Weston Date: Mon, 12 Sep 2022 01:31:01 -0400 Subject: [PATCH] fix to work with new filament sticky top bar --- resources/css/plugin.css | 92 ++++------------------- resources/dist/filament-sticky-header.css | 2 +- resources/dist/filament-sticky-header.js | 2 +- resources/js/plugin.js | 22 +++--- 4 files changed, 28 insertions(+), 90 deletions(-) diff --git a/resources/css/plugin.css b/resources/css/plugin.css index ed2c63e..2d289e0 100644 --- a/resources/css/plugin.css +++ b/resources/css/plugin.css @@ -1,93 +1,31 @@ @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; +} -.filament-app-layout { - overflow-x: clip !important; +.is-sticky .filament-header { + @apply transition-all z-10 min-h-[4rem] py-0 flex items-center space-y-0 sticky top-0; } -.filament-header { - position: -webkit-sticky; - position: sticky; - top: 0rem; +.is-sticky .filament-header .filament-header-heading { + @apply text-xl overflow-ellipsis whitespace-nowrap overflow-hidden; } [stuck] .filament-header { margin-inline: -1rem; padding-inline: theme("spacing.4"); padding-block: theme("spacing.3"); - z-index: 39; + 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); -} - -[stuck] .filament-header h1 { - font-size: theme("fontSize.xl"); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.dark [stuck] .filament-header { - background-color: theme(colors.gray.900 / 75%); - border-color: theme("colors.gray.700"); -} - -@screen md { - [stuck] .filament-header { - margin-inline: -1.5rem; - padding-inline: theme("spacing.6"); - background-color: transparent !important; - border-color: transparent !important; - backdrop-filter: none; - } - - .dark [stuck] .filament-header { - background-color: transparent !important; - border-color: transparent !important; - backdrop-filter: none; - } - - .filament-main::before { - content: ""; - opacity: 0; - height: 4rem; - display: block; - position: fixed; - top: 0; - left: 5.4em; - right: 0; - z-index: -1; - background-color: transparent; - border-color: transparent; - border-bottom: solid 1px; - backdrop-filter: blur(12px); - transition: opacity 0.125s ease-out; - } - - [stuck] .filament-main::before { - opacity: 1; - z-index: 5; - transition: opacity 0.125s ease-out; - background-color: theme(colors.white / 75%); - border-color: theme("colors.gray.200"); - } - - .dark [stuck] .filament-main::before { - background-color: theme(colors.gray.900 / 75%); - border-color: theme("colors.gray.700"); - } -} - -@screen lg { - .filament-main.filament-main-sidebar-open::before { - left: var(--sidebar-width); - } - - [stuck] .filament-header { - margin-inline: -2rem; - padding-inline: theme("spacing.8"); - } -} +} \ No newline at end of file diff --git a/resources/dist/filament-sticky-header.css b/resources/dist/filament-sticky-header.css index e9e76aa..4030b21 100644 --- a/resources/dist/filament-sticky-header.css +++ b/resources/dist/filament-sticky-header.css @@ -1 +1 @@ -.filament-app-layout{overflow-x:clip!important}.filament-header{position:-webkit-sticky;position:sticky;top:0}[stuck] .filament-header{margin-inline:-1rem;padding-inline:1rem;padding-block:.75rem;z-index:39;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)}[stuck] .filament-header h1{font-size:1.25rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.dark [stuck] .filament-header{background-color:#111827bf;border-color:#374151}@media (min-width:768px){[stuck] .filament-header{margin-inline:-1.5rem;padding-inline:1.5rem}.dark [stuck] .filament-header,[stuck] .filament-header{background-color:initial!important;border-color:#0000!important;-webkit-backdrop-filter:none;backdrop-filter:none}.filament-main:before{content:"";opacity:0;height:4rem;display:block;position:fixed;top:0;left:5.4em;right:0;z-index:-1;background-color:initial;border-color:#0000;border-bottom:1px solid;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .125s ease-out}[stuck] .filament-main:before{opacity:1;z-index:5;transition:opacity .125s ease-out;background-color:#ffffffbf;border-color:#e5e7eb}.dark [stuck] .filament-main:before{background-color:#111827bf;border-color:#374151}}@media (min-width:1024px){.filament-main.filament-main-sidebar-open:before{left:var(--sidebar-width)}[stuck] .filament-header{margin-inline:-2rem;padding-inline:2rem}} \ No newline at end of file +.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 diff --git a/resources/dist/filament-sticky-header.js b/resources/dist/filament-sticky-header.js index f7da9ef..df4391b 100644 --- a/resources/dist/filament-sticky-header.js +++ b/resources/dist/filament-sticky-header.js @@ -1 +1 @@ -(()=>{var e=document.querySelector(".filament-main-topbar"),t=document.querySelector(".filament-header"),r=document.querySelector(".filament-body");e&&t&&r&&window.addEventListener("load",function(){new IntersectionObserver(([o])=>{o.isIntersecting?(t.removeAttribute("stuck"),r.removeAttribute("stuck")):(t.setAttribute("stuck","true"),r.setAttribute("stuck","true"))},{root:null,rootMargin:`${e.offsetHeight*-1}px`,threshold:[0]}).observe(e)});})(); +(()=>{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)});})(); diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 3b473f3..4ebc82c 100644 --- a/resources/js/plugin.js +++ b/resources/js/plugin.js @@ -1,26 +1,26 @@ const filamentTopbar = document.querySelector(".filament-main-topbar"); -const filamentHeader = document.querySelector(".filament-header"); -const filamentBody = document.querySelector(".filament-body"); +const filamentMain = document.querySelector(".filament-main"); -if (filamentTopbar && filamentHeader && filamentBody) { +if (filamentTopbar && filamentMain) { window.addEventListener("load", function () { + const trigger = document.createElement("div"); + trigger.classList.add("filament-sticky-trigger"); + filamentTopbar.after(trigger); + const observer = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { - filamentHeader.removeAttribute("stuck"); - filamentBody.removeAttribute("stuck"); - } else { - filamentHeader.setAttribute("stuck", "true"); - filamentBody.setAttribute("stuck", "true"); + filamentMain.classList.remove("is-sticky"); + return; } + + filamentMain.classList.add("is-sticky"); }, { - root: null, - rootMargin: `${filamentTopbar.offsetHeight * -1}px`, threshold: [0], } ); - observer.observe(filamentTopbar); + observer.observe(trigger); }); }