OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Use CSS grid instead of floats for item page info

Browse source 
I'm planning to mess with this layout a bit, I don't want floats
getting in my way!
This commit is contained in:
Emi Matchu 2024-01-18 22:16:56 -08:00
parent e8db9cf729
commit b84942d77c
2 changed files with 149 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
app/assets/stylesheets/items/_show.sass
View file

@ -16,17 +16,20 @@ body.items-show
#item-thumbnail
grid-area: img
border: 1px solid $module-border-color
height: 80px
width: 80px
#item-name
grid-area: name
text-align: left
line-height: 100%
#item-links
grid-area: links
text-align: left
a
font-size: 75%
@ -34,57 +37,112 @@ body.items-show
#item-name
margin-bottom: 0
#item-info-section
display: grid
grid-template-areas: "info form"
grid-template-columns: 1fr auto
#item-info
grid-area: info
#item-zones
font:
family: $text-font
size: 85%
margin-bottom: 1em
#item-zones
font:
family: $text-font
size: 85%
margin-bottom: 1em
p
display: inline
p
display: inline
&:first-child
margin-right: 1em
#trade-hangers
font-size: 85%
margin-bottom: 3em
text-align: left
&:first-child
margin-right: 1em
p
#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
z-index: 2
&:first-child
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
&.overflows
.toggle
display: block
form
padding: .5em 0
&.showing-more
.toggle
.less
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
.more
display: none
&.showing-more
.toggle
.less
display: block
.toggle
background: white
bottom: 0
cursor: pointer
display: none
font-family: $main-font
padding: 0 1em
position: absolute
right: 0
.more
display: none
&:hover
text-decoration: underline
.less
.toggle
background: white
bottom: 0
cursor: pointer
display: none
font-family: $main-font
padding: 0 1em
position: absolute
right: 0
&:hover
text-decoration: underline
.less
display: none
#item-contributors
+subtle-banner
@ -112,51 +170,6 @@ body.items-show
height: 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
#trade-hangers
p

106
app/views/items/show.html.haml
View file

@ -19,59 +19,61 @@
= link_to t('.resources.trading_post'), trading_post_url_for(@item)
= link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
- if user_signed_in?
#closet-hangers
%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|
%section#item-info-section
#item-info
%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'
- 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
= number_field_tag "quantity[#{list.id}]",
@current_user_quantities[list.id], :min => 0
= label_tag "quantity[#{list.id}]", list.name
%li
= number_field_tag "quantity[#{owned}]",
@current_user_quantities[owned], :min => 0
- unless lists.empty?
= label_tag "quantity[#{owned}]",
t('closet_lists.unlisted_name'),
:class => 'unlisted'
- 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'
= number_field_tag "quantity[#{owned}]",
@current_user_quantities[owned], :min => 0
- unless lists.empty?
= label_tag "quantity[#{owned}]",
t('closet_lists.unlisted_name'),
:class => 'unlisted'
- else
= label_tag "quantity[#{owned}]",
t('.closet_hangers.quantity_label')
= submit_tag t('.closet_hangers.submit')
#outfit-preview-root{'data-item-id': @item.id}