OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Compare commits

base: OpenNeo:d3b3a3060c3ec122ab7526fadb5e783743b85f75
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews
...
compare: OpenNeo:41532bd0197cb3b8fcf51fe7f32c3d9f4abf1be3
Branches Tags
OpenNeo:main
OpenNeo:modeling-tests
OpenNeo:rainbow-pool
OpenNeo:simpler-item-previews

4 commits
d3b3a3060c ... 41532bd019

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
13 changed files with 367 additions and 305 deletions
Show stats Expand all files Collapse all files

93
app/assets/stylesheets/auth_users/edit.sass
View file

@ -1,56 +1,55 @@
@import "../partials/clean/constants"
body.auth_users-edit, body.auth_users-update
.settings-form
border: 1px solid $module-border-color
background: $module-bg-color
border-radius: 1em
padding: 1em 1.25em
.settings-form
border: 1px solid $module-border-color
background: $module-bg-color
border-radius: 1em
padding: 1em 1.25em
&:not(:last-of-type)
margin-bottom: 2em
&:not(:last-of-type)
margin-bottom: 2em
h2
font-size: 1.5rem
margin-bottom: .25em
h2
font-size: 1.5rem
margin-bottom: .25em
.hint
font-style: italic
font-size: .85em
opacity: .9
.hint
font-style: italic
font-size: .85em
opacity: .9
fieldset
padding-block: .5em
fieldset
padding-block: .5em
fieldset:not(:last-of-type)
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
fieldset:not(:last-of-type)
border-bottom: 1px solid $module-border-color
margin-bottom: .5em
.neopass-explanation
font-size: .85em
.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
.neopass-explanation
font-size: .85em

3
app/assets/stylesheets/campaigns.css.scss
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/

139
app/assets/stylesheets/devise/sessions/new.sass
View file

@ -1,84 +1,83 @@
@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
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
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
header
font-weight: bold
font-size: 125%
margin-bottom: .5em
.actions
display: flex
align-items: center
gap: .5em
.neopass-explanation
font-size: 85%
.remember-me
display: flex
align-items: center
gap: .25em
font-size: 85%
summary
cursor: pointer
margin-bottom: 1em
input[type=checkbox]
height: 1em
width: 1em
.login-form
margin-bottom: 1em
.login-links
font-size: 85%
.field
margin-bottom: .75em
.input-field label
font-weight: bold
.actions
display: flex
align-items: center
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
.remember-me
display: flex
align-items: center
gap: .25em
font-size: 85%
&:hover
color: #111 // override default DTI styles
filter: brightness(105%)
input[type=checkbox]
height: 1em
width: 1em
.neopass-icon
vertical-align: middle
height: 2em
width: 2em
.login-links
font-size: 85%
display: flex
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

358
app/assets/stylesheets/fundraising/campaigns/show.css.sass
View file

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

14
app/assets/stylesheets/items/sources.sass Normal file
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%

8
app/helpers/application_helper.rb
View file

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

4
app/models/item.rb
View file

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

4
app/models/nc_mall_record.rb
View file

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

2
app/views/auth_users/edit.html.erb
View file

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

2
app/views/devise/sessions/new.html.erb
View file

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

2
app/views/fundraising/campaigns/show.html.haml
View file

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

2
app/views/fundraising/donations/show.html.haml
View file

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

41
app/views/items/sources.html.haml
View file

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