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:
parent
a55a9b08d4
commit
19470f74d4
4 changed files with 65 additions and 18 deletions
|
@ -1,14 +1,41 @@
|
|||
.nc-mall-items
|
||||
list-style: none
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 1em
|
||||
@import "../partials/clean/constants"
|
||||
@import "../partials/clean/mixins"
|
||||
|
||||
li
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
width: auto
|
||||
.item-list
|
||||
border-collapse: collapse
|
||||
border: 1px solid $soft-border-color
|
||||
|
||||
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
|
||||
font-size: 85%
|
||||
|
|
|
@ -52,15 +52,23 @@ module ItemsHelper
|
|||
content_tag :div, content, :class => 'closeted-icons'
|
||||
end
|
||||
|
||||
# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
|
||||
def nc_icon
|
||||
image_tag 'nc.png', :title => t('items.item.nc.description'),
|
||||
:alt => t('items.item.nc.abbr'), :class => 'nc-icon'
|
||||
end
|
||||
|
||||
# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
|
||||
def nc_icon_for(item)
|
||||
nc_icon if item.nc?
|
||||
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)
|
||||
# For this month and the previous month, show the full date, so people can
|
||||
# understand *exactly* how recent it was.
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
-# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
|
||||
= link_to item_path(item) do
|
||||
= image_tag item.thumbnail_url, alt: "Thumbnail for #{item.name}",
|
||||
title: item.description, loading: "lazy"
|
||||
= item_thumbnail_for(item)
|
||||
%span.name= item.name
|
||||
= nc_icon_for(item)
|
||||
|
|
|
@ -10,10 +10,23 @@
|
|||
|
||||
[nc]: https://secure.nc.neopets.com/get-neocash
|
||||
[gc]: https://secure.nc.neopets.com/nickcash-cards
|
||||
%ul.nc-mall-items
|
||||
%table.item-list
|
||||
%thead
|
||||
%tr
|
||||
%td
|
||||
%th
|
||||
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|
|
||||
%li
|
||||
= render 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)
|
||||
|
||||
|
|
Loading…
Reference in a new issue