show-hide cleanup and more interactive asidenav

templates/standalone/showHide.julius

@@ -1,6 +1,6 @@
 /**
- * div.js-show-hide
- *   div.js-show-hide-toggle
+ * div
+ *   div.js-show-hide__toggle
  *     toggle here
  *   div
  *     content here
@@ -9,42 +9,19 @@
 document.addEventListener('DOMContentLoaded', function() {
 
   var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
-      toggles = [],
-      path = new URL(window.location.href).pathname;
-
+      toggles = [];
 
   function addEventHandler(el) {
     el.addEventListener('click', function elClickListener() {
       var toggle = toggles[el.dataset.index];
       toggle.collapsed = !toggle.collapsed;
       toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
-      updateLocalStorage();
     });
   }
 
-  function updateLocalStorage(id) {
-    var lsData = getStateFromLocalStorage();
-    lsData[path] = toggles.map(t => {
-      return {id: t.index, collapsed: t.collapsed};
-    });
-    window.localStorage.setItem('showHidesToggles', JSON.stringify(lsData));
-  }
-
-  function collapsedStateInLocalStorage(id, fallBack) {
-    var lsData = getStateFromLocalStorage();
-    if (lsData[path] && lsData[path][id] && lsData[path][id].id === id) {
-      return lsData[path][id].collapsed;
-    }
-    return fallBack;
-  }
-
-  function getStateFromLocalStorage() {
-    return JSON.parse(window.localStorage.getItem('showHidesToggles')) || {};
-  }
-
   elements.forEach(function(el, i) {
     el.dataset.index = i;
-    var coll = collapsedStateInLocalStorage(i, el.dataset.collapsed === 'true');
+    var coll = el.dataset.collapsed === 'true';
     if (coll) {
       el.parentElement.classList.add('js-show-hide--collapsed')
     }

templates/standalone/showHide.lucius

@@ -4,9 +4,6 @@
 
 .js-show-hide__toggle {
   position: relative;
-}
-
-.js-show-hide__toggle:hover {
   cursor: pointer;
 }
 
@@ -15,35 +12,33 @@
   position: absolute;
   width: 0;
   height: 0;
-  border-right: 8px solid transparent;
-  border-bottom: 8px solid transparent;
-}
-
-.js-show-hide__toggle::before,
-.js-show-hide--collapsed .js-show-hide__toggle:hover::before {
   left: -28px;
-  top: 10px;
-  border-left: 8px solid transparent;
-  border-top: 8px solid var(--color-light);
-}
-
-.js-show-hide__toggle:hover::before,
-.js-show-hide--collapsed .js-show-hide__toggle::before {
-  border-left: 8px solid var(--color-light);
+  top: 6px;
+  color: var(--color-primary);
+  border-right: 8px solid transparent;
   border-top: 8px solid transparent;
-  top: 5px;
-  left: -22px;
+  border-left: 8px solid transparent;
+  border-bottom: 8px solid currentColor;
+  transition: transform .2s ease;
+  transform-origin: 8px 12px;
 }
 
 .js-show-hide__target {
   transition: all .2s ease;
-  overflow: hidden;
 }
 
-.js-show-hide--collapsed > .js-show-hide__target {
-  display: block;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  max-height: 0;
+.js-show-hide--collapsed {
+
+  .js-show-hide__toggle::before {
+    transform: rotate(180deg);
+  }
+
+  .js-show-hide__target {
+    display: block;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    max-height: 0;
+    overflow-y: hidden;
+  }
 }

templates/widgets/asidenav.hamlet

@@ -1,9 +1,9 @@
 $newline never
 <aside .main__aside>
   <div .asidenav>
-    <div .asidenav__box>
-      $forall tid@TermIdentifier{..} <- favouriteTerms
-        <h3 .asidenav__box-title>
+    $forall tid@TermIdentifier{..} <- favouriteTerms
+      <div .asidenav__box>
+        <h3 .asidenav__box-title.js-show-hide__toggle>
           $case season
             $of Winter
               _{MsgWinterTermShort year}

templates/widgets/asidenav.lucius

@@ -36,6 +36,15 @@
     &:not(.main__aside--expanded) {
       transform: translateX(-110%);
     }
+
+    .asidenav__box-title {
+      font-size: 18px;
+      padding-left: 10px;
+
+      &.js-show-hide__toggle::before {
+        top: 25px;
+      }
+    }
   }
 }
 
@@ -45,6 +54,10 @@
 
 .asidenav__box {
   transition: opacity .2s ease;
+
+  + .asidenav__box {
+    margin-top: 10px;
+  }
 }
 
 .asidenav__box-title {
@@ -54,7 +67,17 @@
   transition: all .2s ease;
   padding: 30px 13px 10px;
   margin: 0;
-  background-color: var(--color-darker);
+  border-bottom: 1px solid var(--color-lightwhite);
+
+  &.js-show-hide__toggle {
+
+    &::before {
+      left: auto;
+      right: 20px;
+      top: 30px;
+      color: white;
+    }
+  }
 }
 
 .asidenav__list-item {
@@ -87,10 +110,6 @@
       width: 200px;
     }
   }
-
-  + .asidenav__list-item {
-    margin-top: 4px;
-  }
 }
 
 /* small list-item-padding for medium to large screens */
@@ -173,8 +192,8 @@
   }
 }
 
-/* STATE COLLAPSED */
-@media (max-width: 768px) and (min-width: 425px) {
+/* TABLET */
+@media (min-width: 425px) and (max-width: 768px) {
 
   .main__aside {
     width: 50px;
@@ -187,6 +206,8 @@
       font-size: 18px;
       text-align: center;
       padding: 10px 1px;
+      word-break: break-all;
+      background-color: var(--color-darker);
     }
 
     .asidenav__link-shorthand {
@@ -233,5 +254,8 @@
       }
     }
 
+    .js-show-hide__toggle::before {
+      content: none;
+    }
   }
 }