DONE create go to top button (#142)

HE-Arc · Dec 17, 2023 · d965cbf · d965cbf
1 parent 51a4d94
commit d965cbf
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/calm-webserver/resources/css/app.css b/calm-webserver/resources/css/app.css
@@ -128,6 +128,10 @@
     .flowbite-icon-svg {
         @apply w-4 h-4 text-gray-500;
     }
+
+    .goTop {
+        @apply hidden hover:bg-rollingStone bg-seaNymph rounded-[2.5rem] p-4 fixed bottom-5 right-5 cursor-pointer border-0;
+    }
 }
 
 /* INVITATION MANAGEMENT */

diff --git a/calm-webserver/resources/js/app.js b/calm-webserver/resources/js/app.js
@@ -176,10 +176,32 @@ import 'flowbite';
             });
     }
 
+    function scrollFunction(element) {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            element.style.display = "block";
+        } else {
+            element.style.display = "none";
+        }
+    }
+
+    /**
+     * When the user clicks on the button, scroll to the top of the document
+     */
+    function goTop()
+    {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+    }
+
     /**
      * Main program
      */
     (function mainProgram() {
+
+        const goTopButton = getElement("#goTop");
+        addEvent(goTopButton, "click", goTop);
+        window.onscroll = function() {scrollFunction(goTopButton)};
+
         // Filter laundries list when user select an organisation
         const selectedOrganisation = getElement("#organisations");
         addEvent(selectedOrganisation, "change", () => {

diff --git a/calm-webserver/resources/views/layout/app.blade.php b/calm-webserver/resources/views/layout/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html class="scroll-smooth" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     <meta charset="utf-8">
@@ -186,11 +186,17 @@ class="sticky top-2 btn btn-transparent flex lg:ml-2 lg:inline-flex justify-cent
     </main>
 
     <footer class="bg-white rounded-lg m-4 text-center mt-auto mx-auto">
+        <button class="goTop" id="goTop" title="Go to top">
+            <svg class="w-6 h-6 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"/>
+            </svg>
+        </button>
+
         <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-            <span class="text-sm text-gray-500 sm:text-center">
-                &copy; 2023 <a href="https://he-arc.ch" target="_blank" class="hover:underline">Haute Ecole Arc</a>.
-                Tous droits réservés.
-            </span>
+		<span class="text-sm text-gray-500 sm:text-center">
+			&copy; 2023 <a href="https://he-arc.ch" target="_blank" class="hover:underline">Haute Ecole Arc</a>.
+			Tous droits réservés.
+		</span>
         </div>
     </footer>
 </body>