Blog series expanded (#612)

* Update sla.md Updated sla title * Update tos.md Updated tos title * Blog series expanded * Sync with main repo * TOC in mobile * Padding fix * Remove sticky, series link --------- Co-authored-by: Gavin <57272374+thtmnisamnstr@users.noreply.github.com>
earthly · Aug 15, 2023 · b95e915 · b95e915
1 parent 85199de
commit b95e915
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 38 deletions.
diff --git a/blog/_includes/nav_list b/blog/_includes/nav_list
@@ -1,23 +1,18 @@
 {% assign navigation = site.data.navigation[include.nav] %}
 {% assign navigation_title = site.data.navigation[include.nav][0].title %}
 
-<div class="pt-3">
+<div id="series-content">
     <div class="group">
-        <div class="text-xl mt-4 hover:underline flex"><a href="/blog/series/{{ include.nav }}/">{{ navigation_title }}</a>
-            <span>
-            </span>
-        </div>
-        <nav class="border-gray-300 relative bg-white pb-2 pt-2w border rounded-md shadow-md pl-4 mt-2 hidden group-hover:block transition ease-in-out">
-            <div class="arrow border-l border-t border-gray-300"></div>
-            <div class="font-semibold text-slate-600 text-lg mt-1 relative z-10">In this Series</div>
-                    <h3 class="nav__title font-semibold mb-2" style="padding-left: 0;">{{ page.sidebar.title }}</h3>
+        <nav class="relative pb-2 pt-2w lg:mt-3">
+            <div class="font-semibold text-slate-600 text-lg relative z-10 hidden lg:block">In this Series</div>
+            <h3 class="nav__title font-semibold mb-2" style="padding-left: 0;">{{ page.sidebar.title }}</h3>
             <ul class="nav__items -mt-2">
                 {% for nav in navigation %}
                     {% if nav.children != null %}
                     {% if nav.url %}
                         <a href="{{ nav.url | relative_url }}"><span class="nav__sub-title">{{ nav.title }}</span></a>
                     {% else %}
-                        <span class="nav__sub-title font-semibold block pt-4">{{ nav.title }}</span>
+                        <span class="nav__sub-title font-semibold block pb-1 pt-4">{{ nav.title }}</span>
                     {% endif %}
                         <ul>
                             {% for child in nav.children %}

diff --git a/blog/_includes/toc.html b/blog/_includes/toc.html
@@ -131,7 +131,7 @@
                 {% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %}
             {% endif %}
 
-            {% capture listItem %}<a{{ anchorAttributes }} class="text-sm text-gray-600 pl-2 pb-2 pt-2 border-b border-gray-200 block hover:bg-gray-100 ">{{ anchorBody }}</a>{% endcapture %}
+            {% capture listItem %}<a{{ anchorAttributes }} class="text-sm text-gray-600 pl-2 py-0.5 lg:py-2 lg:border-b border-gray-200 block hover:bg-gray-100 ">{{ anchorBody }}</a>{% endcapture %}
         {% elsif skipNoIDs == true %}
             {% continue %}
         {% else %}

diff --git a/blog/_layouts/single.html b/blog/_layouts/single.html
@@ -38,24 +38,20 @@
     {% endif %}
 
     <div class="page__inner-wrap flex relative">
-      <div id="breadcrumbs" class="w-[1px] h-full text-md sticky top-[36px] z-50 hidden lg:block">
-        <div class="w-[250px] pt-6 pl-3">
+      <div id="breadcrumbs" class="w-[1px] h-full text-md top-[36px] z-10 hidden lg:block">
+        <div class="w-[250px] pb-20 pt-6 pl-3">
           <div class="mt-6">
             <a href="/blog/" class="text-xl text-blue-600 hover:underline">Blog</a>
             <span class="text-slate-400 ml-1 mr-1">/</span>
             {% if page.sidebar %}
               <a href="/blog/series/" class="text-xl text-blue-600 font-semibold hover:underline">Series</a>
+              <span class="text-slate-400 ml-1 mr-1">/</span>
+              <a href="/blog/series/{{ page.sidebar.nav }}" class="text-xl text-blue-600 font-semibold hover:underline">{{ site.data.navigation[page.sidebar.nav][0].title }}</a>
             {% else %}
               <a href="/blog/categories/{{ page.categories[0] | downcase }}/" class="text-xl text-blue-600 font-semibold hover:underline">{{ page.categories[0] }}</a>
             {% endif %}
           </div>
 
-          {% if page.sidebar %}
-            {% if page.sidebar.nav %}
-              {% include nav_list nav=page.sidebar.nav %}
-            {% endif %}
-          {% endif %}
-
           {% if page.toc %}
             <div class="group mt-4">
               <header>
@@ -72,7 +68,15 @@ <h4 class="font-semibold text-md mb-2">Table of contents</h4>
         </div>
       </div>
 
-      <section class="page__content w-full p-2 pt-8 md:p-10 flex flex-1 flex-col items-center" itemprop="text">
+      <section class="page__content w-full p-2 pt-8 md:p-10 flex flex-1 flex-col items-center relative" itemprop="text">
+        {% if page.sidebar %}
+          {% if page.sidebar.nav %}
+            <div class="w-[1px] h-full text-md absolute right-0 z-10 hidden lg:block">
+              {% include nav_list nav=page.sidebar.nav %}
+            </div>
+          {% endif %}
+        {% endif %}
+
         <div class="blog-article-wrap">
           <header class="blog-article-header">
             {% if page.title %}
@@ -83,6 +87,32 @@ <h1 id="page-title" class="page__title text-4xl font-extrabold leading-none trac
             {% include page__meta.html %}
           </header>
 
+          <div class="lg:hidden mb-4">
+            {% if page.sidebar %}
+              {% if page.sidebar.nav %}
+                <div class="border border-gray-400 flex items-center justify-between my-2 px-4 py-2 rounded-md" onclick="toggleSeriesContent()">
+                  <p>In this Series</p>
+                  {% svg assets/svg/chevron.svg id="dropdown-icon" width="16px" height="16px" class="transition-transform" %}
+                </div>
+                <div id="dropdown-list" class="border border-gray-300 bg-white text-md rounded-md shadow-md px-4 pb-2 hidden">
+                  {% include nav_list nav=page.sidebar.nav %}
+                </div>
+              {% endif %}
+            {% endif %}
+          </div>
+
+          <div class="lg:hidden mb-4">
+            {% if page.toc %}
+              <div class="border border-gray-400 flex items-center justify-between my-2 px-4 py-2 rounded-md" onclick="toggleToc()">
+                <p>Table of contents</p>
+                {% svg assets/svg/chevron.svg id="toc-dropdown-icon" width="16px" height="16px" class="transition-transform" %}
+              </div>
+              <div id="toc-dropdown-list" class="border border-gray-300 bg-white text-md rounded-md shadow-md px-2 py-4 hidden">
+                {% include toc.html sanitize=true html=content h_min=1 h_max=4 class="toc__menu" skip_no_ids=true %}
+              </div>
+            {% endif %}
+          </div>
+
           <div class="prose content-block">{{ content }}</div>
 
           <div class="mt-4 prose">
@@ -158,11 +188,30 @@ <h4 class="page__meta-title">
   {% endif %}
 </div>
 
-{% if page.banner or page.mobileBanner or site.banner or site.mobileBanner %}
-  <script>
-    var banner = document.getElementsByClassName('announcement-banner')
-    var breadcrumbs = document.getElementById('breadcrumbs')
-    breadcrumbs.style.top = banner[0].scrollHeight + 36 + 'px'
-  </script>
-{% endif %}
-
+<script>
+  var dropdownList = document.getElementById('dropdown-list')
+  var dropdownIcon = document.getElementById('dropdown-icon')
+
+  function toggleSeriesContent() {
+    if (dropdownList.classList.contains('hidden')) {
+      dropdownList.classList.remove('hidden')
+      dropdownIcon.style.transform = 'rotate(180deg)'
+    } else {
+      dropdownList.classList.add('hidden')
+      dropdownIcon.style.transform = 'rotate(0deg)'
+    }
+  }
+
+  var tocDropdownList = document.getElementById('toc-dropdown-list')
+  var tocDropdownIcon = document.getElementById('toc-dropdown-icon')
+
+  function toggleToc() {
+    if (tocDropdownList.classList.contains('hidden')) {
+      tocDropdownList.classList.remove('hidden')
+      tocDropdownIcon.style.transform = 'rotate(180deg)'
+    } else {
+      tocDropdownList.classList.add('hidden')
+      tocDropdownIcon.style.transform = 'rotate(0deg)'
+    }
+  }
+</script>
diff --git a/blog/_sass/base.scss b/blog/_sass/base.scss
@@ -41,13 +41,23 @@ html {
   min-height: 80px;
 }
 
+.blog-article-wrap {
+  max-width: 65ch;
+}
+
 @media (min-width: 880px) {
   .site-logo{
     min-height: 75px;
     display: block;
   }
 }
 
+@media (min-width: 1024px) {
+  .blog-article-wrap {
+    max-width: calc(100% - 460px);
+  }
+}
+
 @media (min-width: 1200px) {
   .wide {
     width: 864px !important;
@@ -86,10 +96,35 @@ html {
   }
 
   .blog-article-wrap {
+    max-width: 65ch;
     margin: 0 auto;
   }
 }
 
+.toc__menu {
+  max-height: unset;
+
+  li a {
+    margin-bottom: 4px;
+  }
+}
+
+@media (min-width: 1024px) {
+  #series-content {
+    width: 250px;
+    margin-left: -250px;
+  }
+
+  .toc__menu {
+    max-height: calc(100vh - 216px);
+    overflow-y: auto;
+
+    li a {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .min-w-\[100px\] {
   min-width: 100px;
 }
@@ -178,10 +213,6 @@ html {
   top: 3px;
 }
 
-.blog-article-wrap {
-  max-width: 65ch;
-}
-
 .page__hero--overlay {
   position: relative;
   margin-bottom: 2em;
@@ -214,11 +245,6 @@ html {
   border-radius: 4px 0 0 0;
 }
 
-.toc__menu {
-  max-height: calc(100vh - 140px);
-  overflow-x: auto;
-}
-
 @media (max-width: 580px) {
   .blog-article-wrap {
     max-width: 100vw;