Emi Matchu
be0faaa36e
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! 🤞
88 lines
3.1 KiB
Text
88 lines
3.1 KiB
Text
!!! 5
|
|
%html
|
|
%head
|
|
%meta{charset: 'utf-8'}
|
|
%title
|
|
- if content_for? :title
|
|
= yield :title
|
|
|
|
|
- if content_for? :title_category
|
|
= yield :title_category
|
|
- else
|
|
#{t 'app_name'}: #{t '.title_tagline'}
|
|
%link{href: image_path('favicon.png'), rel: 'icon'}
|
|
= stylesheet_link_tag "application"
|
|
= stylesheet_link_tag "fonts"
|
|
= yield :stylesheets
|
|
- if use_responsive_design?
|
|
%meta{name: "viewport", content: "width=device-width, initial-scale=1"}
|
|
= yield :meta
|
|
= open_graph_tags
|
|
= csrf_meta_tag
|
|
= impress_2020_meta_tags
|
|
= signed_in_meta_tag
|
|
- if user_signed_in?
|
|
= current_user_id_meta_tag
|
|
= javascript_include_tag 'application', defer: true
|
|
= yield :javascripts
|
|
= yield :head
|
|
= 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?
|
|
%h1#title= yield :title
|
|
= yield :before_flashes
|
|
= flashes
|
|
|
|
- if content_for? :content
|
|
= yield(:content)
|
|
- else
|
|
= yield
|
|
|
|
#footer
|
|
= form_tag choose_locale_path, :id => 'locale-form' do
|
|
= hidden_field_tag 'return_to', request.fullpath
|
|
= select_tag 'locale', options_for_select(locale_options, locale)
|
|
%noscript= submit_tag 'Go'
|
|
|
|
%ul
|
|
%li= link_to t('.footer.source_code'), 'https://code.openneo.net/OpenNeo/impress'
|
|
%li.terms{"data-updated-recently": terms_updated_recently }
|
|
= link_to t('.footer.terms', date: terms_updated_timestamp),
|
|
terms_path
|
|
%li= link_to t('.footer.blog'), "https://blog.openneo.net/"
|
|
|
|
%div
|
|
#{t('.footer.contact')}:
|
|
%ul
|
|
%li= mail_to contact_email, t('.footer.email')
|
|
|
|
%p= t '.footer.copyright', :year => Date.today.year
|
|
|
|
-# For scripts that expect to get to just execute once every time the page
|
|
-# loads. For future JS, it would be advisable to write it such that it's
|
|
-# okay for Turbo to run it once at the start of the page, then listen to
|
|
-# `turbo:load` events or use inline scripts to actually _do_ things.
|
|
= yield :javascripts_body
|