Use table layout for Item Getting Guide item list

This helps us be more efficient with our use of space, keep the CTAs well
aligned, show a clear total, and set up how we might do CTAs for more complex
cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
This commit is contained in:
Emi Matchu 2024-05-20 15:23:34 -07:00
parent a55a9b08d4
commit 19470f74d4
4 changed files with 65 additions and 18 deletions

View file

@ -1,14 +1,41 @@
.nc-mall-items @import "../partials/clean/constants"
list-style: none @import "../partials/clean/mixins"
display: flex
flex-wrap: wrap
gap: 1em
li .item-list
display: flex border-collapse: collapse
flex-direction: column border: 1px solid $soft-border-color
align-items: center
width: auto td, th
border-top: 1px solid $soft-border-color
border-bottom: 1px solid $soft-border-color
padding: .25em
vertical-align: middle
&:first-child
padding-left: .5em
&:last-child
padding-right: .5em
.thumbnail-cell
img
display: block
width: 2.5em
height: 2.5em
.add-to-cart-cell
text-align: right
padding-left: 1em
thead
background: $module-bg-color
th
text-align: left
.add-to-cart
/* Bootstrap's Purple 600 */
+awesome-button-color(#59359a)
.add-to-cart .add-to-cart
font-size: 85% font-size: 85%

View file

@ -52,15 +52,23 @@ module ItemsHelper
content_tag :div, content, :class => 'closeted-icons' content_tag :div, content, :class => 'closeted-icons'
end end
# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
def nc_icon def nc_icon
image_tag 'nc.png', :title => t('items.item.nc.description'), image_tag 'nc.png', :title => t('items.item.nc.description'),
:alt => t('items.item.nc.abbr'), :class => 'nc-icon' :alt => t('items.item.nc.abbr'), :class => 'nc-icon'
end end
# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
def nc_icon_for(item) def nc_icon_for(item)
nc_icon if item.nc? nc_icon if item.nc?
end end
# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
def item_thumbnail_for(item)
image_tag item.thumbnail_url, alt: "Thumbnail for #{item.name}",
title: item.description, loading: "lazy"
end
def time_with_only_month_if_old(first_seen_at) def time_with_only_month_if_old(first_seen_at)
# For this month and the previous month, show the full date, so people can # For this month and the previous month, show the full date, so people can
# understand *exactly* how recent it was. # understand *exactly* how recent it was.

View file

@ -1,6 +1,5 @@
-# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`! -# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
= link_to item_path(item) do = link_to item_path(item) do
= image_tag item.thumbnail_url, alt: "Thumbnail for #{item.name}", = item_thumbnail_for(item)
title: item.description, loading: "lazy"
%span.name= item.name %span.name= item.name
= nc_icon_for(item) = nc_icon_for(item)

View file

@ -10,12 +10,25 @@
[nc]: https://secure.nc.neopets.com/get-neocash [nc]: https://secure.nc.neopets.com/get-neocash
[gc]: https://secure.nc.neopets.com/nickcash-cards [gc]: https://secure.nc.neopets.com/nickcash-cards
%ul.nc-mall-items %table.item-list
- @nc_mall_items.each do |item| %thead
%li %tr
= render item %td
%button.add-to-cart{onclick: "alert('Todo!')"} %th
Buy (#{item.current_nc_price} NC) Total: #{@nc_mall_items.map(&:current_nc_price).sum} NC
(#{pluralize @nc_mall_items.size, "item"})
%td.add-to-cart-cell
%button.add-to-cart{onclick: "alert('Todo!')"}
Buy all in NC Mall
%tbody
- @nc_mall_items.each do |item|
%tr
%td.thumbnail-cell= item_thumbnail_for(item)
%td= item.name
%td.add-to-cart-cell
%button.add-to-cart{onclick: "alert('Todo!')"}
Buy (#{item.current_nc_price} NC)
- if @np_items.present? - if @np_items.present?
%h2 Neopoint items %h2 Neopoint items