From fc3704a97a8cd710657176238af98d7ba7d999b7 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 15 Oct 2023 22:29:40 +0100
Subject: [PATCH] Add a basic scroll indicator

---
 static/src/js/content.js                   | 11 +++++++++++
 static/src/scss/_hero.scss                 | 19 +++++++++++++++++++
 website/common/templates/wagtail_base.html |  4 ++++
 3 files changed, 34 insertions(+)

diff --git a/static/src/js/content.js b/static/src/js/content.js
index d039c92..d4354e4 100644
--- a/static/src/js/content.js
+++ b/static/src/js/content.js
@@ -1,6 +1,17 @@
 require("lite-youtube-embed");
 const GLightbox = require("glightbox");
 
+const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
+const CONTENT = document.querySelector(".container.content");
+
 window.addEventListener("load", () => {
   GLightbox({});
 });
+
+window.addEventListener("scroll", () => {
+  const winScroll =
+    document.body.scrollTop || document.documentElement.scrollTop;
+  const height = CONTENT.getBoundingClientRect().height;
+  const scrolled = Math.min((winScroll / height) * 100, 100);
+  SCROLL_INDICATOR.style.width = `${scrolled}%`;
+});
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index 8bc1d92..cf4af8a 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -95,6 +95,10 @@ section.hero {
     padding-bottom: unset;
   }
 
+  .columns {
+    margin-bottom: unset !important;
+  }
+
   nav.breadcrumb {
     margin-bottom: 0 !important;
   }
@@ -121,6 +125,21 @@ section.hero {
       box-shadow: $shadow;
     }
   }
+
+  .scroll-indicator-container {
+    height: 5px;
+
+    #scroll-indicator {
+      transition-duration: 0.5s;
+      transition-property: background-color;
+      height: 100%;
+      width: 50%;
+    }
+  }
+
+  &.stuck #scroll-indicator {
+    background-color: $primary;
+  }
 }
 
 #view-restriction-banner {
diff --git a/website/common/templates/wagtail_base.html b/website/common/templates/wagtail_base.html
index 66c5f58..c298ee5 100644
--- a/website/common/templates/wagtail_base.html
+++ b/website/common/templates/wagtail_base.html
@@ -68,6 +68,10 @@
         </div>
       </div>
     </div>
+
+    <div class="scroll-indicator-container">
+      <div id="scroll-indicator"></div>
+    </div>
   </section>
 
   {% block pre_content %}{% endblock %}