Compare commits

...

4 commits

Author SHA1 Message Date
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
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
e30e25a3f5 Remove unused stylesheet
Huh, guess this got auto-generated long ago! Goodbye!
2024-05-14 16:08:51 -07:00
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
13 changed files with 367 additions and 305 deletions

View file

@ -1,56 +1,55 @@
@import "../partials/clean/constants" @import "../partials/clean/constants"
body.auth_users-edit, body.auth_users-update .settings-form
.settings-form border: 1px solid $module-border-color
border: 1px solid $module-border-color background: $module-bg-color
background: $module-bg-color border-radius: 1em
border-radius: 1em padding: 1em 1.25em
padding: 1em 1.25em
&:not(:last-of-type) &:not(:last-of-type)
margin-bottom: 2em margin-bottom: 2em
h2 h2
font-size: 1.5rem font-size: 1.5rem
margin-bottom: .25em margin-bottom: .25em
.hint .hint
font-style: italic font-style: italic
font-size: .85em font-size: .85em
opacity: .9 opacity: .9
fieldset fieldset
padding-block: .5em padding-block: .5em
fieldset:not(:last-of-type) fieldset:not(:last-of-type)
border-bottom: 1px solid $module-border-color border-bottom: 1px solid $module-border-color
margin-bottom: .5em
.field
margin-bottom: 1em
.field_with_errors
display: inline
label
font-weight: bold
.error-explanation
color: $error-color
background: $error-bg-color
border: 1px solid $error-border-color
border-radius: .5em
padding: .5em
margin-bottom: .5em
header
font-weight: bold
ul
padding-left: 2em
.neopass-info
margin-bottom: .5em margin-bottom: .5em
.neopass-explanation .field
font-size: .85em margin-bottom: 1em
.field_with_errors
display: inline
label
font-weight: bold
.error-explanation
color: $error-color
background: $error-bg-color
border: 1px solid $error-border-color
border-radius: .5em
padding: .5em
margin-bottom: .5em
header
font-weight: bold
ul
padding-left: 2em
.neopass-info
margin-bottom: .5em
.neopass-explanation
font-size: .85em

View file

@ -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/

View file

@ -1,84 +1,83 @@
@import "../../partials/clean/constants" @import "../../partials/clean/constants"
body.devise-sessions, body.devise-sessions-new #title
#title text-align: center
font-size: 2.5rem
.login-options
display: flex
margin-block: 3em
section
flex: 1 1 0
padding-block: 1em
display: flex
flex-direction: column
justify-content: center
align-items: center
&:not(:last-of-type)
border-right: 1px solid $module-border-color
margin-right: 1em
padding-right: 1em
.login-option-neopass
text-align: center text-align: center
font-size: 2.5rem
.login-options header
display: flex
margin-block: 3em
section
flex: 1 1 0
padding-block: 1em
display: flex
flex-direction: column
justify-content: center
align-items: center
&:not(:last-of-type)
border-right: 1px solid $module-border-color
margin-right: 1em
padding-right: 1em
.login-option-neopass
text-align: center
header
font-weight: bold
font-size: 125%
margin-bottom: .5em
.neopass-explanation
font-size: 85%
summary
cursor: pointer
margin-bottom: 1em
.login-form
margin-bottom: 1em
.field
margin-bottom: .75em
.input-field label
font-weight: bold font-weight: bold
font-size: 125%
margin-bottom: .5em
.actions .neopass-explanation
display: flex font-size: 85%
align-items: center
gap: .5em
.remember-me summary
display: flex cursor: pointer
align-items: center margin-bottom: 1em
gap: .25em
font-size: 85%
input[type=checkbox] .login-form
height: 1em margin-bottom: 1em
width: 1em
.login-links .field
font-size: 85% margin-bottom: .75em
.input-field label
font-weight: bold
.actions
display: flex display: flex
align-items: center
gap: .5em gap: .5em
.log-in-with-neopass-button .remember-me
background: linear-gradient(#ebb233, #f6e250, #ebb233) display: flex
color: #111 align-items: center
font-size: 1rem gap: .25em
text-shadow: none font-size: 85%
font-family: "Arial Black", sans-serif
margin-bottom: 1em
&:hover input[type=checkbox]
color: #111 // override default DTI styles height: 1em
filter: brightness(105%) width: 1em
.neopass-icon .login-links
vertical-align: middle font-size: 85%
height: 2em display: flex
width: 2em gap: .5em
.log-in-with-neopass-button
background: linear-gradient(#ebb233, #f6e250, #ebb233)
color: #111
font-size: 1rem
text-shadow: none
font-family: "Arial Black", sans-serif
margin-bottom: 1em
&:hover
color: #111 // override default DTI styles
filter: brightness(105%)
.neopass-icon
vertical-align: middle
height: 2em
width: 2em

View file

@ -9,219 +9,219 @@ $outfit-banner-h-padding: 4px
$outfit-banner-v-padding: 2px $outfit-banner-v-padding: 2px
$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding) $outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
body.fundraising-campaigns body
+campaign-progress +campaign-progress
color: $campaign-text-color color: $campaign-text-color
a
color: $campaign-text-color + #222 !important
#home-link:hover
background-color: $campaign-background-color
#userbar, #footer
color: $text-color
a a
color: $campaign-text-color + #222 !important
#home-link:hover
background-color: $campaign-background-color
#userbar, #footer
color: $text-color
a
color: $link-color
#home-link
color: $link-color color: $link-color
#title #home-link
display: none color: $link-color
#title
display: none
#donation-form
+module
background: $campaign-background-color
border-color: $campaign-border-color
display: flex
flex-direction: row
margin-top: 1em
margin-bottom: 1.5em
padding-bottom: 32px
padding-left: 24px
padding-right: 24px
padding-top: 32px
position: relative
// We ignore the theme attribute on campaigns now, and just do purple.
&::after
background:
image: url(image_path("fundraising/purple.png"))
repeat: no-repeat
bottom: 0
content: " "
height: 123px
position: absolute
right: 4px
width: 150px
header, #donation-fields
flex: 1
#donation-form-title
font-size: 125%
font-weight: bold
margin-bottom: .25em
margin-top: 0
p
font-family: $main-font
font-size: 85%
margin-bottom: 0
margin-top: .5em
#donation-fields
margin-left: 20px
padding-top: 7px
#amount-header
font-size: 85%
font-weight: bold
line-height: 1
#amount-choices
$amount-choices-border-color: desaturate(lighten($campaign-border-color, 30%), 30%)
#donation-form
+module
background: $campaign-background-color
border-color: $campaign-border-color
display: flex display: flex
flex-direction: row flex-direction: row
margin-top: 1em margin-bottom: .75em
margin-bottom: 1.5em margin-top: .5em
padding-bottom: 32px
padding-left: 24px
padding-right: 24px
padding-top: 32px
position: relative
// We ignore the theme attribute on campaigns now, and just do purple. li
&::after border: 1px solid $amount-choices-border-color
background: border-radius: 5px
image: url(image_path("fundraising/purple.png")) display: block
repeat: no-repeat
bottom: 0
content: " "
height: 123px
position: absolute
right: 4px
width: 150px
header, #donation-fields
flex: 1 flex: 1
list-style: none
overflow: hidden
text-align: center
#donation-form-title &:not(:last-of-type)
font-size: 125% margin-right: .75em
font-weight: bold
margin-bottom: .25em
margin-top: 0
p input[type=radio]
font-family: $main-font height: 0
font-size: 85% margin: 0
margin-bottom: 0 padding: 0
margin-top: .5em opacity: 0
position: absolute
width: 0
#donation-fields label
margin-left: 20px border: 1px solid transparent
padding-top: 7px box-sizing: border-box
display: block
padding: .5em .5em
width: 100%
#amount-header input[type=radio]:checked ~ label
font-size: 85% background: lighten($amount-choices-border-color, 15%)
font-weight: bold font-weight: bold
line-height: 1
#amount-choices input[type=radio]:focus ~ label
$amount-choices-border-color: desaturate(lighten($campaign-border-color, 30%), 30%) border-color: white
display: flex
flex-direction: row
margin-bottom: .75em
margin-top: .5em
li
border: 1px solid $amount-choices-border-color
border-radius: 5px border-radius: 5px
display: block
flex: 1
list-style: none
overflow: hidden
text-align: center
&:not(:last-of-type) #amount-custom-fields
margin-right: .75em display: none
input[type=radio] input[type=text]
height: 0 font-family: inherit
margin: 0 font-size: inherit
line-height: 1
padding: 0 padding: 0
opacity: 0 text-align: center
position: absolute
width: 0
label #amount-custom:checked ~ #amount-custom-fields
border: 1px solid transparent
box-sizing: border-box
display: block
padding: .5em .5em
width: 100%
input[type=radio]:checked ~ label
background: lighten($amount-choices-border-color, 15%)
font-weight: bold
input[type=radio]:focus ~ label
border-color: white
border-radius: 5px
#amount-custom-fields
display: none
input[type=text]
font-family: inherit
font-size: inherit
line-height: 1
padding: 0
text-align: center
#amount-custom:checked ~ #amount-custom-fields
display: block
#amount-custom:checked ~ label[for=amount-custom]
display: none
input[type=text]
border-color: #cce
color: $campaign-text-color
width: 3em
#donation-controls
button
+awesome-button-color(#004)
font-size: 120%
#campaign-text[data-campaign-complete]
#description
display: none
&[data-show]
display: block display: block
#success-thanks #amount-custom:checked ~ label[for=amount-custom]
border: 1px dashed $module-border-color display: none
margin-bottom: 1em
padding: 1em
position: relative
p:last-child input[type=text]
margin-bottom: 0 border-color: #cce
color: $campaign-text-color
width: 3em
#success-thanks-toggle-description #donation-controls
position: absolute button
bottom: 1em +awesome-button-color(#004)
font-style: italic font-size: 120%
right: 1em
#outfits #campaign-text[data-campaign-complete]
+outfits-list #description
text-align: center display: none
&[data-show]
display: block
> li #success-thanks
+outfit border: 1px dashed $module-border-color
margin-bottom: 1em
padding: 1em
position: relative
p:last-child
margin-bottom: 0
#success-thanks-toggle-description
position: absolute
bottom: 1em
font-style: italic
right: 1em
#outfits
+outfits-list
text-align: center
> li
+outfit
height: $outfit-inner-height
margin: 2px
width: $outfit-inner-width
header, footer
font-size: 85%
padding: $outfit-banner-v-padding $outfit-banner-h-padding
width: $outfit-banner-inner-width
img
height: $outfit-inner-height height: $outfit-inner-height
margin: 2px
width: $outfit-inner-width width: $outfit-inner-width
header, footer &.banner
font-size: 85% background-image: url(https://images.neopets.com/themes/004_bir_a2e60/footer_bg.png)
padding: $outfit-banner-v-padding $outfit-banner-h-padding background-position: 0 -60px
width: $outfit-banner-inner-width border: 2px solid #006
color: white
height: 100px
line-height: 100px
margin: 4px 0
text-shadow: #335 2px 2px 1px
width: 800px - 4px
img span
height: $outfit-inner-height +inline-block
width: $outfit-inner-width font-size: 32px
font-weight: bold
line-height: 1.5
vertical-align: middle
&.banner #last-years-donors
background-image: url(https://images.neopets.com/themes/004_bir_a2e60/footer_bg.png) font-weight: bold
background-position: 0 -60px margin-top: 1em
border: 2px solid #006 text-align: center
color: white
height: 100px
line-height: 100px
margin: 4px 0
text-shadow: #335 2px 2px 1px
width: 800px - 4px
span #outfits-header > *
+inline-block display: inline-block
font-size: 32px
font-weight: bold
line-height: 1.5
vertical-align: middle
#last-years-donors #all-campaigns-list
font-weight: bold li
margin-top: 1em
text-align: center
#outfits-header > *
display: inline-block display: inline-block
list-style: none
margin-left: 1em
#all-campaigns-list #fine-print
li font-size: 85%
display: inline-block margin-top: 2em
list-style: none
margin-left: 1em
#fine-print
font-size: 85%
margin-top: 2em

View file

@ -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%

View file

@ -175,6 +175,14 @@ module ApplicationHelper
end end
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) def secondary_nav(&block)
content_for :before_flashes, content_for :before_flashes,
content_tag(:nav, :id => 'secondary-nav', &block) content_tag(:nav, :id => 'secondary-nav', &block)

View file

@ -175,6 +175,10 @@ class Item < ApplicationRecord
@wanted || false @wanted || false
end end
def current_nc_price
nc_mall_record.current_price
end
def restricted_zones(options={}) def restricted_zones(options={})
options[:scope] ||= Zone.all options[:scope] ||= Zone.all
options[:scope].find(restricted_zone_ids) options[:scope].find(restricted_zone_ids)

View file

@ -1,3 +1,7 @@
class NCMallRecord < ApplicationRecord class NCMallRecord < ApplicationRecord
belongs_to :item belongs_to :item
def current_price
discount_price || price
end
end end

View file

@ -126,5 +126,5 @@
<% end %> <% end %>
<% content_for :stylesheets do %> <% content_for :stylesheets do %>
<%= stylesheet_link_tag "auth_users/edit" %> <%= page_stylesheet_link_tag "auth_users/edit" %>
<% end %> <% end %>

View file

@ -66,5 +66,5 @@
</div> </div>
<% content_for :stylesheets do %> <% content_for :stylesheets do %>
<%= stylesheet_link_tag "devise/sessions/new" %> <%= page_stylesheet_link_tag "devise/sessions/new" %>
<% end %> <% end %>

View file

@ -124,4 +124,4 @@
Thank you!! Thank you!!
- content_for :stylesheets do - content_for :stylesheets do
= stylesheet_link_tag 'fundraising/campaigns/show' = page_stylesheet_link_tag 'fundraising/campaigns/show'

View file

@ -48,4 +48,4 @@
= javascript_include_tag 'fundraising/donations/show', defer: true = javascript_include_tag 'fundraising/donations/show', defer: true
- content_for :stylesheets do - content_for :stylesheets do
= stylesheet_link_tag 'fundraising/donations/show' = page_stylesheet_link_tag 'fundraising/donations/show'

View file

@ -3,16 +3,53 @@
- if @nc_mall_items.present? - if @nc_mall_items.present?
%h2 NC Mall items %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? - if @np_items.present?
%h2 Neopoint items %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 = render @np_items
- if @pb_items.present? - if @pb_items.present?
%h2 Paintbrush items %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 = render @pb_items
- if @other_nc_items.present? - 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 = render @other_nc_items
- content_for :stylesheets do
= page_stylesheet_link_tag "items/sources"