diff --git a/app/assets/stylesheets/outfits/_new.sass b/app/assets/stylesheets/outfits/_new.sass index a2edac3c..af29608c 100644 --- a/app/assets/stylesheets/outfits/_new.sass +++ b/app/assets/stylesheets/outfits/_new.sass @@ -115,48 +115,57 @@ body.outfits-new float: right font-size: 87.5% margin-top: 1em - $section-count: 3 - $section-border-width: 1px - $section-padding: 0.5em - $section-width: 100% / $section-count - // (A - (B-1)*C) / B #sections - +clearfix - display: table + display: grid + grid-template-columns: 1fr 1fr 1fr list-style: none margin-top: 1em - h3 - margin-bottom: .25em li - border-left: - color: $module-border-color - style: solid - width: $section-border-width - display: table-cell - padding: $section-padding - position: relative - width: $section-width - &:first-child - border-left: 0 + display: grid + grid-template-areas: "header image" "info image" "form form" + grid-template-rows: auto auto auto + row-gap: .5em + padding: 0.5em + &:not(:first-child) + border-left: 1px solid $module-border-color + h3 + grid-area: header + margin-bottom: 0 div + grid-area: info color: $soft-text-color font-size: 75% margin-left: 1em z-index: 2 - h4, input + strong font-size: 116% - h4, input[type=text] - color: inherit - h4 a - background: #ffffc0 + a:has(img) + grid-area: image img - +opacity(0.75) + opacity: 0.75 float: right margin-left: .5em &:hover - +opacity(1) + opacity: 1 p + line-height: 1.5 min-height: 4.5em + margin-bottom: 0 + form + grid-area: form + display: flex + align-items: center + gap: .5em + font-size: .85em + margin-left: 1em + margin-right: .5em + + input[type=text], input[type=search] + // TODO: It doesn't make sense to me that this is the right style? I + // expected `flex: 1 0 0` to be right, but that grew *too* large, and + // forced the sections to grow wider too. I also tried `flex: 0 1 100%`, + // which I would have *thought* is the same as this, but isn't! Idk! + width: 100% #whats-new margin-bottom: 1em diff --git a/app/views/outfits/new.html.haml b/app/views/outfits/new.html.haml index 38e3e333..c83c1f6c 100644 --- a/app/views/outfits/new.html.haml +++ b/app/views/outfits/new.html.haml @@ -51,41 +51,39 @@ = t('.submit.secondary') %ul#sections - - localized_cache :action_suffix => 'your_items_module' do - %li#your-items-module - = link_to image_tag('your_items.png'), your_items_path - %h3= link_to t('your_items'), your_items_path - %div - %h4= t '.your_items.tagline' - %p= t '.your_items.description' - = form_tag users_path, :method => 'get' do - = text_field_tag 'name', '', :type => 'search', - :placeholder => t('.your_items.user_search.placeholder') - = submit_tag t('.your_items.user_search.submit') + %li + %h3= link_to t('your_items'), your_items_path + = link_to image_tag('your_items.png'), your_items_path + .section-info + %strong= t '.your_items.tagline' + %p= t '.your_items.description' + = form_tag users_path, :method => 'get' do + = text_field_tag 'name', '', :type => 'search', + :placeholder => t('.your_items.user_search.placeholder') + = submit_tag t('.your_items.user_search.submit') - - localized_cache :action_suffix => 'infinite_closet_module' do - %li - = link_to image_tag('items.png'), items_path - %h3= link_to t('infinite_closet'), items_path - %div - %h4= t '.infinite_closet.tagline' - %p= t '.infinite_closet.description' - = form_tag items_path, :method => 'get' do - = text_field_tag 'q', '', :type => 'search', - :placeholder => t('.infinite_closet.item_search.placeholder') - = submit_tag t('.infinite_closet.item_search.submit') + %li + %h3= link_to t('infinite_closet'), items_path + = link_to image_tag('items.png'), items_path + .section-info + %strong= t '.infinite_closet.tagline' + %p= t '.infinite_closet.description' + = form_tag items_path, :method => 'get' do + = text_field_tag 'q', '', :type => 'search', + :placeholder => t('.infinite_closet.item_search.placeholder') + = submit_tag t('.infinite_closet.item_search.submit') %li + %h3= link_to t('modeling_hub'), bulk_pets_path = link_to bulk_pets_path do = image_tag 'https://images.neopets.com/items/mall_ac_garland_spotlight.gif' - %h3= link_to t('modeling_hub'), bulk_pets_path - %div - %h4= t '.modeling_hub.tagline' + .section-info + %strong= t '.modeling_hub.tagline' %p= t '.modeling_hub.description' - = form_tag load_pet_path, method: 'POST' do - = pet_name_tag placeholder: t('.modeling_hub.load_pet.placeholder'), - required: true - = submit_tag t('.modeling_hub.load_pet.submit') + = form_tag load_pet_path, method: 'POST' do + = pet_name_tag placeholder: t('.modeling_hub.load_pet.placeholder'), + required: true + = submit_tag t('.modeling_hub.load_pet.submit') - if @latest_contribution # will be nil for a fresh copy of the site ;P #latest-contribution