Use CSS grid instead of floats for item page info
I'm planning to mess with this layout a bit, I don't want floats getting in my way!
This commit is contained in:
parent
e8db9cf729
commit
b84942d77c
2 changed files with 149 additions and 134 deletions
|
|
@ -16,17 +16,20 @@ body.items-show
|
||||||
|
|
||||||
#item-thumbnail
|
#item-thumbnail
|
||||||
grid-area: img
|
grid-area: img
|
||||||
|
|
||||||
border: 1px solid $module-border-color
|
border: 1px solid $module-border-color
|
||||||
height: 80px
|
height: 80px
|
||||||
width: 80px
|
width: 80px
|
||||||
|
|
||||||
#item-name
|
#item-name
|
||||||
grid-area: name
|
grid-area: name
|
||||||
|
|
||||||
text-align: left
|
text-align: left
|
||||||
line-height: 100%
|
line-height: 100%
|
||||||
|
|
||||||
#item-links
|
#item-links
|
||||||
grid-area: links
|
grid-area: links
|
||||||
|
|
||||||
text-align: left
|
text-align: left
|
||||||
a
|
a
|
||||||
font-size: 75%
|
font-size: 75%
|
||||||
|
|
@ -35,56 +38,111 @@ body.items-show
|
||||||
#item-name
|
#item-name
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
||||||
#item-zones
|
#item-info-section
|
||||||
font:
|
display: grid
|
||||||
family: $text-font
|
|
||||||
size: 85%
|
|
||||||
margin-bottom: 1em
|
|
||||||
|
|
||||||
p
|
grid-template-areas: "info form"
|
||||||
display: inline
|
grid-template-columns: 1fr auto
|
||||||
|
|
||||||
&:first-child
|
#item-info
|
||||||
margin-right: 1em
|
grid-area: info
|
||||||
|
|
||||||
#trade-hangers
|
#item-zones
|
||||||
font-size: 85%
|
font:
|
||||||
margin-bottom: 3em
|
family: $text-font
|
||||||
text-align: left
|
size: 85%
|
||||||
|
margin-bottom: 1em
|
||||||
|
|
||||||
p
|
p
|
||||||
|
display: inline
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
margin-right: 1em
|
||||||
|
|
||||||
|
#your-items-form
|
||||||
|
grid-area: form
|
||||||
|
|
||||||
|
border: 1px solid $module-border-color
|
||||||
|
font-size: 85%
|
||||||
|
margin-bottom: 3em
|
||||||
|
margin-left: 1em
|
||||||
|
padding: 1em
|
||||||
|
width: 30em
|
||||||
|
|
||||||
|
// compete with #trade-hangers
|
||||||
position: relative
|
position: relative
|
||||||
|
z-index: 2
|
||||||
|
|
||||||
&:first-child
|
h3
|
||||||
|
font-size: 150%
|
||||||
|
font-weight: bold
|
||||||
|
margin-bottom: .25em
|
||||||
|
|
||||||
|
#closet-hangers-ownership-groups
|
||||||
|
+clearfix
|
||||||
margin-bottom: .5em
|
margin-bottom: .5em
|
||||||
|
|
||||||
&.overflows
|
div
|
||||||
.toggle
|
float: left
|
||||||
display: block
|
margin: 0 5%
|
||||||
|
text-align: left
|
||||||
|
width: 40%
|
||||||
|
|
||||||
&.showing-more
|
li
|
||||||
.toggle
|
list-style: none
|
||||||
.less
|
word-wrap: break-word
|
||||||
|
|
||||||
|
label.unlisted
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
form
|
||||||
|
padding: .5em 0
|
||||||
|
|
||||||
|
select
|
||||||
|
width: 9em
|
||||||
|
|
||||||
|
input[type=number]
|
||||||
|
margin-right: .5em
|
||||||
|
width: 3em
|
||||||
|
|
||||||
|
#trade-hangers
|
||||||
|
font-size: 85%
|
||||||
|
margin-bottom: 3em
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
p
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
margin-bottom: .5em
|
||||||
|
|
||||||
|
&.overflows
|
||||||
|
.toggle
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
.more
|
&.showing-more
|
||||||
display: none
|
.toggle
|
||||||
|
.less
|
||||||
|
display: block
|
||||||
|
|
||||||
.toggle
|
.more
|
||||||
background: white
|
display: none
|
||||||
bottom: 0
|
|
||||||
cursor: pointer
|
|
||||||
display: none
|
|
||||||
font-family: $main-font
|
|
||||||
padding: 0 1em
|
|
||||||
position: absolute
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
&:hover
|
.toggle
|
||||||
text-decoration: underline
|
background: white
|
||||||
|
bottom: 0
|
||||||
.less
|
cursor: pointer
|
||||||
display: none
|
display: none
|
||||||
|
font-family: $main-font
|
||||||
|
padding: 0 1em
|
||||||
|
position: absolute
|
||||||
|
right: 0
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
.less
|
||||||
|
display: none
|
||||||
|
|
||||||
#item-contributors
|
#item-contributors
|
||||||
+subtle-banner
|
+subtle-banner
|
||||||
|
|
@ -112,51 +170,6 @@ body.items-show
|
||||||
height: 16px
|
height: 16px
|
||||||
width: 16px
|
width: 16px
|
||||||
|
|
||||||
#closet-hangers
|
|
||||||
border: 1px solid $module-border-color
|
|
||||||
float: right
|
|
||||||
font-size: 85%
|
|
||||||
margin-bottom: 3em
|
|
||||||
margin-left: 1em
|
|
||||||
padding: 1em
|
|
||||||
width: 30em
|
|
||||||
|
|
||||||
// compete with #trade-hangers
|
|
||||||
position: relative
|
|
||||||
z-index: 2
|
|
||||||
|
|
||||||
h3
|
|
||||||
font-size: 150%
|
|
||||||
font-weight: bold
|
|
||||||
margin-bottom: .25em
|
|
||||||
|
|
||||||
#closet-hangers-ownership-groups
|
|
||||||
+clearfix
|
|
||||||
margin-bottom: .5em
|
|
||||||
|
|
||||||
div
|
|
||||||
float: left
|
|
||||||
margin: 0 5%
|
|
||||||
text-align: left
|
|
||||||
width: 40%
|
|
||||||
|
|
||||||
li
|
|
||||||
list-style: none
|
|
||||||
word-wrap: break-word
|
|
||||||
|
|
||||||
label.unlisted
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
form
|
|
||||||
padding: .5em 0
|
|
||||||
|
|
||||||
select
|
|
||||||
width: 9em
|
|
||||||
|
|
||||||
input[type=number]
|
|
||||||
margin-right: .5em
|
|
||||||
width: 3em
|
|
||||||
|
|
||||||
&.js
|
&.js
|
||||||
#trade-hangers
|
#trade-hangers
|
||||||
p
|
p
|
||||||
|
|
|
||||||
|
|
@ -19,59 +19,61 @@
|
||||||
= link_to t('.resources.trading_post'), trading_post_url_for(@item)
|
= link_to t('.resources.trading_post'), trading_post_url_for(@item)
|
||||||
= link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
|
= link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
|
||||||
|
|
||||||
- if user_signed_in?
|
%section#item-info-section
|
||||||
#closet-hangers
|
#item-info
|
||||||
%h3
|
%p= @item.description
|
||||||
= t '.closet_hangers.header_html',
|
|
||||||
:user_items_link => link_to(t('your_items'),
|
#item-zones
|
||||||
user_closet_hangers_path(current_user))
|
%p
|
||||||
= form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
|
%strong #{t '.zones.occupied_header'}:
|
||||||
#closet-hangers-ownership-groups
|
= list_zones @occupied_zones, :uncertain_label
|
||||||
- @current_user_lists.each do |owned, lists|
|
%p
|
||||||
%div
|
%strong #{t '.zones.restricted_header'}:
|
||||||
%h4= closet_lists_group_name(:you, owned)
|
- if @restricted_zones.empty?
|
||||||
%ul
|
= t '.zones.none'
|
||||||
- lists.each do |list|
|
- else
|
||||||
|
= list_zones @restricted_zones
|
||||||
|
|
||||||
|
#trade-hangers
|
||||||
|
- [true, false].each do |owned|
|
||||||
|
%p
|
||||||
|
%strong
|
||||||
|
= trading_closet_hangers_header(owned, @trading_closet_hangers_by_owned[owned].size)
|
||||||
|
= render_trading_closet_hangers(owned)
|
||||||
|
%span.toggle
|
||||||
|
%span.more= t '.trading_closet_hangers.show_more'
|
||||||
|
%span.less= t '.trading_closet_hangers.show_less'
|
||||||
|
|
||||||
|
- if user_signed_in?
|
||||||
|
#your-items-form
|
||||||
|
%h3
|
||||||
|
= t '.closet_hangers.header_html',
|
||||||
|
:user_items_link => link_to(t('your_items'),
|
||||||
|
user_closet_hangers_path(current_user))
|
||||||
|
= form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
|
||||||
|
#closet-hangers-ownership-groups
|
||||||
|
- @current_user_lists.each do |owned, lists|
|
||||||
|
%div
|
||||||
|
%h4= closet_lists_group_name(:you, owned)
|
||||||
|
%ul
|
||||||
|
- lists.each do |list|
|
||||||
|
%li
|
||||||
|
= number_field_tag "quantity[#{list.id}]",
|
||||||
|
@current_user_quantities[list.id], :min => 0
|
||||||
|
= label_tag "quantity[#{list.id}]", list.name
|
||||||
|
|
||||||
%li
|
%li
|
||||||
= number_field_tag "quantity[#{list.id}]",
|
= number_field_tag "quantity[#{owned}]",
|
||||||
@current_user_quantities[list.id], :min => 0
|
@current_user_quantities[owned], :min => 0
|
||||||
= label_tag "quantity[#{list.id}]", list.name
|
|
||||||
|
|
||||||
%li
|
- unless lists.empty?
|
||||||
= number_field_tag "quantity[#{owned}]",
|
= label_tag "quantity[#{owned}]",
|
||||||
@current_user_quantities[owned], :min => 0
|
t('closet_lists.unlisted_name'),
|
||||||
|
:class => 'unlisted'
|
||||||
- unless lists.empty?
|
- else
|
||||||
= label_tag "quantity[#{owned}]",
|
= label_tag "quantity[#{owned}]",
|
||||||
t('closet_lists.unlisted_name'),
|
t('.closet_hangers.quantity_label')
|
||||||
:class => 'unlisted'
|
= submit_tag t('.closet_hangers.submit')
|
||||||
- else
|
|
||||||
= label_tag "quantity[#{owned}]",
|
|
||||||
t('.closet_hangers.quantity_label')
|
|
||||||
= submit_tag t('.closet_hangers.submit')
|
|
||||||
|
|
||||||
%p= @item.description
|
|
||||||
|
|
||||||
#item-zones
|
|
||||||
%p
|
|
||||||
%strong #{t '.zones.occupied_header'}:
|
|
||||||
= list_zones @occupied_zones, :uncertain_label
|
|
||||||
%p
|
|
||||||
%strong #{t '.zones.restricted_header'}:
|
|
||||||
- if @restricted_zones.empty?
|
|
||||||
= t '.zones.none'
|
|
||||||
- else
|
|
||||||
= list_zones @restricted_zones
|
|
||||||
|
|
||||||
#trade-hangers
|
|
||||||
- [true, false].each do |owned|
|
|
||||||
%p
|
|
||||||
%strong
|
|
||||||
= trading_closet_hangers_header(owned, @trading_closet_hangers_by_owned[owned].size)
|
|
||||||
= render_trading_closet_hangers(owned)
|
|
||||||
%span.toggle
|
|
||||||
%span.more= t '.trading_closet_hangers.show_more'
|
|
||||||
%span.less= t '.trading_closet_hangers.show_less'
|
|
||||||
|
|
||||||
#outfit-preview-root{'data-item-id': @item.id}
|
#outfit-preview-root{'data-item-id': @item.id}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue