From dad185150cf407c649099888a5385fbb0fab6e4d Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Sun, 2 Nov 2025 23:48:39 +0000 Subject: [PATCH] [WV2] Add badges to items --- .../stylesheets/application/item-badges.css | 32 ++++++++++ app/assets/stylesheets/outfits/new_v2.css | 58 +++++++++++++++++-- .../stylesheets/partials/_item_header.sass | 37 ++---------- app/views/items/_item_header.html.haml | 22 +------ app/views/items/badges/_first_seen.html.haml | 13 +++++ app/views/items/badges/_kind.html.haml | 25 ++++++++ app/views/outfits/new_v2.html.haml | 11 +++- 7 files changed, 141 insertions(+), 57 deletions(-) create mode 100644 app/assets/stylesheets/application/item-badges.css create mode 100644 app/views/items/badges/_first_seen.html.haml create mode 100644 app/views/items/badges/_kind.html.haml diff --git a/app/assets/stylesheets/application/item-badges.css b/app/assets/stylesheets/application/item-badges.css new file mode 100644 index 00000000..b9d547ee --- /dev/null +++ b/app/assets/stylesheets/application/item-badges.css @@ -0,0 +1,32 @@ +/* + * Shared item badge styles for NC/NP/PB badges + * Used across item pages, wardrobe, search results, etc. + * + * These colors are from DTI 2020, based on Chakra UI's color palette. + */ + +.item-badge { + padding: 0.25em 0.5em; + border-radius: 0.25em; + text-decoration: none; + font-size: .75rem; + font-weight: bold; + line-height: 1; + + background: #E2E8F0; + color: #1A202C; + + &[data-item-kind="nc"] { + background: #E9D8FD; + color: #44337A; + } + + &[data-item-kind="pb"] { + background: #FEEBC8; + color: #7B341E; + } + + .icon { + vertical-align: middle; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/outfits/new_v2.css b/app/assets/stylesheets/outfits/new_v2.css index c1c5ac91..e8089565 100644 --- a/app/assets/stylesheets/outfits/new_v2.css +++ b/app/assets/stylesheets/outfits/new_v2.css @@ -1,3 +1,5 @@ +@import "../application/item-badges.css"; + body.wardrobe-v2 { margin: 0; padding: 0; @@ -199,18 +201,66 @@ body.wardrobe-v2 { .worn-items { margin-top: 2rem; - ul { + .items-list { list-style: none; padding: 0; margin: 0.5rem 0; } - li { - padding: 0.5rem; + .item-card { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; background: #f9f9f9; margin-bottom: 0.5rem; - border-radius: 4px; + border-radius: 8px; color: #333; + transition: background 0.2s, box-shadow 0.2s; + + &:hover { + background: #f0f0f0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + } + + .item-thumbnail { + flex-shrink: 0; + width: 50px; + height: 50px; + border-radius: 6px; + overflow: hidden; + background: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; + } + } + + .item-info { + flex: 1; + min-width: 0; /* Allow text to truncate */ + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + .item-name { + font-weight: 500; + color: #2D3748; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .item-badges { + display: flex; + gap: 0.375rem; + flex-wrap: wrap; } } diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass index c56d9647..e57a98a2 100644 --- a/app/assets/stylesheets/partials/_item_header.sass +++ b/app/assets/stylesheets/partials/_item_header.sass @@ -1,5 +1,6 @@ @import "../partials/clean/constants" @import "../partials/clean/mixins" +@import "../application/item-badges" =item-header border-bottom: 1px solid $module-border-color @@ -27,7 +28,7 @@ text-align: left line-height: 100% margin-bottom: 0 - + .item-links grid-area: links @@ -41,32 +42,6 @@ abbr cursor: help - .item-kind, .first-seen-at - padding: .25em .5em - border-radius: .25em - - text-decoration: none - font-weight: bold - line-height: 1 - - background: #E2E8F0 - color: #1A202C - - .icon - vertical-align: middle - - .item-kind - // These colors are copied from DTI 2020, for initial consistency! - // They're based on the Chakra UI colors, which I think are in turn the - // Bootstrap colors? Or something? - // NOTE: For the data-type=np case, we use the default gray colors. - &[data-type=nc] - background: #E9D8FD - color: #44337A - &[data-type=pb] - background: #FEEBC8 - color: #7B341E - .support-form grid-area: support font-size: 85% @@ -100,21 +75,21 @@ font-size: 150% font-weight: bold margin-bottom: .75em - + .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 diff --git a/app/views/items/_item_header.html.haml b/app/views/items/_item_header.html.haml index 3b6445d9..61906de6 100644 --- a/app/views/items/_item_header.html.haml +++ b/app/views/items/_item_header.html.haml @@ -9,26 +9,8 @@ = image_tag item.thumbnail_url, class: 'item-thumbnail' %h2.item-name= item.name %nav.item-links - - if item.currently_in_mall? - = link_to "https://ncmall.neopets.com/", class: "item-kind", data: {type: "nc"}, - title: "Currently in NC Mall!", target: "_blank" do - = cart_icon alt: "Buy" - #{item.current_nc_price} NC - - elsif item.nc? - %abbr.item-kind{'data-type' => 'nc', title: t('items.show.item_kinds.nc.description')} - = t('items.show.item_kinds.nc.label') - - elsif item.pb? - %abbr.item-kind{'data-type' => 'pb', title: t('items.show.item_kinds.pb.description')} - = t('items.show.item_kinds.pb.label') - - else - %abbr.item-kind{'data-type' => 'np', title: t('items.show.item_kinds.np.description')} - = t('items.show.item_kinds.np.label') - - - if item.created_at? - %time.first-seen-at{ - datetime: item.created_at.iso8601, - title: "First seen on #{item.created_at.to_date.to_fs(:long)}", - }= time_with_only_month_if_old item.created_at + = render "items/badges/kind", item: item + = render "items/badges/first_seen", item: item = link_to t('items.show.resources.jn_items'), jn_items_url_for(item) = link_to t('items.show.resources.impress_2020'), impress_2020_url_for(item) diff --git a/app/views/items/badges/_first_seen.html.haml b/app/views/items/badges/_first_seen.html.haml new file mode 100644 index 00000000..6afd76eb --- /dev/null +++ b/app/views/items/badges/_first_seen.html.haml @@ -0,0 +1,13 @@ +-# Renders a "first seen" timestamp badge for an item +-# +-# Usage: +-# = render "items/badges/first_seen", item: @item +-# +-# Shows when the item was first added to the database. +-# Only renders if the item has a created_at timestamp. + +- if item.created_at? + %time.item-badge.first-seen-at{ + datetime: item.created_at.iso8601, + title: "First seen on #{item.created_at.to_date.to_fs(:long)}", + }= time_with_only_month_if_old item.created_at diff --git a/app/views/items/badges/_kind.html.haml b/app/views/items/badges/_kind.html.haml new file mode 100644 index 00000000..bdc5ad4d --- /dev/null +++ b/app/views/items/badges/_kind.html.haml @@ -0,0 +1,25 @@ +-# Renders an item kind badge (NC/NP/PB) +-# +-# Usage: +-# = render "items/item_kind_badge", item: @item +-# +-# The badge shows: +-# - For NC Mall items: clickable link with price +-# - For NC items: purple "NC" badge +-# - For PB items: orange "PB" badge +-# - For NP items: gray "NP" badge + +- if item.currently_in_mall? + = link_to "https://ncmall.neopets.com/", class: "item-badge", data: {item_kind: "nc"}, + title: "Currently in NC Mall!", target: "_blank" do + = cart_icon alt: "Buy" + #{item.current_nc_price} NC +- elsif item.nc? + %abbr.item-badge{data: {item_kind: "nc"}, title: t('items.show.item_kinds.nc.description')} + = t('items.show.item_kinds.nc.label') +- elsif item.pb? + %abbr.item-badge{data: {item_kind: "pb"}, title: t('items.show.item_kinds.pb.description')} + = t('items.show.item_kinds.pb.label') +- else + %abbr.item-badge{data: {item_kind: "np"}, title: t('items.show.item_kinds.np.description')} + = t('items.show.item_kinds.np.label') diff --git a/app/views/outfits/new_v2.html.haml b/app/views/outfits/new_v2.html.haml index 46b40564..bb3fb5fb 100644 --- a/app/views/outfits/new_v2.html.haml +++ b/app/views/outfits/new_v2.html.haml @@ -51,6 +51,13 @@ - if @outfit.worn_items.any? .worn-items %h2 Items (#{@outfit.worn_items.size}) - %ul + %ul.items-list - @outfit.worn_items.each do |item| - %li= item.name + %li.item-card + .item-thumbnail + = image_tag item.thumbnail_url, alt: item.name, loading: "lazy" + .item-info + .item-name= item.name + .item-badges + = render "items/badges/kind", item: item + = render "items/badges/first_seen", item: item