Mobile/responsive optimizations (#16)

* Mobile/responsive optimizations * fix: conflict * Update app/views/layouts/application.html.erb Co-authored-by: Josh Brown <[email protected]> * rewrite * optimize alphabetical navigation * chore: lint --------- Co-authored-by: Josh Pigford <[email protected]> Co-authored-by: Josh Brown <[email protected]>
maybe-finance · May 3, 2024 · 77d3bfb · 77d3bfb
1 parent 8120ef9
commit 77d3bfb
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 15 deletions.
diff --git a/app/assets/images/icon-hamburger.svg b/app/assets/images/icon-hamburger.svg
diff --git a/app/javascript/controllers/navbar_controller.js b/app/javascript/controllers/navbar_controller.js
@@ -0,0 +1,6 @@
+const navToggle = document.getElementById('nav-toggle');
+const mobileMenu = document.getElementById('mobile-menu');
+
+navToggle.addEventListener('click', () => {
+    mobileMenu.classList.toggle('hidden');
+});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -25,34 +25,52 @@
   </head>
 
   <body class="min-h-screen bg-gradient-to-b from-gray-25 to-gray-50">
-    <header class="flex items-center justify-between py-5 px-7">
+    <header class="flex items-center justify-between py-5 px-7 flex-wrap">
       <div class="flex items-center gap-x-3">
         <%= link_to image_tag("logo.svg", alt: "Maybe Logo", class: "h-6"), root_path %>
         <span class="px-1.5 py-0.5 text-[0.1em] uppercase bg-white border rounded-full border-gray-200/75 text-gray-500">Early Access</span>
       </div>
-      <nav class="flex-1 text-sm text-center gap-x-1">
+      <nav class="flex-1 text-sm text-center gap-x-1 hidden md:flex">
         <%= link_to "Articles", articles_path, class: "px-3 py-1.5 text-gray-800 hover:text-gray-900 hover:bg-alpha-black-50 rounded-xl" %>
         <%= link_to "Financial Terms", terms_path, class: "px-3 py-1.5 text-gray-800 hover:text-gray-900 hover:bg-alpha-black-50 rounded-xl" %>
         <a href="https://github.com/maybe-finance/maybe" class="px-3 py-1.5 text-gray-800 hover:text-gray-9000 hover:bg-alpha-black-50 rounded-xl">Contribute</a>
       </nav>
-      <div class="flex gap-x-2">
+      <div class="flex gap-x-2 hidden md:flex">
         <%= link_to "https://github.com/maybe-finance/maybe", class: "px-3 py-[0.45rem] text-sm font-medium text-black rounded-xl hover:bg-alpha-black-50 bg-transparent border border-gray-300 hover:border-gray-300 flex items-center gap-2" do %>
           <%= image_tag("icon-github.svg", alt: "GitHub icon", class: "h-4 w-4") %> Self-Host
         <% end %>
         <%= link_to "Join waitlist", "/#waitlist", class: "px-3 py-[0.45rem] text-sm font-medium text-white bg-gray-900 rounded-xl hover:bg-gray-800 border border-gray-900" %>
       </div>
+      <%= lucide_icon("menu", alt: "Menu", class: "w-6 h-6 md:hidden", id: "nav-toggle") %>
+       <div class="w-full flex flex-col mt-4 font-medium hidden md:hidden" id="mobile-menu">
+         <ul class="flex flex-col lg:flex-row lg:space-x-8">
+           <li><%= link_to "Articles", articles_path, class: "block px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %></li>
+           <li><%= link_to "Financial Terms", terms_path, class: "block px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl" %></li>
+           <li><a href="https://github.com/maybe-finance/maybe" class="block px-3 py-1.5 text-neutral-800 hover:text-neutral-900 hover:bg-neutral-200/60 rounded-xl">Contribute</a></li>
+           <div class="flex flex-col gap-y-3">
+            <li>
+             <%= link_to "https://github.com/maybe-finance/maybe", class: "px-3 py-[0.45rem] text-sm font-medium text-black rounded-xl hover:bg-alpha-black-50 bg-transparent border border-gray-300 hover:border-gray-300 flex items-center gap-2" do %>
+               <%= image_tag("icon-github.svg", alt: "GitHub icon", class: "h-4 w-4") %> Self-Host
+             <% end %>
+            </li>
+            <li>
+              <%= link_to "Join waitlist", "/#waitlist", class: "px-3 py-[0.45rem] text-sm font-medium text-white bg-gray-900 rounded-xl hover:bg-gray-800 border border-gray-900 flex w-full" %>
+            </li>
+           </div>
+         </ul>
+       </div>
     </header>
-    <main class="max-w-5xl mx-auto my-10">
+    <main class="max-w-5xl mx-auto my-10 px-3 md:px-0">
       <%= yield %>
     </main>
-    <footer class="max-w-5xl mx-auto my-8">
-      <div class="flex justify-between gap-x-4">
+    <footer class="max-w-5xl mx-auto my-8 p-6 md:p-0">
+      <div class="flex flex-col justify-between gap-x-4 md:flex-row">
         <div class="flex flex-col gap-y-3 max-w-96">
           <div><%= link_to image_tag("icon-logo.svg", alt: "Maybe Logo", class: "w-12 inline"), root_path %></div>
           <p class="text-sm text-gray-500">Join the waitlist to get notified when a hosted version of the app is available.</p>
           <%= render_signup_form %>
         </div>
-        <div class="flex text-sm leading-6 text-gray-500 gap-x-10">
+        <div class="flex flex-col text-sm leading-6 text-gray-500 gap-x-10 md:flex-row">
           <div>
             <h4 class="mb-4 text-xs font-medium uppercase">General</h4>
             <ul>
@@ -100,7 +118,7 @@
           </div>
         </div>
       </div>
-      <div class="flex justify-between mt-12 text-sm text-gray-500">
+      <div class="flex flex-col justify-between mt-12 text-sm text-gray-500 text-center md:flex-row md:text-left">
         <p class="">© <%= Time.now.year %> Maybe Finance, Inc.</p>
         <p class="">Made with ❤️ on planet Earth.</p>
     </footer>

diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
@@ -1,13 +1,13 @@
 <div class="text-center">
-  <div class="max-w-xl pt-8 mx-auto mb-4 text-3xl">
-    Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> is a <em class="relative"><span class="border-b-2 border-gray-400 border-dotted">fully</span><sup>*</sup> <span class="absolute w-64 text-xs text-left text-gray-400 left-16 -top-7 -rotate-3"><sup>*</sup>your finances are secure</span></em> open-source
-    <div class="inline-flex border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] border-gray-200">
+  <div class="max-w-xl pt-8 mx-auto mb-4 text-[28px] md:text-3xl ">
+    Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline w-8 md:w-auto") %> is a <em class="relative"><span class="border-b-2 border-gray-400 border-dotted">fully</span><sup>*</sup> <span class="absolute w-40 md:w-64 text-xs text-left text-gray-400 left-2 -top-8 md:left-16 md:-top-7 -rotate-3"><sup>*</sup>your finances are secure</span></em> open-source
+    <div class="inline-flex border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] border-gray-200 scale-[0.8] md:scale-100">
       <%= link_to "https://github.com/maybe-finance/maybe", class: "px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] bg-gray-100 rounded-l-md border-gray-200 flex items-center justify-center" do %>
         <%= image_tag("icon-github.svg", alt: "GitHub icon", class: "h-5 w-5") %>
       <% end %>
       <span class="px-2 py-1.5 text-sm font-medium bg-white shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] rounded-r-md"><%= number_to_human(@stars, format: "%n%u", units: { thousand: "k" }) %></span>
     </div>
-    OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %>
+    OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline w-8 md:w-auto") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-8 md:h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline w-8 md:w-auto") %>
   </div>
   <div class="mx-auto max-w-96" id="waitlist">
     <%= render_signup_form %>

diff --git a/app/views/terms/index.html.erb b/app/views/terms/index.html.erb
@@ -23,11 +23,11 @@
     </div>
   </div>
 
-  <div class="flex gap-1 pt-7 sticky top-0 bg-[#f9f9f9]">
+  <div class="flex gap-1 pt-7 sticky top-0 bg-[#f9f9f9] overflow-x-auto md:overflow-x-visible whitespace-nowrap md:whitespace-normal" style="scrollbar-width: none;">
     <% dict_groups.each do |group| %>
       <a
         href="#<%= group.delete " " %>"
-        class="grid flex-1 px-1 py-2 text-sm font-medium text-gray-500 border border-transparent place-items-center hover:bg-white hover:border-gray-100 hover:shadow-xs hover:text-gray-900 target:bg-white rounded-xl"
+        class="inline-block text-md md:text-sm md:grid flex-1 px-1 py-2 font-medium text-gray-500 border border-transparent place-items-center hover:bg-white hover:border-gray-100 hover:shadow-xs hover:text-gray-900 target:bg-white rounded-xl"
         data-section-links-target="link">
         <%= group %>
       </a>
@@ -45,7 +45,7 @@
       <div id="<%= group.delete " " %>" class="py-12 border-b last:border-b-0 scroll-mt-10" data-section-links-target="section">
         <h2 class="px-2 text-2xl font-medium tracking-tight"><%= group %></h2>
 
-        <div class="gap-4 mt-6 space-y-1 columns-4">
+        <div class="gap-4 mt-6 space-y-1 columns-2 md:columns-4">
           <% terms.each do |term| %>
             <%= link_to term.name, term_path(term), class: "block p-2 hover:bg-alpha-black-50 rounded-lg" %>
           <% end %>