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 text-align: center
input[type=text] .item-search-form
font-size: 125% display: flex
width: 15em gap: .5em
justify-content: center
input[type=text]
font-size: 125%
width: 15em
flex: 0 1 auto
h1 h1
margin-bottom: 1em 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 partials/clean/mixins
@import layout @import layout
@import responsive
@import partials/jquery.jgrowl @import partials/jquery.jgrowl

View file

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

View file

@ -231,6 +231,15 @@ module ApplicationHelper
@hide_title_header = true @hide_title_header = true
end 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 def signed_in_meta_tag
%(<meta name="user-signed-in" content="#{user_signed_in?}">).html_safe %(<meta name="user-signed-in" content="#{user_signed_in?}">).html_safe
end end

View file

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

View file

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

View file

@ -7,7 +7,7 @@
= image_tag 'https://images.neopets.com/items/mall_floatingneggfaerie.gif' = image_tag 'https://images.neopets.com/items/mall_floatingneggfaerie.gif'
%span= t 'infinite_closet' %span= t 'infinite_closet'
- content_for :content do - 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 = text_field_tag :q, @query.to_s
= submit_tag t('.search'), :name => nil = submit_tag t('.search'), :name => nil
= yield = yield