OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Add badges to items

Browse source
This commit is contained in:
Emi Matchu 2025-11-02 23:48:39 +00:00
parent f96569b2bf
commit dad185150c
7 changed files with 141 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
app/assets/stylesheets/application/item-badges.css Normal file
View file

@ -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;
}
}

58
app/assets/stylesheets/outfits/new_v2.css
View file

@ -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;
}
}

37
app/assets/stylesheets/partials/_item_header.sass
View file

@ -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

22
app/views/items/_item_header.html.haml
View file

@ -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)

13
app/views/items/badges/_first_seen.html.haml Normal file
View file

@ -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

25
app/views/items/badges/_kind.html.haml Normal file
View file

@ -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')

11
app/views/outfits/new_v2.html.haml
View file

@ -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