dice/impress
1
0
Fork 0
forked from OpenNeo/impress
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

103
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%
@ -35,6 +38,15 @@ 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
@ -47,6 +59,52 @@ body.items-show
&: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
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
#trade-hangers
font-size: 85%
margin-bottom: 3em
@ -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

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

@ -19,8 +19,33 @@
= link_to t('.resources.trading_post'), trading_post_url_for(@item)
= link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
%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?
#closet-hangers
#your-items-form
%h3
= t '.closet_hangers.header_html',
:user_items_link => link_to(t('your_items'),
@ -50,29 +75,6 @@
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}
- unless @contributors_with_counts.empty?