Use container-fluid with JS to expand toc's width

danirus · Feb 19, 2024 · fb8c09d · fb8c09d
1 parent 0a00d9e
commit fb8c09d
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 136 deletions.
diff --git a/js/src/index.js b/js/src/index.js
@@ -44,6 +44,7 @@ window.addEventListener('DOMContentLoaded', (_) => {
   //
   updateScrollPaddingTop();
   resizeAsides(); // Resize just after DOM content is loaded.
+
   // And register the function for every height change of the body.
   const resize_observer = new ResizeObserver(entries => resizeAsides());
   resize_observer.observe(document.body);

diff --git a/js/src/tocresize.js b/js/src/tocresize.js
@@ -1,7 +1,10 @@
 export function resizeAsides() {
   let height = "";
+
+  const nftt_layout = document.querySelector(".nftt-layout");
   const nftt_content = document.querySelector(".nftt-content");
   const nftt_sidebar = document.querySelector(".nftt-sidebar");
+  const nftt_sidebar_content = document.querySelector(".nftt-sidebar-content");
   const nftt_toc = document.querySelector(".nftt-toc");
 
   if (nftt_content != undefined) {
@@ -10,13 +13,15 @@ export function resizeAsides() {
       : `height: ${nftt_content.clientHeight}px`;
   }
 
+  // Height for nftt-sidebar.
   // Apply style attribute to nftt-sidebar (when min-width >= 1200px).
   if (window.matchMedia('(min-width: 1200px)').matches == false) {
     nftt_sidebar?.setAttribute("style", "");
   } else {
     nftt_sidebar?.setAttribute("style", height);
   }
 
+  // Height for nftt-toc.
   // Apply style attribute to nftt-toc (when min-width >= 992px).
   if (window.matchMedia('(min-width: 992px)').matches == false) {
     nftt_toc?.setAttribute("style", "");
@@ -25,7 +30,21 @@ export function resizeAsides() {
     nftt_toc?.setAttribute("style", height);
   }
 
-  return height;
+  // Compute new 'grid-template-columns' for nftt-layout.
+  const max = (window.innerWidth - nftt_content.offsetWidth);
+  const newmax = nftt_toc
+    ? Math.floor(max / 2)
+    : (
+      nftt_sidebar_content
+        ? Math.floor((max + nftt_sidebar_content.offsetWidth) / 2)
+        : undefined
+    );
+  if (newmax) {
+    const newgtcols = `minmax(300px, ${newmax}px) 5fr`;
+    nftt_layout?.setAttribute("style", `grid-template-columns: ${newgtcols}`);
+  }
+
+  return [height, newmax];
 }
 
 

diff --git a/js/tests/unit/tocresize.spec.js b/js/tests/unit/tocresize.spec.js
@@ -70,8 +70,8 @@ describe('resize', () => {
       }
     );
 
-    const resulting_height = resizeAsides();
-    expect(resulting_height).toEqual("height: calc(100vh - 7rem)");
+    const results = resizeAsides();
+    expect(results[0]).toEqual("height: calc(100vh - 7rem)");
   });
 
   it('checks resizeAsides when nftt_content shorter than body', () => {
@@ -90,7 +90,7 @@ describe('resize', () => {
       }
     );
 
-    const resulting_height = resizeAsides();
-    expect(resulting_height).toEqual(expected_height);
+    const results = resizeAsides();
+    expect(results[0]).toEqual(expected_height);
   });
 });
diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -31,8 +31,8 @@ body {
   @include media-breakpoint-up(xl) {
     display: grid;
     grid-template-areas: "sidebar main";
-    grid-template-columns: minmax(300px 2fr) 5fr;
-    gap: 1.5rem;
+    grid-template-columns: minmax(300px, 1.5fr) 5fr;
+    gap: 25px;
   }
 }
 
@@ -63,10 +63,12 @@ body {
   display: grid;
   grid-area: main;
   grid-template-areas: "content";
+  grid-template-columns: minmax(570px, 860px);
   padding-right: 48px;
 
   @include media-breakpoint-down(xl) {
     padding-right: 0;
+    grid-template-columns: none;
   }
 }
 
@@ -86,7 +88,7 @@ body {
 
   @include media-breakpoint-up(lg) {
     grid-template-areas: "content toc";
-    grid-template-columns: minmax(570px, 790px) minmax(190px, 1.3fr);
+    grid-template-columns: minmax(570px, 760px) minmax(190px, 1.3fr);
   }
 }
 
@@ -107,6 +109,11 @@ body {
   font-family: var(--#{$prefix}documentation-font);
   font-size: var(--#{$prefix}documentation-font-size);
 
+  @include media-breakpoint-down(xl) {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   h1,
   h2,
   h3,

diff --git a/scss/components/_toc.scss b/scss/components/_toc.scss
@@ -140,6 +140,8 @@
     z-index: 2;
     padding-right: .25rem;
     overflow-y: auto;
+    // overflow-x: auto;
+    // white-space: nowrap;
 
     @include scrollbars();
   }

diff --git a/site/index.html b/site/index.html
diff --git a/sphinx_nefertiti/colorsets-dropdown.html b/sphinx_nefertiti/colorsets-dropdown.html
@@ -1,8 +1,8 @@
 <!-- colorssets-dropdown.html -->
 <li class="nav-item dropdown">
-  <a class="nav-link d-flex py-2 px-0 px-lg-2 dropdown-toggle align-items-center" id="snftt-color" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="Toggle color set">
+  <a class="nav-link d-flex py-2 px-0 px-xl-2 dropdown-toggle align-items-center" id="snftt-color" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="Toggle color set">
     <i class="bi bi-palette"></i>
-    <span id="snftt-color-text" class="d-lg-none small ms-2">{{ _('Change color set') }}</span>
+    <span id="snftt-color-text" class="d-xl-none small ms-2">{{ _('Change color set') }}</span>
   </a>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="snftt-color-text">
     <li>
@@ -22,7 +22,7 @@ <h6 class="dropdown-header">{{ _('Change color set') }}</h6>
   </ul>
 </li>
 
-<li class="nav-item col-12 col-lg-auto h-100" aria-hidden="true">
-  <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+<li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
+  <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
   <hr class="d-lg-none text-white-50">
 </li>
diff --git a/sphinx_nefertiti/globaltoc.html b/sphinx_nefertiti/globaltoc.html
@@ -1,5 +1,5 @@
 <div class="offcanvas-header border-bottom">
-  <h5 class="offcanvas-title" id="nfttSidebarOffcanvasLabel">
+  <h5 class="offcanvas-title fw-bold" id="nfttSidebarOffcanvasLabel">
     {{ _('Table of contents') }}
   </h5>
   <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#sidebar"></button>

diff --git a/sphinx_nefertiti/layout.html b/sphinx_nefertiti/layout.html
@@ -95,14 +95,14 @@
     </style>
   </head>
   <body>
-    <header class="navbar navbar-expand-lg navbar-dark nftt-navbar flex-column fixed-top">
+    <header class="navbar navbar-expand-xl navbar-dark nftt-navbar flex-column fixed-top">
       <div class="skip-links container-xxl visually-hidden-focusable overflow-hidden justify-content-start">
         <div class="border-bottom mb-2 pb-2 w-100">
           <a class="d-none d-md-inline-flex p-2 m-1" href="#sidebar-filter">{{ _('Skip to docs navigation') }}</a>
           <a class="d-inline-flex p-2 m-1" href="#content">{{ _('Skip to main content') }}</a>
         </div>
       </div>
-      <nav class="container-xxl nftt-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+      <nav class="container-xxl nftt-gutter flex-wrap flex-xl-nowrap" aria-label="Main navigation">
         <div class="nftt-navbar-toggler">
           <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Toggle documentation navigation">
             <i class="bi bi-list"></i>
@@ -129,7 +129,7 @@
               class="navbar-brand p-0 me-0 md-lg-2"
           ><span class="brand-text">{{ project }}</span></a>
         {% endif %}
-        <div class="d-flex d-lg-none">
+        <div class="d-flex d-xl-none">
           <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#nfttSearch" aria-controls="nfttSearch" aria-label="Search">
             <i class="bi bi-search"></i>
           </button>
@@ -138,17 +138,17 @@
           </button>
         </div>
         {% include "searchbox.html" %}
-        <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="nfttNavbar" aria-labelledby="nfttNavbarOffcanvasLabel" data-bs-scroll="true">
+        <div class="offcanvas-xl offcanvas-end flex-grow-1" tabindex="-1" id="nfttNavbar" aria-labelledby="nfttNavbarOffcanvasLabel" data-bs-scroll="true">
           <div class="offcanvas-header px-4 pb-0">
-            <div class="offcanvas-title text-white fw-bold" id="nfttNavbarOffcanvasLabel"><span class="brand-text">Nefertiti for Sphinx</span></div>
+            <div class="offcanvas-title navbar-brand" id="nfttNavbarOffcanvasLabel"><span class="brand-text">Nefertiti for Sphinx</span></div>
             <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#nfttNavbar"></button>
           </div>
-          <div class="offcanvas-body p-4 pt-0 p-lg-0">
-            <hr class="d-lg-none text-white-50">
-            <ul class="navbar-nav flex-row align-items-center flex-wrap ms-md-auto">
+          <div class="offcanvas-body p-4 pt-0 p-xl-0 px-xl-3">
+            <hr class="d-xl-none text-white-50">
+            <ul class="navbar-nav flex-row align-items-center flex-wrap ms-lg-auto">
               {% if theme_repository_url and theme_repository_name %}
-              <li class="nav-item col-12 col-lg-auto">
-                <a class="nav-link py-2 py-lg-0 px-0 px-lg-2" href="{{ theme_repository_url }}" target="_blank" rel="noopener">
+              <li class="nav-item col-12 col-xl-auto">
+                <a class="nav-link py-2 py-xl-0 px-0 px-xl-2" href="{{ theme_repository_url }}" target="_blank" rel="noopener">
                   <div class="d-flex align-items-center">
                     <div class="me-2">
                       <i class="bi bi-git size-24"></i>
@@ -173,9 +173,9 @@
                   </div>
                 </a>
               </li>
-              <li class="nav-item col-12 col-lg-auto h-100" aria-hidden="true">
-                <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
-                <hr class="d-lg-none text-white-50">
+              <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
+                <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+                <hr class="d-xl-none text-white-50">
               </li>
               {% endif %}
               {% include "version-dropdown.html" %}
@@ -189,16 +189,18 @@
       </nav>
     </header>
 
-    <div class="container-xxl nftt-gutter nftt-layout">
+    <div class="container-fluid nftt-gutter nftt-layout">
       <aside class="nftt-sidebar">
-        <div class="title d-none d-md-block">
-          <i class="bi bi-book"></i>&nbsp;&nbsp;<span>{{ _('Table of contents') }}</span>
-        </div>
-        <div id="sidebar" tabindex="-1" class="offcanvas-lg offcanvas-start" aria-labelledby="nfttSidebarOffcanvasLabel">
-          {%- for sidebartemplate in sidebars %}
-            <!-- danirus sidebartemplate: "{{ sidebartemplate }}" -->
-            {%- include sidebartemplate %}
-          {%- endfor %}
+        <div class="nftt-sidebar-content">
+          <div class="title d-none d-xl-block">
+            <i class="bi bi-book"></i>&nbsp;&nbsp;<span>{{ _('Index') }}</span>
+          </div>
+          <div id="sidebar" tabindex="-1" class="offcanvas-xl offcanvas-start" aria-labelledby="nfttSidebarOffcanvasLabel">
+            {%- for sidebartemplate in sidebars %}
+              <!-- danirus sidebartemplate: "{{ sidebartemplate }}" -->
+              {%- include sidebartemplate %}
+            {%- endfor %}
+          </div>
         </div>
       </aside>
       <main class="{% if hidetoc %}nftt-main-wo-toc{% else %}nftt-main{% endif %}">
@@ -209,12 +211,11 @@
         {% if display_toc and not hidetoc %}
           <aside class="nftt-toc">
             <div class="mt-3 mb-1 my-lg-0 ps-xl-3 text-muted">
-              <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none nftt-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"
+              <button class="btn btn-link link-dark p-lg-0 mb-2 mb-lg-0 text-decoration-none nftt-toc-toggle d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"
               >On this page <i class="ms-2 bi bi-chevron-expand"></i></button>
-              <div class="title d-none d-md-block">
+              <div class="title d-none d-lg-block">
                 <i class="bi bi-file-earmark-text"></i>&nbsp;&nbsp;<span class="small">On this page</span>
               </div>
-              <hr class="d-none d-md-block my-2">
               <div class="collapse nftt-toc-collapse" id="tocContents">
                 <nav id="TableOfContents">
                   {{ toc }}

diff --git a/sphinx_nefertiti/lightdark-dropdown.html b/sphinx_nefertiti/lightdark-dropdown.html
@@ -1,8 +1,8 @@
 <!-- colorscheme_dropdown.html -->
 <li class="nav-item dropdown">
-  <a class="nav-link d-flex py-2 px-0 px-lg-2 dropdown-toggle align-items-center" id="snftt-luz" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="Toggle light/dark">
+  <a class="nav-link d-flex py-2 px-0 px-xl-2 dropdown-toggle align-items-center" id="snftt-luz" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label="Toggle light/dark">
     <i class="bi bi-circle-half" data-snftt-luz-icon-active></i>
-    <span id="snftt-luz-text" class="d-lg-none small ms-2">{{ _('Toggle light/dark') }}</span>
+    <span id="snftt-luz-text" class="d-xl-none small ms-2">{{ _('Toggle light/dark') }}</span>
   </a>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="snftt-luz-text">
     <li>

diff --git a/sphinx_nefertiti/searchbox.html b/sphinx_nefertiti/searchbox.html
@@ -1,13 +1,13 @@
 {%- if pagename != "search" and builder != "singlehtml" %}
-<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="nfttSearch" aria-labelledby="nfttSearchOffcanvasLabel" data-bs-scroll="true">
+<div class="offcanvas-xl offcanvas-end flex-grow-1" tabindex="-1" id="nfttSearch" aria-labelledby="nfttSearchOffcanvasLabel" data-bs-scroll="true">
   <div class="offcanvas-header px-4 pb-0">
     <h5 class="offcanvas-title fw-bold" id="nfttSearchOffcanvasLabel">Search the documentation</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#nfttSearch"></button>
   </div>
-  <div class="offcanvas-body p-4 pt-0 p-lg-0 px-lg-3">
-    <hr class="d-lg-none text-white-50">
+  <div class="offcanvas-body p-4 pt-0 p-xl-0 px-xl-3">
+    <hr class="d-xl-none text-white-50">
     <ul class="navbar-nav flex-row align-items-center flex-wrap ms-md-auto">
-      <li class="nav-item col-12 col-lg-auto">
+      <li class="nav-item col-12 col-xl-auto">
         <form id="nftt-search-form" action="{{ pathto('search') }}" method="get">
           <div class="input-group">
             <input type="text" name="q" class="form-control" placeholder="{{ _('Search docs') }}" aria-label="Search" aria-describedby="button-search">

diff --git a/sphinx_nefertiti/version-dropdown.html b/sphinx_nefertiti/version-dropdown.html
@@ -2,8 +2,8 @@
 {% if READTHEDOCS or theme_versions %}
   {% if READTHEDOCS %}
     <li class="nav-item dropdown">
-      <a class="nav-link d-flex py-2 px-0 px-lg-2 dropdown-toggle align-items-center" id="snftt-version" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Select version">
-        <span id="snftt-version-text" class="d-lg-none small">{{ project|striptags|e }}</span>
+      <a class="nav-link d-flex py-2 px-0 px-xl-2 dropdown-toggle align-items-center" id="snftt-version" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Select version">
+        <span id="snftt-version-text" class="d-xl-none small">{{ project|striptags|e }}</span>
         <span class="small ms-2" data-snftt-version-active="{{ current_version }}">v: {{ current_version }}</span>
       </a>
       <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="snftt-version-text">
@@ -32,8 +32,8 @@ <h6 class="dropdown-header">On Read the Docs</h6>
     </li>
   {% elif theme_versions %}
     <li class="nav-item dropdown">
-      <a class="nav-link d-flex py-2 px-0 px-lg-2 dropdown-toggle align-items-center" id="snftt-version" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Select version">
-        <span id="snftt-version-text" class="d-lg-none small">{{ project|striptags|e }}</span>
+      <a class="nav-link d-flex py-2 px-0 px-xl-2 dropdown-toggle align-items-center" id="snftt-version" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Select version">
+        <span id="snftt-version-text" class="d-xl-none small">{{ project|striptags|e }}</span>
         <span class="small ms-2" data-snftt-version-active="{{ theme_current_version }}">{{ theme_current_version }}</span>
       </a>
       <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="snftt-version-text">
@@ -52,8 +52,8 @@ <h6 class="dropdown-header">{{ _('Versions') }}</h6>
     </li>
   {% endif %}
 
-  <li class="nav-item col-12 col-lg-auto h-100" aria-hidden="true">
-    <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
-    <hr class="d-lg-none text-white-50">
+  <li class="nav-item col-12 col-xl-auto h-100" aria-hidden="true">
+    <div class="vr d-none d-xl-flex h-100 mx-xl-2 text-white"></div>
+    <hr class="d-xl-none text-white-50">
   </li>
 {% endif %}