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
|
@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%
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue