From 5d836ad4a3202f0217683b52795d26c11a0acf1b Mon Sep 17 00:00:00 2001
From: "Toerd@480" <philipg@posteo.de>
Date: Thu, 24 Oct 2019 12:05:13 +0200
Subject: [PATCH] Added scroll indicators

---
 inc/css/main.css  | 48 +++++++++++++++++++++++++++++++++++++++++++++++
 inc/js/main.js    | 11 +++++++++--
 tmpl/gallery.html |  4 ++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/inc/css/main.css b/inc/css/main.css
index 1b27b31..9c98cff 100644
--- a/inc/css/main.css
+++ b/inc/css/main.css
@@ -148,7 +148,55 @@ nav {
     cursor: pointer;
 }
 
+/******************* SCROLL INDICATOR *******************/
 
+#overlay-arrow {
+    position: absolute;
+    width: 95vw;
+    height: 5vh;
+    left: 2.5vw;
+    bottom: calc((var(--h-ex) - 5vh) / 2 + 2.5vh);
+    visibility: hidden;
+}
+
+.arrow {
+    position: absolute;
+    line-height: 5vh;
+    font-size: 12vh;
+    top: -0.5vh;
+    color: var(--c1);
+    background-color: var(--c3);
+    opacity: 0.7;
+    width: 6vh;
+    height: 6vh;
+    border-radius: 50%;
+    text-align: center;
+    visibility: hidden;
+    animation: notice 3s;
+}
+
+.arrow:first-child {
+    left: 1vw;
+}
+
+.arrow:last-child {
+    right: 1vw;
+}
+
+@keyframes notice {
+    0% {
+        visibility: visible;
+        opacity: 0;
+    }
+    50% {
+        visibility: visible;
+        opacity: 0.9;
+    }
+    100% {
+        visibility: visible;
+        opacity: 0;
+    }
+}
 
 /******************* INFO *******************/
 
diff --git a/inc/js/main.js b/inc/js/main.js
index 1884301..d0abb95 100644
--- a/inc/js/main.js
+++ b/inc/js/main.js
@@ -9,11 +9,13 @@ document.addEventListener("DOMContentLoaded", run);
 // global var to control the animation of the text
 var runTextAnimation = true;
 function run() {
-    initializeClickHandler();
+    initialize();
 }
 
-function initializeClickHandler() {
+function initialize() {
     let welcome = document.getElementById("welcome");
+    let exhibit = document.getElementById("exhibition");
+    let notice = document.getElementById("overlay-arrow");
     flyingText(welcome);
     document.addEventListener("click", (e) => {
         let overlay = document.getElementById("info-box");
@@ -28,6 +30,11 @@ function initializeClickHandler() {
             hideElement(overlay);
         }
     });
+
+    // remove the indicator on enter
+    exhibit.addEventListener("mouseenter", () => {
+        notice.remove();
+    }, {once: true});
 }
 
 function handleThumb(overlay, elem) {
diff --git a/tmpl/gallery.html b/tmpl/gallery.html
index 5c2f979..06f664b 100644
--- a/tmpl/gallery.html
+++ b/tmpl/gallery.html
@@ -16,4 +16,8 @@
     </div>
     {{end}}
 </section>
+<section id="overlay-arrow">
+    <div class="arrow">&#x2039;</div>
+    <div class="arrow">&#x203a;</div>
+</section>
 {{end}}