Add table of contents in the sidebar

scheb · Mar 10, 2024 · 2235f96 · 2235f96
1 parent bce86b2
commit 2235f96
Show file tree

Hide file tree

Showing 23 changed files with 856 additions and 675 deletions.
diff --git a/web_app/static/scss/content.scss b/web_app/static/scss/content.scss
@@ -1,11 +1,16 @@
 // Detail pages header
 
 .detail-head {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     h1 {
         margin-bottom: 0.25rem;
     }
+
+    .detail-info,
+    .badge-list {
+        margin-bottom: 0.5rem;
+    }
 }
 
 .detail-alias {
@@ -20,15 +25,6 @@
     }
 }
 
-.detail-summary {
-    margin-bottom: 1rem;
-
-    .detail-info,
-    .badge-list {
-        margin-bottom: 0.5rem;
-    }
-}
-
 dl.detail-info {
     display: flex;
     flex-wrap: wrap;

diff --git a/web_app/static/scss/navigation.scss b/web_app/static/scss/navigation.scss
@@ -184,3 +184,12 @@ footer {
     @include navbar-toggler-icon;
     background-image: url('../img/embed/icon-filter.svg');
 }
+
+// Offset all anchor targets by the height of the sticky header
+.anchor-target[id]::before {
+    content: '';
+    display: block;
+    height: 51px;
+    margin-top: -51px;
+    visibility: hidden;
+}
diff --git a/web_app/static/scss/sidebar.scss b/web_app/static/scss/sidebar.scss
@@ -4,35 +4,61 @@
     bottom: 0;
     left: 0;
     z-index: 100; // Behind the navbar
-    padding: 62px 0 0; // Height of navbar
-    color: $light;
+    padding: 51px 0 0; // Height of navbar
     overflow-y: auto;
+    background: $gray-10;
 
     .sidebar-content {
         margin: 0 1rem;
     }
 
-    a {
-        color: $primary-light;
-    }
-
     .table-of-contents {
-        ul {
+        ul, ol {
+            margin-top: 1rem;
             @include list-unstyled();
-            margin-top: 0.25rem;
-            padding: 0 0.5rem;
 
-            a {
-                text-decoration: none;
-                &:hover {
-                    color: $primary;
+            li {
+                &.section-title {
+                    a {
+                        margin-left: 0;
+                        margin-bottom: 0.25rem;
+                        padding: 0.25rem 0;
+                        border: none;
+                        font-family: var(--bs-font-headline);
+                        font-size: 1.125rem;
+                        font-weight: bold;
+
+                        &.active {
+                            border: none;
+                        }
+                    }
+                }
+
+                a {
+                    display: inline-block;
+                    margin-left: 0.5rem;
+                    padding: 0.25rem 0.5rem;
+                    border-left: 3px solid $gray-100;
+                    color: $gray;
+                    text-decoration: none;
+
+                    &:hover {
+                        color: $primary;
+                    }
+
+                    &.active {
+                        color: $primary;
+                        border-left: 3px solid $primary;
+                    }
                 }
             }
         }
     }
 }
 
 .filtering {
+    padding: 1rem 0;
+
     select {
         padding: 2px 3px 3px 3px;
     }

diff --git a/web_app/static/ts/application.ts b/web_app/static/ts/application.ts
@@ -1,7 +1,7 @@
 import {DetailList} from "./lists"
 import {ChartContainer, RecipesContainer} from "./results"
 import {SearchBox} from "./search"
-import {Collapse, Tab} from "bootstrap"
+import {Collapse, ScrollSpy, Tab} from "bootstrap"
 import {Analyzer} from "./filtering";
 import { registerLicense } from '@syncfusion/ej2-base';
 import {InteractionElement} from "./interaction";
@@ -47,3 +47,12 @@ new Analyzer(() => {
         element.classList.remove('active')
     })
 })
+
+const toc = document.getElementById('toc-navigation');
+if (toc) {
+    new ScrollSpy(document.body, {
+        target: toc,
+        threshold: [0.01, 0.25, 0.5, 0.75, 1],  // Refresh calculations every quarter of a section
+        rootMargin: "-70px 0px -25% 0px",  // Top: Account for sticky header, Bottom: Ignore the bottom 25% of the viewport
+    })
+}
diff --git a/web_app/templates/base.html b/web_app/templates/base.html
@@ -2,7 +2,6 @@
 <html lang="en">
 <head {% meta_namespaces %}>
     {% if meta.title %}{% autoescape off %}{% title_prop meta.title %}{% endautoescape %}{% else %}<title>Beer Analytics &ndash; The analytical beer recipe database</title>{% endif %}
-
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     {% include "meta.html" %}
@@ -22,19 +21,19 @@
 </head>
 <body class="main-body" id="top">
 
-<header class="navbar navbar-dark fixed-top flex-md-nowrap shadow">
+<header class="navbar navbar-dark fixed-top flex-md-nowrap shadow" id="header">
     <nav class="container-fluid navbar-expand p-0">
-        <a class="navbar-brand col-md-3 col-lg-2 d-none d-md-block" href="/"><span class="logo"></span><span class="d-none d-sm-inline ms-1">Beer Analytics</span></a>
+        <a class="navbar-brand col-md-3 col-xl-2 d-none d-md-block" href="/"><span class="logo"></span><span class="d-none d-sm-inline ms-1">Beer Analytics</span></a>
         {% load web_app %}
         {% with request.resolver_match.url_name as url_name %}
         <div id="top-navigation" class="navbar-collapse">
             <ul class="navbar-nav">
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'style' %} active{% endif %}" href="{% url "style_overview" %}"><span class="nav-icon icon-beer"></span><span class="d-none d-sm-inline ms-2">Beer Styles</span></a></li>
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'fermentable' %} active{% endif %}" href="{% url "fermentable_overview" %}"><span class="nav-icon icon-fermentable"></span><span class="d-none d-sm-inline ms-2">Fermentables</span></a></li>
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'hop' %} active{% endif %}" href="{% url "hop_overview" %}"><span class="nav-icon icon-hop"></span><span class="d-none d-sm-inline ms-2">Hops</span></a></li>
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'yeast' %} active{% endif %}" href="{% url "yeast_overview" %}"><span class="nav-icon icon-yeast"></span><span class="d-none d-sm-inline ms-2">Yeasts</span></a></li>
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'trend' %} active{% endif %}" href="{% url "trend_overview" "recent" %}"><span class="nav-icon icon-trend"></span><span class="d-none d-sm-inline ms-2">Trends</span></a></li>
-                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'search' %} active{% endif %}" href="{% url "search" %}"><span class="nav-icon icon-search"></span><span class="d-none d-sm-inline ms-2">Recipes</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'style' %} active{% endif %}" href="{% url "style_overview" %}"><span class="nav-icon icon-beer"></span><span class="d-none d-lg-inline ms-2">Beer Styles</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'fermentable' %} active{% endif %}" href="{% url "fermentable_overview" %}"><span class="nav-icon icon-fermentable"></span><span class="d-none d-lg-inline ms-2">Fermentables</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'hop' %} active{% endif %}" href="{% url "hop_overview" %}"><span class="nav-icon icon-hop"></span><span class="d-none d-lg-inline ms-2">Hops</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'yeast' %} active{% endif %}" href="{% url "yeast_overview" %}"><span class="nav-icon icon-yeast"></span><span class="d-none d-lg-inline ms-2">Yeasts</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'trend' %} active{% endif %}" href="{% url "trend_overview" "recent" %}"><span class="nav-icon icon-trend"></span><span class="d-none d-lg-inline ms-2">Trends</span></a></li>
+                <li class="nav-item"><a class="nav-link{% if url_name|startswith:'search' %} active{% endif %}" href="{% url "search" %}"><span class="nav-icon icon-search"></span><span class="d-none d-lg-inline ms-2">Recipes</span></a></li>
             </ul>
         </div>
         {% endwith %}
@@ -47,15 +46,15 @@
 
 <div class="container-fluid header-margin">
     <div class="row">
-        <aside id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse shadow">
+        <aside id="sidebar" class="col-md-3 col-xl-2 d-md-block sidebar collapse shadow">
             <div class="position-sticky sidebar-content">
                 {% block sidebar %}
                     {% include "filters.html" %}
                 {% endblock %}
             </div>
         </aside>
 
-        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 px-xl-5 pb-4">
+        <main class="col-md-9 col-xl-10 ms-sm-auto px-md-4 px-xl-5 pb-4">
             {% block content %}{% endblock %}
         </main>
     </div>
@@ -74,8 +73,6 @@
 
             <div class="col mb-3"></div>
 
-
-
             <div class="col mb-3">
                 <h5>Beer Brewing</h5>
                 <ul class="nav flex-column">

diff --git a/web_app/templates/fermentable/category.html b/web_app/templates/fermentable/category.html
@@ -1,6 +1,17 @@
 {% extends 'base.html' %}
 {% load web_app %}
 
+{% block sidebar %}{% if types %}
+    <nav class="table-of-contents">
+        <ol id="toc-navigation">
+            <li class="section-title"><a href="#top" data-interaction="Fermentables:Click TOC:$label">{{ category_name }}</a></li>
+            {% for type in types %}
+                <li><a href="#{{ type.id }}" data-interaction="Fermentables:Click TOC:$label">{{ type.name }}</a></li>
+            {% endfor %}
+        </ol>
+    </nav>
+{% else %}{{ block.super }}{% endif %}{% endblock %}
+
 {% block content %}
     <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
@@ -41,8 +52,11 @@ <h1>{{ category_name }} Fermentables</h1>
 
         {% if types %}
             {% for type in types %}
-                <section>
-                    <h3>{{ type.name }}</h3>
+                <section class="anchor-target" id="{{ type.id }}">
+                    <h3>
+                        <a href="#{{ type.id }}" id="{{ type.id }}" class="anchor"><span></span></a>
+                        {{ type.name }}
+                    </h3>
                     {% if type.fermentables %}
                         <ul class="column-list">
                             {% for fermentable in type.fermentables %}