From be0faaa36ea0f4b4c8c913fd6f864d24fea2dbe3 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sat, 5 Oct 2024 17:52:38 -0700
Subject: [PATCH] Improve top nav support on mobile for responsive design pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this change, pages that opt in with `use_responsive_design`
would often have the top nav be real cluttered for logged-in users. (I
think I happened to first test this responsive design without being
logged in on my dev box, oops!) Because the home link and `#userbar`
were absolutely positioned on the page, they would frequently overlap.

Here, I stop doing our old tricks to make the top nav load last on the
page. (This was to get "main content" loading faster, which I think is
a. not as relevant today with more commonly faster connections, and b.
was a bit naive to think that it'd be helpful to have to wait a long
time to _navigate_ if a page is unexpectedly large.)

These tricks used to leave some padding at the top of the `#container`,
which these elements would then visually fill via `position: absolute`
once they load.

Next, I update the CSS (for the responsive design pages only) to use
the new `#main-nav` container to lay them out in Flexbox: all in one
row if possible, or wrapped if needed.

Some designs hide stuff like this into a hamburger menu or such when
the screen gets small. I haven't done that here! No specific reason,
I'm just not sold that it's that much better, or worth the trouble.

I tested this on the following combinations:
1. Logged out, homepage
2. Logged in, homepage
3. Logged out, `/items`
4. Logged in, `/items`
5. Logged out, `/items/89487-Dyeworks-Purple-Haunted-Sky-Background`
6. Logged in, `/items/89487-Dyeworks-Purple-Haunted-Sky-Background`

Hope it's solid! 🤞
---
 app/assets/stylesheets/_responsive.sass | 16 ++++++++--
 app/views/layouts/application.html.haml | 39 +++++++++++++------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/_responsive.sass b/app/assets/stylesheets/_responsive.sass
index 5d8e7c57..b9eaadb9 100644
--- a/app/assets/stylesheets/_responsive.sass
+++ b/app/assets/stylesheets/_responsive.sass
@@ -3,10 +3,20 @@ body.use-responsive-design
         max-width: 100%
         padding-inline: 1rem
         box-sizing: border-box
+        padding-top: 0
+
+    #main-nav
+        display: flex
+        flex-wrap: wrap
+
+    #home-link, #userbar
+        position: static
 
     #home-link
-        margin-left: 1rem
-        padding-inline: 0
+        padding-inline: .5rem
+        margin-inline: -.5rem
+        margin-right: auto
 
     #userbar
-        margin-right: 1rem
+        margin-left: auto
+        text-align: right
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 37d219f5..4fca8fda 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -29,6 +29,26 @@
     = render 'analytics'
   %body{:class => body_class}
     #container
+      %nav#main-nav
+        - if home_link?
+          %a#home-link{:href => root_path}
+            %span= t 'app_name'
+
+        #userbar
+          - if user_signed_in?
+            %span
+              = t '.userbar.greeting', :user_name => current_user.name
+              = userbar_contributions_summary(current_user)
+            = link_to t('.userbar.items'), user_closet_hangers_path(current_user), :id => 'userbar-items-link'
+            = link_to t('.userbar.outfits'), current_user_outfits_path
+            = link_to t('.userbar.settings'), edit_auth_user_path
+            = button_to t('.userbar.logout'), destroy_auth_user_session_path, method: :delete,
+              params: {return_to: request.fullpath}
+          - else
+            = link_to auth_user_sign_in_path_with_return_to,
+              id: 'userbar-log-in', "data-turbo-prefetch": false do
+              %span= t('.userbar.login')
+
       = yield :before_title
       = render 'announcement'
       - if content_for?(:title) && show_title_header?
@@ -41,25 +61,6 @@
       - else
         = yield
 
-      - if home_link?
-        %a#home-link{:href => root_path}
-          %span= t 'app_name'
-
-      #userbar
-        - if user_signed_in?
-          %span
-            = t '.userbar.greeting', :user_name => current_user.name
-            = userbar_contributions_summary(current_user)
-          = link_to t('.userbar.items'), user_closet_hangers_path(current_user), :id => 'userbar-items-link'
-          = link_to t('.userbar.outfits'), current_user_outfits_path
-          = link_to t('.userbar.settings'), edit_auth_user_path
-          = button_to t('.userbar.logout'), destroy_auth_user_session_path, method: :delete,
-            params: {return_to: request.fullpath}
-        - else
-          = link_to auth_user_sign_in_path_with_return_to,
-            id: 'userbar-log-in', "data-turbo-prefetch": false do
-            %span= t('.userbar.login')
-
       #footer
         = form_tag choose_locale_path, :id => 'locale-form' do
           = hidden_field_tag 'return_to', request.fullpath