From b84942d77cb0b316df0f8df4e50a22587a673264 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Thu, 18 Jan 2024 22:16:56 -0800 Subject: [PATCH] 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! --- app/assets/stylesheets/items/_show.sass | 177 +++++++++++++----------- app/views/items/show.html.haml | 106 +++++++------- 2 files changed, 149 insertions(+), 134 deletions(-) diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index 0bbebdb3..b8dd1fda 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -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 diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index dea9d2eb..d3adc4b2 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -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}