f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

feat: show toc on mobile screens (#1964)

Browse Source
This commit is contained in:
Alexander Fuks
2024-10-11 18:32:10 +04:00
committed by GitHub
parent 740bd84c51
commit 8a064a5e5a
13 changed files with 429 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_layouts/post.html
View File

@@ -11,7 +11,9 @@ tail_includes:
{% include lang.html %}
<article class="px-1">
{% include toc-status.html %}
<article class="px-1" data-toc="{{ enable_toc }}">
<header>
<h1 data-toc-skip>{{ page.title }}</h1>
{% if page.description %}
@@ -95,6 +97,30 @@ tail_includes:
</div>
</header>
{% if enable_toc %}
<div id="toc-bar" class="d-flex align-items-center justify-content-between invisible">
<span class="label text-truncate">{{ page.title }}</span>
<button type="button" class="toc-trigger btn btn-link me-1">
<i class="fa-solid fa-list-ul fa-fw"></i>
</button>
</div>
<button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm">
<span class="label ps-2 pe-1">{{- site.data.locales[lang].panel.toc -}}</span>
<i class="fa-solid fa-angle-right fa-fw"></i>
</button>
<dialog id="toc-popup" class="p-0">
<div class="header d-flex flex-row align-items-center justify-content-between">
<div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
<button id="toc-popup-close" type="button" class="btn btn-link">
<i class="fas fa-close fa-fw"></i>
</button>
</div>
<div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
</dialog>
{% endif %}
<div class="content">
{{ content }}
</div>