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:
parent
77ff55353c
commit
6dd8e585a3
8 changed files with 39 additions and 6 deletions
|
@ -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
|
||||||
|
|
12
app/assets/stylesheets/_responsive.sass
Normal file
12
app/assets/stylesheets/_responsive.sass
Normal 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
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue