Fix doc submenus states, doc links hover, split page & global ToC

This commit is contained in:
Lucas Chaplain 2022-01-31 18:43:17 +01:00
parent 608c3f7759
commit e463223e15
8 changed files with 63 additions and 45 deletions

View file

@ -91,7 +91,7 @@ p > code, p > strong > code, li > code, li > strong > code {
} }
.page-content a { .page-content a {
@apply font-semibold text-garage-orange border-b hover:border-garage-gray border-garage-orange bg-transparent hover:bg-garage-orange hover:text-white hover:rounded-sm hover:no-underline duration-150 transition; @apply font-semibold text-garage-orange border-b border-garage-orange hover:text-red-500 hover:border-red-500 transition-all duration-500;
} }
.page-content img { .page-content img {

View file

@ -195,12 +195,7 @@ function documentReadyCallback() {
} }
document.addEventListener('click', function(ev) { document.addEventListener('click', function(ev) {
if (ev.target.matches('#nav-search-btn') || ev.target.matches('#nav-search-btn-icon')) { if (!ev.target.closest('#search-modal')) {
openSearchModal();
}
else if (ev.target.matches('#close-modal-btn')
|| ev.target.matches('#close-modal-btn-icon')
|| !ev.target.closest('#search-modal')) {
closeSearchModal(); closeSearchModal();
} }
}); });

View file

@ -13,7 +13,7 @@
{% include "partials/doc/global_toc.html" %} {% include "partials/doc/global_toc.html" %}
<div class="col-span-full xl:col-span-3" style="min-height:85vh;"> <div class="col-span-full xl:col-span-3" style="min-height:85vh;">
<article class="box my-12 px-6 lg:px-8 xl:px-12"> <article class="box my-12 px-6 lg:px-8 xl:px-12">
<div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-full xl:w-max"> <div class="flex flex-col mb-10 bg-gray-100 rounded-r shadow-sm w-full xl:w-max">
<div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative"> <div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative">
<h1 class="title leading-10 text-xl lg:text-2xl xl:text-3xl text-garage-orange font-semibold"> <h1 class="title leading-10 text-xl lg:text-2xl xl:text-3xl text-garage-orange font-semibold">
{{ page.title }} {{ page.title }}
@ -53,6 +53,7 @@
{% set page = section %} {% set page = section %}
{% endif %} {% endif %}
{% if page.toc %} {% if page.toc %}
{% include "partials/doc/toc_script.html" %} {% include "partials/doc/page_toc_script.html" %}
{% endif %} {% endif %}
{% include "partials/doc/global_toc_script.html" %}
{% endblock %} {% endblock %}

View file

@ -7,7 +7,7 @@
{% for page in section.pages %} {% for page in section.pages %}
<a <a
href="{{ page.permalink | safe }}" href="{{ page.permalink | safe }}"
class="bg-white border border-garage-orange block p-1 rounded block font-semibold hover:bg-garage-orange hover:bg-opacity-20 class="bg-white border border-garage-orange block p-1 rounded font-semibold hover:bg-garage-orange hover:bg-opacity-20
{% if current_path == page.path %} activePage text-garage-orange border-opacity-100 border-garage-orange {% endif %}"> {% if current_path == page.path %} activePage text-garage-orange border-opacity-100 border-garage-orange {% endif %}">
{{ page.title }} {{ page.title }}
</a> </a>
@ -19,13 +19,15 @@
<li class="relative"> <li class="relative">
<a <a
href="{{ h1.permalink | safe }}" href="{{ h1.permalink | safe }}"
class="bg-white border border-garage-orange block p-1 rounded-r rounded-tl font-semibold class="bg-white border border-garage-orange block p-1 rounded-r rounded-tl font-semibold {% if current_path == h1.path %}activePage text-garage-orange font-semibold border-opacity-100 border-garage-orange{% else %}text-gray-800{% endif %}">
{% if current_path == h1.path %} activePage text-garage-orange font-semibold border-opacity-100 border-garage-orange {% else %}text-gray-800{% endif %}
">
{{ h1.title }} {{ h1.title }}
</a> </a>
{% if h1.pages %} {% if h1.pages %}
<input type="checkbox" id="btn-{{ h1.title | slugify }}" class="deploySubMenu"/> <input
type="checkbox"
id="btn-{{ h1.title | slugify }}"
class="deploySubMenu"
/>
<label for="btn-{{ h1.title | slugify }}" class="absolute top-0 right-0.5 bg-garage-orange bg-opacity-10 border-l border-garage-orange border-opacity-20 cursor-pointer inline-block px-3 py-1" style="margin-top:0.08rem;"> <label for="btn-{{ h1.title | slugify }}" class="absolute top-0 right-0.5 bg-garage-orange bg-opacity-10 border-l border-garage-orange border-opacity-20 cursor-pointer inline-block px-3 py-1" style="margin-top:0.08rem;">
<svg class="arrow w-6 h-6 text-garage-gray group-hover:text-garage-orange transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg> <svg class="arrow w-6 h-6 text-garage-gray group-hover:text-garage-orange transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</label> </label>

View file

@ -0,0 +1,35 @@
<script>
// Global ToC
/*
- Deploy current submenu (if any) and reploy others.
- Fixed ToC when user scrolls.
*/
document.addEventListener("DOMContentLoaded", function() {
var menusTriggers = document.getElementsByClassName("deploySubMenu");
var activeDocPage = document.getElementsByClassName("activePage")[0];
for (var i = 0; i < menusTriggers.length; i++) {
menusTriggers[i].checked = true;
}
let parentMenu = activeDocPage.parentElement.parentElement;
// Check if current page is the parent submenu page or just a child
if (parentMenu.classList.contains('subMenu')) { // child
parentMenu.previousElementSibling.previousElementSibling.checked = false;
} else { // parent
activeDocPage.nextElementSibling.checked = false;
}
});
window.addEventListener('scroll', function() {
if (document.body.clientWidth >= 1280) {
if (window.scrollY >= menuBarHeight) {
document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
} else {
document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
}
} else {
}
});
</script>

View file

@ -5,22 +5,6 @@ const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
const tocItems = document.querySelectorAll(".toc"); const tocItems = document.querySelectorAll(".toc");
const navSections = new Array(tocItems.length); const navSections = new Array(tocItems.length);
// Global ToC
/*
Fixed ToC when user scrolls.
*/
window.addEventListener('scroll', function() {
if (window.screen.width >= 1280) {
if (window.scrollY >= menuBarHeight) {
document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
} else {
document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
}
}
});
// Page content // Page content
/* /*
Focus effect on current section anchor when user scrolls. Focus effect on current section anchor when user scrolls.
@ -70,13 +54,4 @@ window.addEventListener('scroll', () => {
} }
}, false); }, false);
document.addEventListener("DOMContentLoaded", function() {
var menusTriggers = document.getElementsByClassName("deploySubMenu");
var activeDocPage = document.getElementsByClassName("activePage")[0];
for (var i = 0; i < menusTriggers.length; i++) {
menusTriggers[i].checked = true;
}
activeDocPage.parentElement.parentElement.previousElementSibling.previousElementSibling.checked = false;
});
</script> </script>

View file

@ -22,13 +22,16 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<button <a
id="nav-search-btn" id="nav-search-btn"
href="javascript:openSearchModal()"
type="button" type="button"
title="Open Search (alt + S)" title="Open Search (alt + S)"
class="focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg"> class="focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg">
<svg id="nav-search-btn-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <svg id="nav-search-btn-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</button> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
<a <a
href="https://garagehq.deuxfleurs.fr/_releases.html" href="https://garagehq.deuxfleurs.fr/_releases.html"
class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow px-2 py-1.5 rounded text-white transition-all duration-500 bg-gradient-to-tl from-garage-orange via-orange-500 to-orange-300 bg-size-200 bg-pos-0 hover:bg-pos-100"> class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow px-2 py-1.5 rounded text-white transition-all duration-500 bg-gradient-to-tl from-garage-orange via-orange-500 to-orange-300 bg-size-200 bg-pos-0 hover:bg-pos-100">

View file

@ -17,9 +17,16 @@
<div class="search-results__items max-h-96 overflow-y-scroll p-2 md:p-4 focus:outline outline-garage-orange"></div> <div class="search-results__items max-h-96 overflow-y-scroll p-2 md:p-4 focus:outline outline-garage-orange"></div>
</div> </div>
</section> </section>
<button aria-label="close" id="close-modal-btn" class="absolute top-4 right-4 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2"> <a
<svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> aria-label="close"
type="button"
id="close-modal-btn"
href="javascript:closeSearchModal()"
class="absolute top-4 right-4 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2">
<svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<small class="text-xs text-gray-400">(Esc)</small> <small class="text-xs text-gray-400">(Esc)</small>
</button> </a>
</div> </div>
</section> </section>