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,18 +29,7 @@
= render 'analytics' = render 'analytics'
%body{:class => body_class} %body{:class => body_class}
#container #container
= yield :before_title %nav#main-nav
= render 'announcement'
- if content_for?(:title) && show_title_header?
%h1#title= yield :title
= yield :before_flashes
= flashes
- if content_for? :content
= yield(:content)
- else
= yield
- if home_link? - if home_link?
%a#home-link{:href => root_path} %a#home-link{:href => root_path}
%span= t 'app_name' %span= t 'app_name'
@ -60,6 +49,18 @@
id: 'userbar-log-in', "data-turbo-prefetch": false do id: 'userbar-log-in', "data-turbo-prefetch": false do
%span= t('.userbar.login') %span= t('.userbar.login')
= yield :before_title
= render 'announcement'
- if content_for?(:title) && show_title_header?
%h1#title= yield :title
= yield :before_flashes
= flashes
- if content_for? :content
= yield(:content)
- else
= yield
#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