Add responsive layout for item page

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!
This commit is contained in:
Emi Matchu 2024-09-05 16:18:48 -07:00
parent 77ff55353c
commit 6dd8e585a3
8 changed files with 39 additions and 6 deletions

View file

@ -5,9 +5,15 @@ body.items-index, body.items-show, body.items-needed, body.item_trades
text-align: center
.item-search-form
display: flex
gap: .5em
justify-content: center
input[type=text]
font-size: 125%
width: 15em
flex: 0 1 auto
h1
margin-bottom: 1em

View file

@ -0,0 +1,12 @@
body.use-responsive-design
#container
max-width: 100%
padding-inline: 1rem
box-sizing: border-box
#home-link
margin-left: 1rem
padding-inline: 0
#userbar
margin-right: 1rem

View file

@ -4,6 +4,7 @@
@import partials/clean/mixins
@import layout
@import responsive
@import partials/jquery.jgrowl

View file

@ -35,6 +35,7 @@
text-align: left
display: flex
align-items: center
flex-wrap: wrap
gap: 1em
abbr
@ -127,6 +128,7 @@
.item-subpages-nav
display: flex
align-items: flex-end
gap: 1em
.preview-link
margin-right: auto

View file

@ -231,6 +231,15 @@ module ApplicationHelper
@hide_title_header = true
end
def use_responsive_design
@use_responsive_design = true
add_body_class "use-responsive-design"
end
def use_responsive_design?
@use_responsive_design || false
end
def signed_in_meta_tag
%(<meta name="user-signed-in" content="#{user_signed_in?}">).html_safe
end

View file

@ -1,5 +1,6 @@
- title @item.name
- canonical_path @item
- use_responsive_design
= render partial: "item_header",
locals: {item: @item, trades: @trades, current_subpage: "preview",

View file

@ -13,6 +13,8 @@
%link{href: image_path('favicon.png'), rel: 'icon'}
= yield :stylesheets
= stylesheet_link_tag "application"
- if use_responsive_design?
%meta{name: "viewport", content: "width=device-width, initial-scale=1"}
= yield :meta
= open_graph_tags
= csrf_meta_tag

View file

@ -7,7 +7,7 @@
= image_tag 'https://images.neopets.com/items/mall_floatingneggfaerie.gif'
%span= t 'infinite_closet'
- content_for :content do
= form_tag items_path, :method => :get do
= form_tag items_path, method: :get, class: "item-search-form" do
= text_field_tag :q, @query.to_s
= submit_tag t('.search'), :name => nil
= yield