aboutsummaryrefslogtreecommitdiff
path: root/templates/partials
diff options
context:
space:
mode:
authorsptaule <lecas83@gmail.com>2022-01-31 18:43:17 +0100
committersptaule <lecas83@gmail.com>2022-01-31 18:43:17 +0100
commite463223e15ff95ba58726ddf7b652a1a9cd41059 (patch)
tree2bcfcd8d17a678d760a1248d5329dbe9bc23a313 /templates/partials
parent608c3f7759f2edf6b8defcf2abe0a9031184c136 (diff)
downloadgaragehq.deuxfleurs.fr-e463223e15ff95ba58726ddf7b652a1a9cd41059.tar.gz
garagehq.deuxfleurs.fr-e463223e15ff95ba58726ddf7b652a1a9cd41059.zip
Fix doc submenus states, doc links hover, split page & global ToC
Diffstat (limited to 'templates/partials')
-rw-r--r--templates/partials/doc/global_toc.html12
-rw-r--r--templates/partials/doc/global_toc_script.html35
-rw-r--r--templates/partials/doc/page_toc_script.html (renamed from templates/partials/doc/toc_script.html)25
-rw-r--r--templates/partials/shared/nav.html9
-rw-r--r--templates/partials/shared/search.html13
5 files changed, 58 insertions, 36 deletions
diff --git a/templates/partials/doc/global_toc.html b/templates/partials/doc/global_toc.html
index 277739c..eea7d26 100644
--- a/templates/partials/doc/global_toc.html
+++ b/templates/partials/doc/global_toc.html
@@ -7,7 +7,7 @@
{% for page in section.pages %}
<a
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 %}">
{{ page.title }}
</a>
@@ -19,13 +19,15 @@
<li class="relative">
<a
href="{{ h1.permalink | safe }}"
- 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 %}
- ">
+ 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 %}">
{{ h1.title }}
</a>
{% 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;">
<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>
diff --git a/templates/partials/doc/global_toc_script.html b/templates/partials/doc/global_toc_script.html
new file mode 100644
index 0000000..42abcda
--- /dev/null
+++ b/templates/partials/doc/global_toc_script.html
@@ -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> \ No newline at end of file
diff --git a/templates/partials/doc/toc_script.html b/templates/partials/doc/page_toc_script.html
index 7d10ee6..efe4bac 100644
--- a/templates/partials/doc/toc_script.html
+++ b/templates/partials/doc/page_toc_script.html
@@ -5,22 +5,6 @@ const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
const tocItems = document.querySelectorAll(".toc");
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
/*
Focus effect on current section anchor when user scrolls.
@@ -70,13 +54,4 @@ window.addEventListener('scroll', () => {
}
}, 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>
diff --git a/templates/partials/shared/nav.html b/templates/partials/shared/nav.html
index a4a4b99..adb1a70 100644
--- a/templates/partials/shared/nav.html
+++ b/templates/partials/shared/nav.html
@@ -22,13 +22,16 @@
{% endfor %}
{% endif %}
{% endfor %}
- <button
+ <a
id="nav-search-btn"
+ href="javascript:openSearchModal()"
type="button"
title="Open Search (alt + S)"
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>
- </button>
+ <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>
+ </a>
<a
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">
diff --git a/templates/partials/shared/search.html b/templates/partials/shared/search.html
index cb0ae2e..c41feca 100644
--- a/templates/partials/shared/search.html
+++ b/templates/partials/shared/search.html
@@ -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>
</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">
- <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>
+ <a
+ 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>
- </button>
+ </a>
</div>
</section> \ No newline at end of file