Table of contents sidebar

scheb · Mar 8, 2024 · 13b581e · 13b581e
1 parent 2e554be
commit 13b581e
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 46 deletions.
diff --git a/web_app/static/scss/bootstrap.scss b/web_app/static/scss/bootstrap.scss
@@ -35,6 +35,7 @@ $theme-colors: (
 
 $link-color: shade-color($primary, 16%);
 
+$box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";

diff --git a/web_app/static/scss/navigation.scss b/web_app/static/scss/navigation.scss
@@ -12,6 +12,7 @@
 header {
     &.navbar {
         padding: 0;
+        background-color: $gray-900;
     }
 
     .navbar-brand {
@@ -20,11 +21,11 @@ header {
         align-items: center;
         margin: 0;
         padding: 0.5rem;
-        background-color: $gray-900;
-        box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .25);
+        //background-color: $gray-900;
+        //box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .25);
         font-family: "Titillium Web", var(--bs-font-sans-serif);
         font-size: 1.3rem;
-        border-bottom: 3px solid $primary;
+        //border-bottom: 3px solid $primary;
 
         .logo {
             @include navbar-icon;

diff --git a/web_app/static/scss/sidebar.scss b/web_app/static/scss/sidebar.scss
@@ -6,30 +6,60 @@
     z-index: 100; // Behind the navbar
     padding: 62px 0 0; // Height of navbar
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
-    color: $light;
     overflow-y: auto;
+    background: $gray-10;
 
     .sidebar-content {
         margin: 0 1rem;
     }
 
-    a {
-        color: $primary-light;
-    }
-
     .table-of-contents {
-        ul {
+        ul, ol {
             @include list-unstyled();
             margin-top: 0.25rem;
-            padding: 0 0.5rem;
+
+            li {
+                margin-left: 0.5rem;
+                padding: 0.25rem 0.5rem;
+                border-left: 3px solid $gray-100;
+
+                &.section-title {
+                    margin-left: 0;
+                    margin-bottom: 0.25rem;
+                    padding: 0.25rem 0;
+                    border: none;
+                    font-family: "Titillium Web", var(--bs-font-sans-serif);
+                    font-size: 1.125rem;
+                    font-weight: bold;
+                }
+
+                &.active {
+                    border-left: 3px solid $primary;
+
+                    &.section-title {
+                        border-left: none;
+                    }
+
+                    a {
+                        color: $primary;
+                    }
+                }
+            }
 
             a {
                 text-decoration: none;
+                color: $gray;
+
                 &:hover {
                     color: $primary;
                 }
             }
         }
+
+        //.btn-toggle-nav a:hover,
+        //.btn-toggle-nav a:focus {
+        //    background-color: var(--bs-tertiary-bg);
+        //}
     }
 }
 

diff --git a/web_app/templates/base.html b/web_app/templates/base.html
@@ -20,9 +20,9 @@
     <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
     <script defer src="{% static 'app.js' %}"></script>
 </head>
-<body class="main-body">
+<body class="main-body" id="top">
 
-<header class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap shadow">
+<header class="navbar navbar-dark fixed-top flex-md-nowrap shadow">
     <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>
         {% load web_app %}
@@ -47,15 +47,14 @@
 
 <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">
+        <aside id="sidebar" class="col-md-3 col-lg-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 pb-4">
+        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-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
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "fermentable_overview" %}">Fermentables</a></li>
             <li class="breadcrumb-item active">{{ category_name }} Fermentables</li>

diff --git a/web_app/templates/fermentable/detail.html b/web_app/templates/fermentable/detail.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "fermentable_overview" %}">Fermentables</a></li>
             <li class="breadcrumb-item"><a href="{% url "fermentable_category" fermentable.category %}">{{ fermentable.category_name }} Fermentables</a></li>

diff --git a/web_app/templates/hop/category.html b/web_app/templates/hop/category.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "hop_overview" %}">Hops</a></li>
             <li class="breadcrumb-item active">{{ category_name }} Hops</li>

diff --git a/web_app/templates/hop/detail.html b/web_app/templates/hop/detail.html
@@ -1,8 +1,29 @@
 {% extends 'base.html' %}
 {% load web_app %}
 
+{% block sidebar %}
+    {% if hop.recipes_count %}
+        <nav class="table-of-contents">
+            <ol class="btn-toggle-nav list-unstyled fw-normal pb-1">
+                <li class="section-title"><a href="#top" data-interaction="Hops:Click TOC:$label">{{ hop.name }} Hops</a>
+                <li class="d-lg-none"><a href="#profile" data-interaction="Hops:Click TOC:$label">Profile</a></li>
+                <li><a href="#characteristics" data-interaction="Hops:Click TOC:$label">Characteristics</a>
+                <li><a href="#popularity" data-interaction="Hops:Click TOC:$label">Popularity Over Time</a>
+                <li><a href="#styles-percent-recipes" data-interaction="Hops:Click TOC:$label">Popularity within Beer Styles</a>
+                <li><a href="#styles-number-recipes" data-interaction="Hops:Click TOC:$label">Common Beer Styles</a>
+                <li><a href="#style-amount" data-interaction="Hops:Click TOC:$label">Dosage per Style</a>
+                <li><a href="#usage-amount" data-interaction="Hops:Click TOC:$label">Dosage per Use</a>
+                <li><a href="#hop-pairings" data-interaction="Hops:Click TOC:$label">Hop Pairings</a>
+                <li><a href="#most-used-yeasts" data-interaction="Hops:Click TOC:$label">Most Used Yeasts</a>
+                <li><a href="#trending-yeasts" data-interaction="Hops:Click TOC:$label">Trending Yeasts</a>
+                <li><a href="#recipes" data-interaction="Hops:Click TOC:$label">Brewing Recipes</a>
+            </ol>
+        </nav>
+    {% endif %}
+{% endblock %}
+
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "hop_overview" %}">Hops</a></li>
             <li class="breadcrumb-item"><a href="{% url "hop_category" hop.category %}">{{ hop.category_name }} Hops</a></li>
@@ -13,7 +34,7 @@
     <article>
     <div class="detail-head clearfix">
         <header>
-            <h1>{{ hop.name }} Hops</h1>
+            <h1>{{ hop.name }} Hops <button class="btn btn-sm btn-outline-light">🧪</button></h1>
             {% if hop.alt_names %}{% spaceless %}
                 <p class="detail-alias">
                     Also known as:
@@ -39,26 +60,8 @@ <h1>{{ hop.name }} Hops</h1>
             {% endif %}
         </dl>
 
-        <div class="d-flex flex-column d-lg-block">
-            {% if hop.recipes_count %}
-            <nav class="toc toc-align order-last">
-                <h2 class="toc-headline">Table of Contents</h2>
-                <ol>
-                    <li class="d-lg-none"><a href="#profile" data-interaction="Hops:Click TOC:$label">Profile</a></li>
-                    <li><a href="#characteristics" data-interaction="Hops:Click TOC:$label">Characteristics</a>
-                    <li><a href="#popularity" data-interaction="Hops:Click TOC:$label">Popularity Over Time</a>
-                    <li><a href="#styles-percent-recipes" data-interaction="Hops:Click TOC:$label">Popularity within Beer Styles</a>
-                    <li><a href="#styles-number-recipes" data-interaction="Hops:Click TOC:$label">Common Beer Styles</a>
-                    <li><a href="#style-amount" data-interaction="Hops:Click TOC:$label">Dosage per Style</a>
-                    <li><a href="#usage-amount" data-interaction="Hops:Click TOC:$label">Dosage per Use</a>
-                    <li><a href="#hop-pairings" data-interaction="Hops:Click TOC:$label">Hop Pairings</a>
-                    <li><a href="#most-used-yeasts" data-interaction="Hops:Click TOC:$label">Most Used Yeasts</a>
-                    <li><a href="#trending-yeasts" data-interaction="Hops:Click TOC:$label">Trending Yeasts</a>
-                    <li><a href="#recipes" data-interaction="Hops:Click TOC:$label">Brewing Recipes</a>
-                </ol>
-            </nav>
-            {% endif %}
 
+        <div class="d-flex flex-column d-lg-block">
             {% if hop.accessible_substitutes.count %}{% spaceless %}
                 <figure class="badge-list">
                     <figcaption>Substitutes:</figcaption>

diff --git a/web_app/templates/hop/flavor.html b/web_app/templates/hop/flavor.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "hop_overview" %}">Hops</a></li>
             <li class="breadcrumb-item"><a href="{% url "hop_flavor_overview" %}">Hop Flavors and Aromas</a></li>

diff --git a/web_app/templates/hop/flavor_overview.html b/web_app/templates/hop/flavor_overview.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "hop_overview" %}">Hops</a></li>
             <li class="breadcrumb-item active">Hop Flavors and Aromas</li>

diff --git a/web_app/templates/style/breadcrumb.html b/web_app/templates/style/breadcrumb.html
@@ -1,5 +1,5 @@
 {% load web_app %}
-<nav aria-label="breadcrumb" class="mt-3">
+<nav aria-label="breadcrumb" class="mt-4">
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{% url "style_overview" %}">Beer Styles</a></li>
         {% for parent_style in style.parent_styles reversed %}

diff --git a/web_app/templates/yeast/detail.html b/web_app/templates/yeast/detail.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "yeast_overview" %}">Yeasts and Bacteria</a></li>
             <li class="breadcrumb-item"><a href="{% url "yeast_type" yeast.type %}">{{ yeast.type_name }}{% if yeast.type_is_yeast %} Yeast{% endif %}</a></li>

diff --git a/web_app/templates/yeast/type.html b/web_app/templates/yeast/type.html
@@ -2,7 +2,7 @@
 {% load web_app %}
 
 {% block content %}
-    <nav aria-label="breadcrumb" class="mt-3">
+    <nav aria-label="breadcrumb" class="mt-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% url "yeast_overview" %}">Yeasts and Bacteria</a></li>
             <li class="breadcrumb-item active">{{ type_name }}{% if type_is_yeast %} Yeasts{% endif %}</li>