Fix folds

2 files changed, 62 insertions, 15 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 283a633..c723494 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -833,3 +833,51 @@ tbody tr:last-child td {
     text-align: right;
     font-family: monospace
 }
+
+.section-fold {
+    position: relative;
+    max-height: 400px;
+    overflow: hidden;
+    transition: max-height .5s ease-in-out;
+    border-bottom: 2px solid #ccc
+}
+
+.section-fold::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    background: linear-gradient(to bottom,rgba(255,255,255,0),#fff);
+    pointer-events: none;
+    transition: opacity .3s
+}
+
+.section-fold.expanded {
+    max-height: none;
+    border-bottom: none
+}
+
+.section-fold.expanded::after {
+    opacity: 0
+}
+
+.fold-toggle {
+    display: block;
+    margin: 10px auto;
+    padding: 5px 15px;
+    font-family: "Bitstream Vera Sans",sans-serif;
+    font-size: 9px;
+    text-transform: uppercase;
+    font-weight: 700;
+    background: #f0f0f0;
+    border: 1px solid #666;
+    box-shadow: 2px 2px 0#ccc;
+    cursor: pointer
+}
+
+.fold-toggle:hover {
+    background-color: #eee;
+    color: #2e8b57
+}
diff --git a/static/js/section-folds.js b/static/js/section-folds.js
index 9440264..5933d9b 100644
--- a/static/js/section-folds.js
+++ b/static/js/section-folds.js
@@ -18,15 +18,15 @@
  */
 
 function handleFolds() {
-    function displayFold(fold, foldText, frontMatterText) {
-        foldText.innerHTML = `⬇️ ${frontMatterText}`;
-        fold.classList.remove("fold-hidden");
+    function hideFold(fold, foldButton, frontMatterText) {
+        foldButton.innerHTML = `↓ Show More`;
+        fold.classList.remove("expanded");
         
     }
 
-    function hideFold(fold, foldText, frontMatterText) {
-        foldText.innerHTML = `➡️ Folded ${frontMatterText}`;
-        fold.classList.add("fold-hidden");
+    function displayFold(fold, foldButton, frontMatterText) {
+        foldButton.innerHTML = `↑ Show Less`;
+        fold.classList.add("expanded");
     }
 
     let folds = document.querySelectorAll(".section-fold");
@@ -37,25 +37,24 @@ function handleFolds() {
         let frontMatterText = `Section on "${fold.dataset.name}"`;
         let foldFrontMatter = document.createElement("div");
 
-        // The text will be inside of an anchor, which we'll hook onto using an
+        // The toggle will be a button, which we'll hook onto using an
         // event listener.
-        let foldAnchor = document.createElement("a");
-        let foldText = document.createElement("p");
-        foldAnchor.appendChild(foldText);
-        fold.parentNode.insertBefore(foldAnchor, fold.nextSibling);
+        let foldButton = document.createElement("button");
+        foldButton.classList.add("fold-toggle");
+        fold.parentNode.insertBefore(foldButton, fold.nextSibling);
 
         // The fold will start off in the "hidden" state.
         let toggle = false;
-        hideFold(fold, foldText, frontMatterText);
+        hideFold(fold, foldButton, frontMatterText);
 
         // But clicking on the "front matter" will cause the state of the fold
         // to toggle, first to "visible", and then back to "hidden".
-        foldAnchor.addEventListener('click', () => {
+        foldButton.addEventListener('click', () => {
             toggle = !toggle;
             if (toggle) {
-                displayFold(fold, foldText, frontMatterText);
+                displayFold(fold, foldButton, frontMatterText);
             } else {
-                hideFold(fold, foldText, frontMatterText);
+                hideFold(fold, foldButton, frontMatterText);
             }
         });
     }