Replaced hidden classes with hidden attributes

squidfunk · Jun 5, 2022 · ce0484e · ce0484e
1 parent f1cfe4c
commit ce0484e
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 21 deletions.
diff --git a/...assets/javascripts/bundle.f9fdf24d.min.js → ...assets/javascripts/bundle.f758a944.min.js b/...assets/javascripts/bundle.f9fdf24d.min.js → ...assets/javascripts/bundle.f758a944.min.js
diff --git a/...ts/javascripts/bundle.f9fdf24d.min.js.map → ...ts/javascripts/bundle.f758a944.min.js.map b/...ts/javascripts/bundle.f9fdf24d.min.js.map → ...ts/javascripts/bundle.f758a944.min.js.map
diff --git a/material/assets/stylesheets/main.1e7fa3a9.min.css b/material/assets/stylesheets/main.1e7fa3a9.min.css
diff --git a/material/assets/stylesheets/main.1e7fa3a9.min.css.map b/material/assets/stylesheets/main.1e7fa3a9.min.css.map
diff --git a/material/assets/stylesheets/main.ed05e878.min.css b/material/assets/stylesheets/main.ed05e878.min.css
diff --git a/material/assets/stylesheets/main.ed05e878.min.css.map b/material/assets/stylesheets/main.ed05e878.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ed05e878.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1e7fa3a9.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">
@@ -216,7 +216,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.f9fdf24d.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f758a944.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

diff --git a/src/assets/javascripts/components/header/_/index.ts b/src/assets/javascripts/components/header/_/index.ts
@@ -182,8 +182,8 @@ export function mountHeader(
         combineLatestWith(header$)
       )
         .subscribe(([{ active }, { hidden }]) => {
-          el.classList.toggle("md-header--hidden", hidden)
           el.classList.toggle("md-header--shadow", active && !hidden)
+          el.hidden = hidden
         })
 
     /* Link to main area */

diff --git a/src/assets/javascripts/components/tabs/index.ts b/src/assets/javascripts/components/tabs/index.ts
@@ -120,12 +120,12 @@ export function mountTabs(
 
       /* Handle emission */
       next({ hidden }) {
-        el.classList.toggle("md-tabs--hidden", hidden)
+        el.hidden = hidden
       },
 
       /* Handle complete */
       complete() {
-        el.classList.remove("md-tabs--hidden")
+        el.hidden = false
       }
     })
 

diff --git a/src/assets/stylesheets/main/layout/_header.scss b/src/assets/stylesheets/main/layout/_header.scss
@@ -31,6 +31,7 @@
   top: 0;
   inset-inline: 0;
   z-index: 4;
+  display: block;
   color: var(--md-primary-bg-color);
   background-color: var(--md-primary-fg-color);
   // Hack: reduce jitter by adding a transparent box shadow of the same size
@@ -44,6 +45,14 @@
     display: none;
   }
 
+  // Header is hidden
+  &[hidden] {
+    transform: translateY(-100%);
+    transition:
+      transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
+      box-shadow 250ms;
+  }
+
   // Header in shadow state, i.e. shadow is visible
   &--shadow {
     box-shadow:
@@ -54,14 +63,6 @@
       box-shadow 250ms;
   }
 
-  // Header in hidden state, i.e. moved out of sight
-  &--hidden {
-    transform: translateY(-100%);
-    transition:
-      transform  250ms cubic-bezier(0.8, 0, 0.6, 1),
-      box-shadow 250ms;
-  }
-
   // Header wrapper
   &__inner {
     display: flex;

diff --git a/src/assets/stylesheets/main/layout/_tabs.scss b/src/assets/stylesheets/main/layout/_tabs.scss
@@ -29,6 +29,7 @@
   // Must be higher than the z-index of the back-to-top button, or the button
   // will overlay the navigation tabs bar when scrolling up fast.
   z-index: 3;
+  display: block;
   width: 100%;
   overflow: auto;
   color: var(--md-primary-bg-color);
@@ -46,7 +47,7 @@
   }
 
   // Navigation tabs are hidden
-  &--hidden {
+  &[hidden] {
     pointer-events: none;
   }
 
@@ -98,7 +99,7 @@
 
     // Hide tabs upon scrolling - disable transition to minimizes repaints
     // while scrolling down, while scrolling up seems to be okay
-    .md-tabs.md-tabs--hidden & {
+    .md-tabs[hidden] & {
       transform: translateY(50%);
       opacity: 0;
       transition: