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:
parent
f87f4e61b3
commit
be0faaa36e
2 changed files with 33 additions and 22 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue