Improve top nav support on mobile for responsive design pages

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! 🤞
This commit is contained in:
Emi Matchu 2024-10-05 17:52:38 -07:00
parent f87f4e61b3
commit be0faaa36e
2 changed files with 33 additions and 22 deletions

View file

@ -3,10 +3,20 @@ body.use-responsive-design
max-width: 100% max-width: 100%
padding-inline: 1rem padding-inline: 1rem
box-sizing: border-box box-sizing: border-box
padding-top: 0
#main-nav
display: flex
flex-wrap: wrap
#home-link, #userbar
position: static
#home-link #home-link
margin-left: 1rem padding-inline: .5rem
padding-inline: 0 margin-inline: -.5rem
margin-right: auto
#userbar #userbar
margin-right: 1rem margin-left: auto
text-align: right

View file

@ -29,6 +29,26 @@
= render 'analytics' = render 'analytics'
%body{:class => body_class} %body{:class => body_class}
#container #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 = yield :before_title
= render 'announcement' = render 'announcement'
- if content_for?(:title) && show_title_header? - if content_for?(:title) && show_title_header?
@ -41,25 +61,6 @@
- else - else
= yield = 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 #footer
= form_tag choose_locale_path, :id => 'locale-form' do = form_tag choose_locale_path, :id => 'locale-form' do
= hidden_field_tag 'return_to', request.fullpath = hidden_field_tag 'return_to', request.fullpath