Skip to content

Commit

Permalink
Add table of contents in the sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
scheb committed Mar 10, 2024
1 parent bce86b2 commit 2235f96
Show file tree
Hide file tree
Showing 23 changed files with 856 additions and 675 deletions.
16 changes: 6 additions & 10 deletions web_app/static/scss/content.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand Down
9 changes: 9 additions & 0 deletions web_app/static/scss/navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
52 changes: 39 additions & 13 deletions web_app/static/scss/sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
11 changes: 10 additions & 1 deletion web_app/static/ts/application.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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
})
}
23 changes: 10 additions & 13 deletions web_app/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand All @@ -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 %}
Expand All @@ -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>
Expand All @@ -74,8 +73,6 @@

<div class="col mb-3"></div>



<div class="col mb-3">
<h5>Beer Brewing</h5>
<ul class="nav flex-column">
Expand Down
18 changes: 16 additions & 2 deletions web_app/templates/fermentable/category.html
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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 %}
Expand Down
Loading

0 comments on commit 2235f96

Please sign in to comment.