Fixed scroll snapping for 2nd+ level items using tabs

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.b70c6ac3.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.b70c6ac3.min.js.map",
-  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
-  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.1e07d700.min.css",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.f5f04e6f.min.css"
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.js.map",
+  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.js",
+  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.js.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.css",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.css"
 }

material/base.html

@@ -43,9 +43,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1e07d700.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f5f04e6f.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -195,7 +195,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.b70c6ac3.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",
@@ -218,7 +218,7 @@
         app = initialize({
           base: "{{ base_url }}",
           worker: {
-            search: "{{ 'assets/javascripts/worker/search.926ffd9e.min.js' | url }}"
+            search: "{{ 'assets/javascripts/worker/search.js' | url }}"
           },
           feature: {
             instant: {{ "true" if feature and feature.instant else "false" }}

src/assets/javascripts/components/_/index.ts

@@ -149,6 +149,12 @@ export function setupComponents(
  *
  * @return Element observable
  */
+export function useComponent<T extends HTMLInputElement>(
+  name: "search-query"
+): Observable<T>
+export function useComponent<T extends HTMLElement>(
+  name: Component
+): Observable<T>
 export function useComponent<T extends HTMLElement>(
   name: Component
 ): Observable<T> {

src/assets/javascripts/index.ts

@@ -181,7 +181,7 @@ export function initialize(config: unknown) {
   /* ----------------------------------------------------------------------- */
 
   /* Mount search query */
-  const query$ = useComponent<HTMLInputElement>("search-query")
+  const query$ = useComponent("search-query")
     .pipe(
       mountSearchQuery(worker),
       shareReplay(1) // TODO: this must be put onto EVERY component!

src/assets/javascripts/integrations/keyboard/index.ts

@@ -173,10 +173,11 @@ export function setupKeyboard(): Observable<Keyboard> {
       .subscribe(([key, query]) => {
         switch (key.type) {
 
-          /* Open search */
+          /* Open search and select query */
           case "f":
           case "s":
             setElementFocus(query)
+            query.select()
             key.claim()
             break
 

src/assets/stylesheets/layout/_nav.scss

@@ -208,7 +208,7 @@
           scroll-snap-type: y mandatory;
 
           // Remove border for first list item
-          & > .md-nav__item:first-child {
+          > .md-nav__item:first-child {
             border-top: 0;
           }
         }

src/assets/stylesheets/layout/_source.scss

@@ -64,6 +64,8 @@
   font-size: px2rem(13px);
   line-height: 1.2;
   white-space: nowrap;
+  // Hack: reduce jitter
+  backface-visibility: hidden;
 
   // Adjust for right-to-left languages
   [dir="rtl"] & {

src/assets/stylesheets/layout/_tabs.scss

@@ -120,12 +120,9 @@
   // [screen +]: Adjust main navigation styles
   @include break-from-device(screen) {
 
-    // Hide 1st level nested items, as they are listed in the tabs by setting
-    // font-size to zero, as we need to preserve bottom padding
+    // Hide 1st level nested items, as they are listed in the tabs
     ~ .md-main .md-nav--primary > .md-nav__list > .md-nav__item--nested {
-      max-height: 0;
-      font-size: 0;
-      visibility: hidden;
+      display: none;
     }
 
     // We're on the 2nd+ level
@@ -137,54 +134,44 @@
         // Show title and remove spacing
         .md-nav__title {
           display: block;
-          padding: 0;
+          padding: 0 px2rem(12px);
           pointer-events: none;
-        }
+          scroll-snap-align: start;
 
-        // Hide site title
-        .md-nav__title[for="__drawer"] {
-          display: none;
-        }
-
-        // Show 1st level navigation always expanded
-        .no-js & > .md-nav {
-          display: block;
+          // Hide site title
+          &[for="__drawer"] {
+            display: none;
+          }
         }
 
         // Hide 1st level normal items
-        & > .md-nav__list > .md-nav__item {
-          font-size: 0;
-          visibility: hidden;
+        > .md-nav__list > .md-nav__item {
+          display: none;
 
-          // Reset font-size for nested items and induce margin collapse
+          // Hide nested items
           &--nested {
             display: none;
-            max-height: none;
-            font-size: px2rem(14px);
-            overflow: auto;
-            visibility: visible;
+          }
+
+          // Show 1st level active nested items
+          &--active {
+            display: block;
+            padding: 0;
 
             // Hide nested links
             > .md-nav__link {
               display: none;
             }
           }
-
-          // Show 1st level active nested items
-          &--active {
-            display: block;
-          }
         }
       }
 
       // Always expand nested navigation on 2nd level
       .md-nav[data-md-level="1"] {
-        max-height: initial;
-        overflow: visible;
 
         // Remove spacing on 2nd level items
         > .md-nav__list > .md-nav__item {
-          padding: 0;
+          padding: 0 px2rem(12px);
         }
 
         // Hide titles from 2nd level on