From 19470f74d4bcf99013cc55d687f23221adb92739 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 20 May 2024 15:23:34 -0700
Subject: [PATCH] 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!
---
 app/assets/stylesheets/items/sources.sass | 47 ++++++++++++++++++-----
 app/helpers/items_helper.rb               |  8 ++++
 app/views/items/_item_link.html.haml      |  3 +-
 app/views/items/sources.html.haml         | 25 +++++++++---
 4 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/items/sources.sass b/app/assets/stylesheets/items/sources.sass
index 2bb97224..cea0ce6b 100644
--- a/app/assets/stylesheets/items/sources.sass
+++ b/app/assets/stylesheets/items/sources.sass
@@ -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%
diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb
index 9449fad6..d2c5ff34 100644
--- a/app/helpers/items_helper.rb
+++ b/app/helpers/items_helper.rb
@@ -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.
diff --git a/app/views/items/_item_link.html.haml b/app/views/items/_item_link.html.haml
index 14da7e4f..d0bdb152 100644
--- a/app/views/items/_item_link.html.haml
+++ b/app/views/items/_item_link.html.haml
@@ -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)
diff --git a/app/views/items/sources.html.haml b/app/views/items/sources.html.haml
index 8f455bf3..3aef3a58 100644
--- a/app/views/items/sources.html.haml
+++ b/app/views/items/sources.html.haml
@@ -10,12 +10,25 @@
 
 		[nc]: https://secure.nc.neopets.com/get-neocash
 		[gc]: https://secure.nc.neopets.com/nickcash-cards
-	%ul.nc-mall-items
-		- @nc_mall_items.each do |item|
-			%li
-				= render item
-				%button.add-to-cart{onclick: "alert('Todo!')"}
-					Buy (#{item.current_nc_price} NC)
+	%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|
+				%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?
 	%h2 Neopoint items