From 4499386e4b3f94e1c70b006e30270d117f816061 Mon Sep 17 00:00:00 2001 From: awcodes Date: Tue, 26 Jul 2022 14:13:50 -0400 Subject: [PATCH] modifiy scripts and styles for better transitioning --- resources/css/plugin.css | 84 ++++++++++++++--------- resources/dist/filament-sticky-header.css | 2 +- resources/dist/filament-sticky-header.js | 2 +- resources/js/plugin.js | 40 +++++------ 4 files changed, 74 insertions(+), 54 deletions(-) diff --git a/resources/css/plugin.css b/resources/css/plugin.css index 8ecca66..44e765b 100644 --- a/resources/css/plugin.css +++ b/resources/css/plugin.css @@ -4,6 +4,10 @@ overflow-x: clip !important; } +.filament-sidebar { + z-index: 39 !important; +} + .filament-header { position: -webkit-sticky; position: sticky; @@ -14,27 +18,13 @@ margin-inline: -1rem; padding-inline: theme("spacing.4"); padding-block: theme("spacing.3"); - background-color: theme(colors.white / 75%); - z-index: 40; - backdrop-filter: blur(12px); + z-index: 39; min-height: 4rem; - border-bottom: solid 1px; - border-color: theme("colors.gray.200"); - transition: all 0.25s ease-out; align-items: center; -} - -@screen md { - [stuck] .filament-header { - margin-inline: -2rem; - padding-inline: theme("spacing.6"); - } -} - -@screen lg { - [stuck] .filament-header { - padding-inline: theme("spacing.8"); - } + background-color: theme(colors.white / 75%); + border-color: theme("colors.gray.200"); + border-bottom: solid 1px; + backdrop-filter: blur(12px); } [stuck] .filament-header h1 { @@ -44,30 +34,60 @@ white-space: nowrap; } -@screen xl { - .filament-body[stuck]::before { - height: 4rem; - background-color: theme(colors.white / 75%); - border-bottom: solid 1px; - border-color: theme("colors.gray.200"); - backdrop-filter: blur(12px); +.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; - z-index: 0; position: fixed; top: 0; left: 0; right: 0; - transition: all 0.25s ease-out; + z-index: -1; + background-color: transparent; + border-color: transparent; + border-bottom: solid 1px; + backdrop-filter: blur(12px); + transition: opacity 0.125s ease-out; } - .dark .filament-body[stuck]::before { + [stuck] .filament-main::before { + opacity: 1; + z-index: 38; + 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"); } } -.dark [stuck] .filament-header { - background-color: theme(colors.gray.900 / 75%); - border-color: theme("colors.gray.700"); +@screen lg { + [stuck] .filament-header { + margin-inline: -2rem; + padding-inline: theme("spacing.8"); + } } diff --git a/resources/dist/filament-sticky-header.css b/resources/dist/filament-sticky-header.css index 2591126..3c780b6 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;background-color:#ffffffbf;z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-height:4rem;border-bottom:1px solid;border-color:#e5e7eb;transition:all .25s ease-out;align-items:center}@media (min-width:768px){[stuck] .filament-header{margin-inline:-2rem;padding-inline:1.5rem}}@media (min-width:1024px){[stuck] .filament-header{padding-inline:2rem}}[stuck] .filament-header h1{font-size:1.25rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media (min-width:1280px){.filament-body[stuck]:before{height:4rem;background-color:#ffffffbf;border-bottom:1px solid;border-color:#e5e7eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);content:"";display:block;z-index:0;position:fixed;top:0;left:0;right:0;transition:all .25s ease-out}.dark .filament-body[stuck]:before{background-color:#111827bf;border-color:#374151}}.dark [stuck] .filament-header{background-color:#111827bf;border-color:#374151} \ No newline at end of file +.filament-app-layout{overflow-x:clip!important}.filament-sidebar{z-index:39!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:0;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:38;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){[stuck] .filament-header{margin-inline:-2rem;padding-inline:2rem}} \ No newline at end of file diff --git a/resources/dist/filament-sticky-header.js b/resources/dist/filament-sticky-header.js index 5a4ee0e..bd6df59 100644 --- a/resources/dist/filament-sticky-header.js +++ b/resources/dist/filament-sticky-header.js @@ -1 +1 @@ -(()=>{var e=document.querySelector(".filament-main-topbar");e&&window.addEventListener("load",function(){new IntersectionObserver(([t])=>{t.isIntersecting?(document.querySelector(".filament-header").removeAttribute("stuck"),document.querySelector(".filament-body").removeAttribute("stuck")):(document.querySelector(".filament-header").setAttribute("stuck","true"),document.querySelector(".filament-body").setAttribute("stuck","true"))},{threshold:[0]}).observe(e)});})(); +(()=>{var e=document.querySelector(".filament-main-topbar");e&&window.addEventListener("load",function(){new IntersectionObserver(([t])=>{t.isIntersecting?(document.querySelector(".filament-header").removeAttribute("stuck"),document.querySelector(".filament-body").removeAttribute("stuck")):(document.querySelector(".filament-header").setAttribute("stuck","true"),document.querySelector(".filament-body").setAttribute("stuck","true"))},{root:null,rootMargin:`${e.offsetHeight*-1}px`,threshold:[0]}).observe(e)});})(); diff --git a/resources/js/plugin.js b/resources/js/plugin.js index 488ddff..8bd3e36 100644 --- a/resources/js/plugin.js +++ b/resources/js/plugin.js @@ -1,24 +1,24 @@ const el = document.querySelector(".filament-main-topbar"); if (el) { - window.addEventListener('load', function() { - const observer = new IntersectionObserver( - ([e]) => { - if (e.isIntersecting) { - document.querySelector(".filament-header").removeAttribute("stuck"); - document.querySelector(".filament-body").removeAttribute("stuck"); - } else { - document - .querySelector(".filament-header") - .setAttribute("stuck", "true"); - document - .querySelector(".filament-body") - .setAttribute("stuck", "true"); - } - }, - { threshold: [0] } - ); + window.addEventListener("load", function () { + const observer = new IntersectionObserver( + ([e]) => { + if (e.isIntersecting) { + document.querySelector(".filament-header").removeAttribute("stuck"); + document.querySelector(".filament-body").removeAttribute("stuck"); + } else { + document.querySelector(".filament-header").setAttribute("stuck", "true"); + document.querySelector(".filament-body").setAttribute("stuck", "true"); + } + }, + { + root: null, + rootMargin: `${el.offsetHeight * -1}px`, + threshold: [0], + } + ); - observer.observe(el); - }); -} \ No newline at end of file + observer.observe(el); + }); +}