From c6927c2ce87845812c0d82833434d15cd9ef36f3 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sun, 21 Jan 2024 03:38:02 -0800 Subject: [PATCH] Add basic styles to trades page Still not accessible via links, just exists! --- app/assets/stylesheets/application.css.sass | 1 + .../stylesheets/item_trades/_index.sass | 25 ++++++++++++ app/assets/stylesheets/items/_show.sass | 38 ++----------------- .../stylesheets/partials/_item_header.sass | 33 ++++++++++++++++ app/views/item_trades/index.html.haml | 9 +++-- app/views/items/_item_header.haml | 17 +++++++++ app/views/items/show.html.haml | 18 +-------- 7 files changed, 86 insertions(+), 55 deletions(-) create mode 100644 app/assets/stylesheets/item_trades/_index.sass create mode 100644 app/assets/stylesheets/partials/_item_header.sass create mode 100644 app/views/items/_item_header.haml diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index c8fb6c90..695e469b 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -17,6 +17,7 @@ @import items @import items/index @import items/show +@import item_trades/index @import outfits/index @import outfits/new @import pets/bulk diff --git a/app/assets/stylesheets/item_trades/_index.sass b/app/assets/stylesheets/item_trades/_index.sass new file mode 100644 index 00000000..bdf61c69 --- /dev/null +++ b/app/assets/stylesheets/item_trades/_index.sass @@ -0,0 +1,25 @@ +@import "../partials/item_header" + +body.item_trades-index + .item-header + +item-header + + .item-page-subtitle + text-align: left + + .trades-table + text-align: left + width: 100% + table-layout: fixed + + th:nth-child(1), th:nth-child(2) + width: 15ch + + .trade-list-names + list-style: none + + li + display: inline + + &:not(:last-child)::after + content: ", " diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index 193be067..b29cd378 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -1,42 +1,10 @@ @import "../partials/clean/constants" @import "../partials/clean/mixins" +@import "../partials/item_header" body.items-show - #item-header - border-bottom: 1px solid $module-border-color - margin-bottom: 1em - padding: 1em 0 - - display: grid - grid-template-areas: "img gap1" "img name" "img links" "img gap2" - align-items: center - justify-content: center - column-gap: 1em - row-gap: .5em - - #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% - margin-left: 1em - - #item-name - margin-bottom: 0 + .item-header + +item-header #item-info-section display: grid diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass new file mode 100644 index 00000000..a82e02a7 --- /dev/null +++ b/app/assets/stylesheets/partials/_item_header.sass @@ -0,0 +1,33 @@ +=item-header + border-bottom: 1px solid $module-border-color + margin-bottom: 1em + padding: 1em 0 + + display: grid + grid-template-areas: "img gap1" "img name" "img links" "img gap2" + align-items: center + justify-content: center + column-gap: 1em + row-gap: .5em + + #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% + margin-bottom: 0 + + #item-links + grid-area: links + + text-align: left + a + font-size: 75% + margin-left: 1em \ No newline at end of file diff --git a/app/views/item_trades/index.html.haml b/app/views/item_trades/index.html.haml index afbab69c..83bc6c59 100644 --- a/app/views/item_trades/index.html.haml +++ b/app/views/item_trades/index.html.haml @@ -1,10 +1,12 @@ - title t(".title.#{@type}") - hide_title_header += render partial: "items/item_header", locals: {item: @item} + %h2.item-page-subtitle= t(".title.#{@type}") - if @trades.present? - %table + %table.trades-table %thead %tr %th= t(".table.headings.last_active") @@ -21,9 +23,10 @@ %td= trade.user.name %td - if trade.lists.present? - %ul + %ul.trade-list-names - trade.lists.each do |list| - %li= list.name + %li= link_to list.name, user_closet_hangers_path(trade.user, + anchor: "closet-list-#{list.id}") - else %span.not-in-a-list= t(".table.not_in_a_list") - else diff --git a/app/views/items/_item_header.haml b/app/views/items/_item_header.haml new file mode 100644 index 00000000..4fd7f5fd --- /dev/null +++ b/app/views/items/_item_header.haml @@ -0,0 +1,17 @@ +%header.item-header + = image_tag item.thumbnail_url, id: 'item-thumbnail' + %h2#item-name= item.name + %nav#item-links + = nc_icon_for(item) + - unless item.rarity.blank? + == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity}) + = link_to t('items.show.resources.jn_items'), jn_items_url_for(item) + - if item.nc_trade_value + = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text), + "https://www.neopets.com/~owls", + title: nc_trade_value_updated_at_text(item.nc_trade_value) + - unless item.nc? + = link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item) + = link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item) + = link_to t('items.show.resources.trading_post'), trading_post_url_for(item) + = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item) diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml index 77d946dd..07880e18 100644 --- a/app/views/items/show.html.haml +++ b/app/views/items/show.html.haml @@ -1,23 +1,7 @@ - title @item.name - canonical_path @item -%header#item-header - = image_tag @item.thumbnail_url, :id => 'item-thumbnail' - %h2#item-name= @item.name - %nav#item-links - = nc_icon_for(@item) - - unless @item.rarity.blank? - == #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity}) - = link_to t('.resources.jn_items'), jn_items_url_for(@item) - - if @item.nc_trade_value - = link_to t('.resources.owls', value: @item.nc_trade_value.value_text), - "https://www.neopets.com/~owls", - title: nc_trade_value_updated_at_text(@item.nc_trade_value) - - unless @item.nc? - = link_to t('.resources.shop_wizard'), shop_wizard_url_for(@item) - = link_to t('.resources.super_shop_wizard'), super_shop_wizard_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) += render partial: "item_header", locals: {item: @item} %section#item-info-section #item-info