Fix toc sidebar

This commit is contained in:
object-Object 2023-09-05 20:03:12 -04:00
parent ac3692ae43
commit 8861ef25d5
5 changed files with 42 additions and 27 deletions

View file

@ -7,10 +7,7 @@
</header> </header>
{% endif %} {% endif %}
{# table of contents #} {% include "components/table_of_contents.html.jinja" %}
<nav>
{% include "components/table_of_contents.html.jinja" %}
</nav>
{# actual book content (ie. all the categories) #} {# actual book content (ie. all the categories) #}
<main class="book-body"> <main class="book-body">

View file

@ -8,10 +8,10 @@
{%- endmacro %} {%- endmacro %}
{# link icon in section headers to get a permalink to that section #} {# link icon in section headers to get a permalink to that section #}
{% macro permalink(href) -%} {% macro permalink(href, class_name="") -%}
<a <a
href="#{{ href }}" href="#{{ href }}"
class="permalink small" class="permalink small{{ ' '~class_name if class_name }}"
title="Permalink" title="Permalink"
><i class="bi bi-link-45deg"></i></a> ><i class="bi bi-link-45deg"></i></a>
{%- endmacro %} {%- endmacro %}

View file

@ -1,24 +1,28 @@
{% import "common/macros.html.jinja" as macros -%} {% import "common/macros.html.jinja" as macros -%}
<h2 id="table-of-contents" class="page-header"> {# put the link target outside of toc-container so jump to top still works in sidebar mode #}
Table of Contents<a <div id="table-of-contents"></div>
href="javascript:void(0)" <nav class="toc-container">
class="permalink toggle-link small" <h2 class="page-header">
data-target="toc-category" Table of <span class="nobr">Contents<a
title="Toggle all" href="javascript:void(0)"
><i class="bi bi-list-nested"></i></a>{{ macros.permalink("table-of-contents") }} class="permalink toggle-link small"
</h2> data-target="toc-category"
title="Toggle all"
><i class="bi bi-list-nested"></i></a>{{ macros.permalink("table-of-contents", "toc-permalink") }}</span>
</h2>
{% for category in book.categories.values() if category.entries %} {% for category in book.categories.values() if category.entries %}
<details class="toc-category"> <details class="toc-category">
{# category #} {# category #}
<summary>{{ macros.maybe_spoilered_link(category) }}</summary> <summary>{{ macros.maybe_spoilered_link(category) }}</summary>
{# list of entries in the category #} {# list of entries in the category #}
<ul> <ul>
{% for entry in category.entries %} {% for entry in category.entries %}
<li>{{ macros.maybe_spoilered_link(entry) }}</li> <li>{{ macros.maybe_spoilered_link(entry) }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</details> </details>
{% endfor %} {% endfor %}
</nav>

View file

@ -105,6 +105,10 @@ canvas.spell-viz {
margin: 4px 0; margin: 4px 0;
} }
.nobr {
white-space: nowrap;
}
@media (min-width: 40rem) { @media (min-width: 40rem) {
.book-body { .book-body {
width: 70%; width: 70%;
@ -113,7 +117,7 @@ canvas.spell-viz {
float: left; float: left;
} }
#table-of-contents { .toc-container {
position: sticky; position: sticky;
top: 0; top: 0;
width: 25%; width: 25%;
@ -121,6 +125,11 @@ canvas.spell-viz {
max-height: 80%; max-height: 80%;
overflow-y: scroll; overflow-y: scroll;
} }
.toc-permalink {
display: none;
visibility: hidden;
}
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

5
nodemon.json Normal file
View file

@ -0,0 +1,5 @@
{
"watch": ["doc/src/hexdoc/_templates"],
"ext": "jinja,html,css,js",
"exec": "hexdoc doc/properties.toml -o _site/src/docs --lang en_us --allow-missing && hexdoc_merge --src _site/src/docs --dst _site/dst/docs"
}