Merge pull request #802 from openSUSE/fix-layout-blur

[web] Reintroduce blurring when sidebar is open
agama-project · Oct 20, 2023 · fa7037f · fa7037f
2 parents ccc3c8e + 18f0564
commit fa7037f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Thu Oct 19 22:07:11 UTC 2023 - David Diaz <[email protected]>
+
+- UI: fix CSS rule for applying grayscale and blur CSS filters to
+  main wrapper when the sidebar is open (gh#openSUSE/agama#802).
+
 -------------------------------------------------------------------
 Tue Oct 17 10:59:37 UTC 2023 - Imobach González Sosa <[email protected]>
 

diff --git a/web/src/assets/styles/composition.scss b/web/src/assets/styles/composition.scss
@@ -29,6 +29,8 @@
 }
 
 body > div[inert],
-body > div[aria-hidden="true"] {
+body > div[aria-hidden="true"],
+div#agama-main-wrapper[inert],
+div#agama-main-wrapper[aria-hidden="true"] {
   filter: grayscale(1) blur(2px);
 }
diff --git a/web/src/components/layout/Layout.jsx b/web/src/components/layout/Layout.jsx
@@ -67,7 +67,7 @@ function Layout({ children }) {
   return (
     <>
       <Sidebar.Target as="div" />
-      <div className="wrapper shadow">
+      <div id="agama-main-wrapper" className="wrapper shadow">
         <header className="split justify-between bottom-shadow">
           <h1 className="split">
             <HeaderIcon.Target as="span" />