Add dropdowns for different versions selection (#99)

* Add versioning to docs 📚 * pass argument to haddock script * extract standalone-haddock! * Add dropdowns for different versions selection * Adjust dropdown arrow y position * Adjust button link-like similarity * Adjust nav links rhythm * Set back parameter on linuwial fixing Co-authored-by: Flavio Corpa <flavio.corpa@47deg.com>
higherkindness · Jan 27, 2020 · a6a2f4b · a6a2f4b
1 parent 6c633c9
commit a6a2f4b
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 17 deletions.
diff --git a/docs/_data/versions.yml b/docs/_data/versions.yml
@@ -0,0 +1,9 @@
+- name: Version
+  links:
+    stable: https://higherkindness.io/mu-haskell/
+    next: https://higherkindness.io/mu-haskell/wip
+
+- name: API Docs
+  links:
+    stable: https://higherkindness.io/mu-haskell/haddock
+    next: https://higherkindness.io/mu-haskell/wip/haddock
diff --git a/docs/_includes/_doc.html b/docs/_includes/_doc.html
@@ -1,4 +1,4 @@
-<main id="site-doc">
+<main id="site-doc" class="site-doc">
     <div class="doc-header">
       <button
         id="menu-toggle"
@@ -9,9 +9,9 @@
       </button>
 
       <div class="link-container">
-        <div class="link-item">
-          <a class="strong" href="{{ 'haddock/' | relative_url }}" title="API Docs" target="_blank" rel="noopener noreferrer">API Docs</a>
-        </div>
+        {% for item in site.data.versions %}
+        {% include _dropdown.html item=item %}
+        {% endfor %}
         <div class="link-item">
           <a href="https://github.com/{{ site.github-owner }}/{{ site.github-repo }}" title="GitHub repo" target="_blank" rel="noopener noreferrer">
             <span class="strong">GitHub</span>

diff --git a/docs/_includes/_dropdown.html b/docs/_includes/_dropdown.html
@@ -0,0 +1,24 @@
+<div id="{{ include.item.name | downcase | replace: ' ', '-' }}-dropdown" class="link-item">
+
+    <button class="button link-like strong" onclick="openDropdown(event)" title="{{ include.item.name }}">
+      {% if include.item.icon != "" %}
+        <i class="nav-item-icon fa fa-lg {{ include.item.icon }}" aria-hidden="true"></i>
+        <span class="nav-item-text">{{ include.item.name }}</span>
+      {% else %}
+        <span class="nav-item-text">{{ include.item.name }}</span>
+      {% endif %}
+    </button>
+
+    <ul class="dropdown dropdown-content">
+      {% for link in include.item.links %}
+      <li class="dropdown-item">
+        <a class="dropdown-item-link" title="{{ link[0] | capitalize }}" href="{{ link[1] }}" target="_blank" rel="noopener noreferrer">
+            <span>
+              {{ link[0] | capitalize }}
+            </span>
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+
+</div>
diff --git a/docs/_includes/_sidebar.html b/docs/_includes/_sidebar.html
@@ -1,4 +1,4 @@
-<div id="site-sidebar">
+<div id="site-sidebar" class="site-sidebar">
   <div class="sidebar-brand">
     <a href="{{ '/' | relative_url }}" class="brand" title="{{ site.name }}">
       <img

diff --git a/docs/_sass/components/_button.scss b/docs/_sass/components/_button.scss
@@ -2,12 +2,12 @@
 // ----------------------------------------------
 // ----------------------------------------------
 .button {
+  font-family: $base-font-family;
   display: block;
   background: none;
   border: none;
   outline: none;
   text-decoration: none;
-  position: relative;
 
   &:hover {
     cursor: pointer;
@@ -16,8 +16,33 @@
   > img {
     vertical-align: bottom;
   }
-}
 
+  &.link-like {
+    font-size: 1rem;
+    color: $link-color;
+    font-weight: $font-regular;
+    border: none;
+    padding: 0 0 ($base-point-grid / 2) 0;
+    margin:
+      0
+      ($base-point-grid * 2)
+      -5px
+      0;
+    text-transform: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+      box-shadow: 0 2px;
+      background: none;
+
+      &::after {
+        background-position-y: 60%;
+      }
+    }
+  }
+}
 
 .close {
   height: 28px;

diff --git a/docs/_sass/components/_doc.scss b/docs/_sass/components/_doc.scss
@@ -1,7 +1,7 @@
 // Doc content
 // -----------------------------------------------
 // -----------------------------------------------
-#site-doc {
+.site-doc {
     position: absolute;
     left: 290px;
     right: 0;
@@ -40,12 +40,12 @@
         justify-content: flex-end;
         align-items: center;
 
-        .link-item {
-          margin-left: ($base-point-grid * 3);
+        .strong {
+          font-weight: 600;
+        }
 
-          .strong {
-            font-weight: 600;
-          }
+        .link-item {
+          margin-left: ($base-point-grid * 2);
 
           a:hover {
             text-decoration: none;
@@ -146,7 +146,7 @@
 // Responsive
 // -----------------------------------------------
 @include bp(medium) {
-    #site-doc {
+    .site-doc {
         left: 0;
 
         &.expanded {

diff --git a/docs/_sass/components/_dropdown.scss b/docs/_sass/components/_dropdown.scss
@@ -0,0 +1,79 @@
+div[id$='-dropdown'] {
+  position: relative;
+
+  .dropdown {
+    display: block;
+    outline: 0;
+    width: 100%;
+
+    a {
+      &:hover {
+        background: lighten($gray-primary, 10%);
+      }
+    }
+  }
+
+  .link-like::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 150%;
+    width: 100%;
+    background-image: url("../img/arrow-down.svg");
+    background-repeat: no-repeat;
+    background-position-x: 100%;
+    background-position-y: 25%;
+    background-size: 0.8em;
+    transition: background-position 0.1s ease;
+
+    &:hover,
+    &:active,
+    &:focus {
+      &::after {
+        background-position-y: 60%;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  /* Documentation Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    font-size: 0.8rem;
+    position: absolute;
+    overflow: auto;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    background: lighten($gray-primary, 5%);
+    opacity: 0.5;
+    transform: rotate3d(1, 0, 0, 90deg);
+    transition: transform ease 250ms, opacity ease 100ms;
+    transform-origin: top;
+    margin-top: 6px;
+    text-align: center;
+
+    .dropdown-item {
+      width: 100%;
+
+      .dropdown-item-link {
+        padding: 12px 9px;
+        text-decoration: none;
+        display: block;
+        border-radius: 0;
+        color: $white;
+      }
+    }
+  }
+
+  /* Show the documentation dropdown menu (use JS to add this class
+    to the .dropdown-content container when the user clicks on
+    the dropdown button) */
+  .show {
+    transform: rotate3d(1, 0, 0, 0);
+    opacity: 1;
+  }
+}
diff --git a/docs/_sass/components/_sidebar.scss b/docs/_sass/components/_sidebar.scss
@@ -2,7 +2,7 @@
 // -----------------------------------------------
 // -----------------------------------------------
 
-#site-sidebar {
+.site-sidebar {
     position: fixed;
     background-image: linear-gradient(to bottom, $brand-secondary 60%, darken($brand-secondary, 3%) 100%);
     border-right: 1px solid rgba(0,0,0,0.1);
@@ -65,7 +65,7 @@
 // -----------------------------------------------
 @include bp(medium) {
 
-    #site-sidebar {
+    .site-sidebar {
         left: -100%;
         width: 100%;
 

diff --git a/docs/css/docs.scss b/docs/css/docs.scss
@@ -18,6 +18,7 @@
 @import "components/doc";
 @import "components/code";
 @import "components/table";
+@import "components/dropdown";
 
 // Vendor
 @import "vendors/highlight/dracula";
diff --git a/docs/img/arrow-down.svg b/docs/img/arrow-down.svg
diff --git a/docs/js/docs.js b/docs/js/docs.js
@@ -151,7 +151,7 @@ function linkifyAnchors(level, containingElement) {
 }
 
 /**
- * Function
+ * Go through all headers applying linkify function
  */
 function linkifyAllLevels() {
   const content = document.querySelector(".doc-content");
@@ -160,6 +160,46 @@ function linkifyAllLevels() {
   });
 }
 
+// Dropdown functions
+
+/* When the user clicks on the navigation Documentation button,
+ * toggle between hiding and showing the dropdown content.
+ */
+function openDropdown(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  // Calling close func. in case we're clicking another dropdown with one opened
+  closeDropdown(e);
+  const parent = e.target.closest("div[id$='-dropdown']");
+  if (parent) {
+    const dropdown = parent.querySelector(".dropdown-content");
+    if (dropdown) {
+      dropdown.classList.toggle("show");
+      if (dropdown.classList.contains("show")) {
+        document.documentElement.addEventListener("click", closeDropdown);
+      }
+      else {
+        document.documentElement.removeEventListener("click", closeDropdown);
+      }
+    }
+  }
+}
+
+// Close the dropdown if the user clicks (only) outside of it
+function closeDropdown(e) {
+  const dropdown = document.querySelector("div[id$='-dropdown'] > .dropdown-content.show");
+  if (dropdown) {
+    const currentTarget = e.currentTarget || {};
+    const currentTargetParent = currentTarget.closest("div[id$='-dropdown']");
+    const dropdownParent = dropdown.closest("div[id$='-dropdown']");
+    if (currentTargetParent !== dropdownParent) {
+      dropdown.classList.remove("show");
+    }
+    document.documentElement.removeEventListener("click", closeDropdown);
+  }
+}
+
+
 window.addEventListener("DOMContentLoaded", () => {
   activateToggle();
   activateMenuNesting();