Add a Jump To Top Button (#1702)

ocaml · Oct 26, 2023 · c098475 · c098475
1 parent f7127c4
commit c098475
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
diff --git a/src/ocamlorg_frontend/components/icons.eml b/src/ocamlorg_frontend/components/icons.eml
@@ -309,3 +309,8 @@ let twitter class_ =
     <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
   </svg>
 
+let arrow_up class_ =
+  <svg class="<%s class_ %>" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.5 10.5L12 3M12 3L19.5 10.5M12 3V21" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+
diff --git a/src/ocamlorg_frontend/layouts/layout.eml b/src/ocamlorg_frontend/layouts/layout.eml
@@ -77,8 +77,28 @@ inner =
 
       <main><%s! inner %></main>
 
+      <button class="fixed bottom-8 right-10 md:bottom-[5rem] lg:bottom-[8.37rem] lg:right-[6.5rem] border-0 hidden focus:outline-none z-50 rounded-full shadow-custom p-4 bg-[#D54000]" onclick="scrollToTop()" id="scrollToTop" title="Scroll to top"><%s! Icons.arrow_up "h-6 w-6"%></button>
+
       <%s! footer_html %>
+
+      <script>
+          function scrollToTop() {
+            window.scrollTo(0, 0);
+          }
+
+          window.onscroll = function() {
+            showScrollButton();
+          };
+
+          function showScrollButton() {
+            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+              document.getElementById("scrollToTop").style.display = "block";
+            } else {
+              document.getElementById("scrollToTop").style.display = "none";
+            }
+          }
+      </script>
     </body>
   </html>
 
-let render = base ~footer_html:(Footer.render ())
+let render = base ~footer_html:(Footer.render ())
diff --git a/src/ocamlorg_frontend/layouts/learn_layout.eml b/src/ocamlorg_frontend/layouts/learn_layout.eml
@@ -146,10 +146,9 @@ inner_html
   <%s! tabs ~current %>
   <div class="bg-default dark:bg-dark-default" x-data="{ sidebar: window.matchMedia('(min-width: 64em)').matches, showOnMobile: false}" @resize.window="sidebar = window.matchMedia('(min-width: 64em)').matches"  x-on:close-sidebar="sidebar=window.matchMedia('(min-width: 64em)').matches">
   <% if left_sidebar_html != None then ( %>  
-    <button :title='(sidebar? "close" : "open")+" sidebar"' class="flex items-center bg-primary-600 p-3 z-30 rounded-full text-white shadow-md bottom-20 fixed lg:hidden right-10"
+    <button :title='(sidebar? "close" : "open")+" sidebar"' class="flex items-center bg-[#D54000] p-4 z-30 rounded-full text-white shadow-custom bottom-24 md:bottom-36 fixed lg:hidden right-10"
       x-on:click="sidebar = ! sidebar">
-      <%s! Icons.sidebar_menu "h-8 w-8" %>
-      <span class="hidden md:flex font-semibold px-2">side menu</span>
+      <%s! Icons.sidebar_menu "h-6 w-6" %>
     </button>
     <div class="fixed z-10 inset-0 bg-contrast/20 backdrop-blur-sm lg:hidden"
       :class='sidebar ? "" : "hidden"' aria-hidden="true" x-on:click="sidebar = ! sidebar"></div>

diff --git a/src/ocamlorg_frontend/layouts/package_layout.eml b/src/ocamlorg_frontend/layouts/package_layout.eml
@@ -36,18 +36,17 @@ Layout.base
           <%s! Package_breadcrumbs.render_package_and_version ~path ?hash ?page package %>
         </div>
       </div>
-      <button :title='(sidebar? "close" : "open")+" sidebar"' class="flex items-center bg-primary-600 p-3 z-30 rounded-full text-white shadow-md bottom-20 fixed md:hidden right-10"
+      <button :title='(sidebar? "close" : "open")+" sidebar"' class="flex items-center bg-[#D54000] p-4 z-30 rounded-full text-white shadow-custom bottom-24 md:bottom-36 fixed md:hidden right-10"
       x-on:click="sidebar = ! sidebar">
-        <%s! Icons.sidebar_menu "h-8 w-8" %>
-        <span class="hidden md:flex font-semibold px-2">side menu</span>
+        <%s! Icons.sidebar_menu "h-6 w-6" %>
       </button>
       <div class="fixed z-10 inset-0 bg-contrast/20 backdrop-blur-sm md:hidden"
         :class='sidebar ? "" : "hidden"' aria-hidden="true" x-on:click="sidebar = ! sidebar">
       </div>
 
-      <button title="search" class="flex items-center bg-primary-600 p-3 z-30 rounded-full text-white shadow-md bottom-36 fixed right-10 md:hidden"
+      <button title="search" class="flex items-center bg-[#D54000] p-4 z-30 rounded-full text-white shadow-custom bottom-40 fixed right-10 md:hidden"
       x-on:click="document.getElementById('in-package-search-input').focus();">
-        <%s! Icons.magnifying_glass "h-8 w-8" %>
+        <%s! Icons.magnifying_glass "h-6 w-6" %>
         <span class="hidden md:flex font-semibold px-2">search</span>
       </button>
 

diff --git a/src/ocamlorg_frontend/pages/home.eml b/src/ocamlorg_frontend/pages/home.eml
@@ -143,7 +143,7 @@ Layout.render
 <div class="bg-default dark:bg-dark-default">
   <div class="container-fluid">
     <h2 class="font-bold text-center text-default pt-12">Why OCaml?</h2>
-    <div class="py-24 lg:pt-24 space-y-20 md:space-y-40">
+    <div class="pt-4 pb-24 lg:pt-24 space-y-20 md:space-y-40">
       <div class="flex gap-10 lg:gap-24 flex-col lg:flex-row-reverse justify-between items-center">
         <div class="lg:flex-1 mt-10 lg:mt-0">
           <div class="text-lighter text-base">

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -149,6 +149,9 @@ module.exports = {
           600: "#1A202C",
         },
       },
+      boxShadow: {
+        'custom': '0 4px 8px rgba(213, 64, 0, 0.5)'
+      }
     },
   },
   plugins: [