Write more and better descriptions for Item Getting Guide

Not sure if these are final, but they certainly help communicate what the heck we're doing here!
Update some stylesheets to use new page_stylesheet_link_tag helper
2024-05-14 17:41:05 -07:00 · 2024-05-14 16:10:09 -07:00 · 2024-05-14 16:08:51 -07:00 · 2024-05-14 16:04:40 -07:00
13 changed files with 367 additions and 305 deletions
--- a/app/assets/stylesheets/auth_users/edit.sass
+++ b/app/assets/stylesheets/auth_users/edit.sass
@ -1,7 +1,6 @@
@import "../partials/clean/constants"

-body.auth_users-edit, body.auth_users-update
-	.settings-form
+.settings-form
 	border: 1px solid $module-border-color
 	background: $module-bg-color
 	border-radius: 1em
@ -49,8 +48,8 @@ body.auth_users-edit, body.auth_users-update
 		ul
 			padding-left: 2em

-	.neopass-info
+.neopass-info
 	margin-bottom: .5em

-	.neopass-explanation
+.neopass-explanation
 	font-size: .85em
--- a/app/assets/stylesheets/campaigns.css.scss
+++ b/app/assets/stylesheets/campaigns.css.scss
@ -1,3 +0,0 @@
-// Place all the styles related to the campaigns controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
--- a/app/assets/stylesheets/devise/sessions/new.sass
+++ b/app/assets/stylesheets/devise/sessions/new.sass
@ -1,11 +1,10 @@
@import "../../partials/clean/constants"

-body.devise-sessions, body.devise-sessions-new
-	#title
+#title
 	text-align: center
 	font-size: 2.5rem

-	.login-options
+.login-options
 	display: flex
 	margin-block: 3em

@ -37,7 +36,7 @@ body.devise-sessions, body.devise-sessions-new
 				cursor: pointer
 				margin-bottom: 1em

-	.login-form
+.login-form
 	margin-bottom: 1em

 	.field
@ -61,12 +60,12 @@ body.devise-sessions, body.devise-sessions-new
 				height: 1em
 				width: 1em

-	.login-links
+.login-links
 	font-size: 85%
 	display: flex
 	gap: .5em

-	.log-in-with-neopass-button
+.log-in-with-neopass-button
 	background: linear-gradient(#ebb233, #f6e250, #ebb233)
 	color: #111
 	font-size: 1rem
--- a/app/assets/stylesheets/fundraising/campaigns/show.css.sass
+++ b/app/assets/stylesheets/fundraising/campaigns/show.css.sass
@ -9,28 +9,28 @@ $outfit-banner-h-padding: 4px
 $outfit-banner-v-padding: 2px
 $outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)

-body.fundraising-campaigns
+body
  +campaign-progress
  color: $campaign-text-color

-  a
+a
  color: $campaign-text-color + #222 !important

-  #home-link:hover
+#home-link:hover
  background-color: $campaign-background-color

-  #userbar, #footer
+#userbar, #footer
  color: $text-color
  a
    color: $link-color

-  #home-link
+#home-link
  color: $link-color

-  #title
+#title
  display: none

-  #donation-form
+#donation-form
  +module
  background: $campaign-background-color
  border-color: $campaign-border-color
@ -149,13 +149,13 @@ body.fundraising-campaigns
      +awesome-button-color(#004)
      font-size: 120%

-  #campaign-text[data-campaign-complete]
+#campaign-text[data-campaign-complete]
  #description
    display: none
    &[data-show]
      display: block

-  #success-thanks
+#success-thanks
  border: 1px dashed $module-border-color
  margin-bottom: 1em
  padding: 1em
@ -164,13 +164,13 @@ body.fundraising-campaigns
  p:last-child
    margin-bottom: 0

-  #success-thanks-toggle-description
+#success-thanks-toggle-description
  position: absolute
  bottom: 1em
  font-style: italic
  right: 1em

-  #outfits
+#outfits
  +outfits-list
  text-align: center

@ -208,20 +208,20 @@ body.fundraising-campaigns
        line-height: 1.5
        vertical-align: middle

-  #last-years-donors
+#last-years-donors
  font-weight: bold
  margin-top: 1em
  text-align: center

-  #outfits-header > *
+#outfits-header > *
  display: inline-block

-  #all-campaigns-list
+#all-campaigns-list
  li
    display: inline-block
    list-style: none
    margin-left: 1em

-  #fine-print
+#fine-print
  font-size: 85%
  margin-top: 2em
--- a/app/assets/stylesheets/items/sources.sass
+++ b/app/assets/stylesheets/items/sources.sass
@ -0,0 +1,14 @@
+.nc-mall-items
+	list-style: none
+	display: flex
+	flex-wrap: wrap
+	gap: 1em
+
+	li
+		display: flex
+		flex-direction: column
+		align-items: center
+		width: auto
+
+	.add-to-cart
+		font-size: 85%
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -175,6 +175,14 @@ module ApplicationHelper
    end
  end

+  # Includes a stylesheet designed for this specific page of the app, which
+  # should be removed when navigating to another page. We use Turbo's
+  # `data-turbo-track="dynamic"` option to do this.
+  def page_stylesheet_link_tag(src, options={})
+    options = {data: {"turbo-track": "dynamic"}}.deep_merge(options)
+    stylesheet_link_tag src, options
+  end
+
  def secondary_nav(&block)
    content_for :before_flashes,
      content_tag(:nav, :id => 'secondary-nav', &block)
--- a/app/models/item.rb
+++ b/app/models/item.rb
@ -175,6 +175,10 @@ class Item < ApplicationRecord
    @wanted || false
  end

+  def current_nc_price
+    nc_mall_record.current_price
+  end
+
  def restricted_zones(options={})
    options[:scope] ||= Zone.all
    options[:scope].find(restricted_zone_ids)
--- a/app/models/nc_mall_record.rb
+++ b/app/models/nc_mall_record.rb
@ -1,3 +1,7 @@
 class NCMallRecord < ApplicationRecord
  belongs_to :item
+
+  def current_price
+    discount_price || price
+  end
 end
--- a/app/views/auth_users/edit.html.erb
+++ b/app/views/auth_users/edit.html.erb
@ -126,5 +126,5 @@
 <% end %>

 <% content_for :stylesheets do %>
-  <%= stylesheet_link_tag "auth_users/edit" %>
+  <%= page_stylesheet_link_tag "auth_users/edit" %>
 <% end %>
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@ -66,5 +66,5 @@
 </div>

 <% content_for :stylesheets do %>
-  <%= stylesheet_link_tag "devise/sessions/new" %>
+  <%= page_stylesheet_link_tag "devise/sessions/new" %>
 <% end %>
--- a/app/views/fundraising/campaigns/show.html.haml
+++ b/app/views/fundraising/campaigns/show.html.haml
@ -124,4 +124,4 @@
    Thank you!!

 - content_for :stylesheets do
-  = stylesheet_link_tag 'fundraising/campaigns/show'
+  = page_stylesheet_link_tag 'fundraising/campaigns/show'
--- a/app/views/fundraising/donations/show.html.haml
+++ b/app/views/fundraising/donations/show.html.haml
@ -48,4 +48,4 @@
  = javascript_include_tag 'fundraising/donations/show', defer: true

 - content_for :stylesheets do
-  = stylesheet_link_tag 'fundraising/donations/show'
+  = page_stylesheet_link_tag 'fundraising/donations/show'
--- a/app/views/items/sources.html.haml
+++ b/app/views/items/sources.html.haml
@ -3,16 +3,53 @@

 - if @nc_mall_items.present?
 	%h2 NC Mall items
-	= render @nc_mall_items
+	:markdown
+		These items are available in the NC Mall right now! You can buy them
+		with Neocash, a special currency you can [purchase directly][nc]
+		from Neopets or redeem via [gift cards][gc].
+
+		[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)

 - if @np_items.present?
 	%h2 Neopoint items
+	:markdown
+		These items can be purchased with Neopoints. For less-expensive items,
+		check the [Shop Wizard][wiz] first. Otherwise, try the
+		[Trading Post][tp] or [Auction Genie][ag]. Dress to Impress doesn't
+		track Neopoint item prices, but other fansites do!
+
+		[wiz]: https://www.neopets.com/shops/wizard.phtml
+		[tp]: https://www.neopets.com/island/tradingpost.phtml?type=browse
+		[ag]: https://www.neopets.com/genie.phtml
 	= render @np_items

 - if @pb_items.present?
 	%h2 Paintbrush items
+	:markdown
+		These items are part of a paintbrush set. Once you paint your pet,
+		these items will be semi-permanently added to your Closet, even if your
+		pet changes color again! You can use this to mix-and-match styles for
+		"cross-paint" outfits.
 	= render @pb_items

 - if @other_nc_items.present?
-	%h2 Other NC items
+	%h2 Neocash items (Capsules, Dyeworks, events, retired, etc.)
+	:markdown
+		These items are part of the Neocash economy and can't be purchased with
+		Neopoints. We don't track all the details of how to get these items
+		right now! Sometimes they're available via packs or capsules or events
+		in the [NC Mall][mall]. Sometimes they're retired and can't be
+		purchased at all anymore, and can only be obtained via gifts or trades.
+
+		[mall]: https://ncmall.neopets.com/
 	= render @other_nc_items
+
+- content_for :stylesheets do
+	= page_stylesheet_link_tag "items/sources"
Author	SHA1	Message	Date
Matchu	41532bd019	Write more and better descriptions for Item Getting Guide Not sure if these are final, but they certainly help communicate what the heck we're doing here!	2024-05-14 17:41:05 -07:00
Matchu	8117d976a6	Update some stylesheets to use new page_stylesheet_link_tag helper Now that we have this helper, we no longer need these stylesheets to include a `body.controller-action` wrapper to scope all the styles! Someday we should convert more of our stylesheets to this format, instead of slamming them all into `application.sass` like we do now. Ah, well!	2024-05-14 16:10:09 -07:00
Matchu	e30e25a3f5	Remove unused stylesheet Huh, guess this got auto-generated long ago! Goodbye!	2024-05-14 16:08:51 -07:00
Matchu	d8b577aab1	Add more info to NC Mall section of Item Getting Guide NC prices, some CSS, and also a new application-level helper that adds a feature I've long wanted and been working around for Turbo: the ability to specific that a stylesheet is specific to the current page, and should be unloaded when removed! I use this to write `sources.sass` without the usual `body.items-sources` scoping that we've historically used to control what pages a stylesheet applies to. (In the long past, this was because a lot of stylesheets were—and still are–routed through the `application.sass` stylesheet! But even for more recent standalone page stylesheets, I've done the scoping, to avoid issues with styles leaking beyond the page they're meant for when Turbo does a navigation.)	2024-05-14 16:04:40 -07:00