new donations page mockup; temporary outfits and old campaign as placeholders
This commit is contained in:
parent
fffd3ac2e6
commit
1d7ca7cec2
3 changed files with 146 additions and 157 deletions
|
|
@ -2,118 +2,77 @@
|
||||||
|
|
||||||
@import "partials/campaign-progress"
|
@import "partials/campaign-progress"
|
||||||
|
|
||||||
|
/* TODO: redundant with outfits/index; why is it not in the partial? */
|
||||||
|
$outfit-inner-height: 150px
|
||||||
|
$outfit-inner-width: 150px
|
||||||
|
$outfit-banner-h-padding: 4px
|
||||||
|
$outfit-banner-v-padding: 2px
|
||||||
|
$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
|
||||||
|
|
||||||
body.static-donate
|
body.static-donate
|
||||||
+campaign-progress
|
+campaign-progress
|
||||||
|
|
||||||
#title
|
#title
|
||||||
margin-bottom: 0
|
margin-bottom: .25em
|
||||||
|
|
||||||
h2
|
#title
|
||||||
font-style: italic
|
|
||||||
font-weight: normal
|
|
||||||
|
|
||||||
#title, h2
|
|
||||||
clear: left
|
clear: left
|
||||||
float: left
|
float: left
|
||||||
|
|
||||||
h2
|
#donation-form
|
||||||
margin-bottom: .25em
|
|
||||||
|
|
||||||
$image-mode-preview-image-width: 300px
|
|
||||||
$image-mode-preview-image-border-width: 1px
|
|
||||||
$image-mode-preview-h-padding: 20px
|
|
||||||
$image-mode-preview-border-width: 1px
|
|
||||||
$image-mode-preview-right-margin: 20px
|
|
||||||
$image-mode-preview-width: $image-mode-preview-image-width + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
|
|
||||||
$image-mode-preview-outer-width: $image-mode-preview-width + $image-mode-preview-right-margin
|
|
||||||
|
|
||||||
#image-mode-data
|
|
||||||
clear: both
|
|
||||||
display: block
|
|
||||||
float: left
|
|
||||||
margin-right: $image-mode-preview-right-margin
|
|
||||||
width: $image-mode-preview-width
|
|
||||||
|
|
||||||
#image-mode-preview
|
|
||||||
border: $image-mode-preview-border-width solid $module-border-color
|
|
||||||
display: block
|
|
||||||
margin: 0 0 2em 0
|
|
||||||
padding:
|
|
||||||
top: $image-mode-preview-h-padding
|
|
||||||
right: $image-mode-preview-h-padding
|
|
||||||
bottom: $image-mode-preview-h-padding / 1.5
|
|
||||||
left: $image-mode-preview-h-padding
|
|
||||||
|
|
||||||
img
|
|
||||||
border: $image-mode-preview-border-width solid $module-border-color
|
|
||||||
height: $image-mode-preview-image-width
|
|
||||||
margin-bottom: .5em
|
|
||||||
width: $image-mode-preview-image-width
|
|
||||||
|
|
||||||
figcaption
|
|
||||||
display: block
|
|
||||||
font-family: Calligraffitti
|
|
||||||
font-size: 250%
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
#campaign-donors
|
|
||||||
display: none
|
|
||||||
margin-right: $image-mode-preview-right-margin
|
|
||||||
width: $image-mode-preview-width
|
|
||||||
|
|
||||||
ol
|
|
||||||
font-size: 85%
|
|
||||||
padding-left: 2em
|
|
||||||
|
|
||||||
span
|
|
||||||
color: $soft-text-color
|
|
||||||
float: right
|
|
||||||
|
|
||||||
&.has-donors
|
|
||||||
display: block
|
|
||||||
|
|
||||||
$image-mode-description-width: $container-width - $image-mode-preview-outer-width
|
|
||||||
|
|
||||||
$image-mode-beta-h-padding: 15px
|
|
||||||
$image-mode-beta-border-width: 1px
|
|
||||||
$image-mode-beta-inner-width: $image-mode-description-width - 2 * ($image-mode-beta-h-padding + $image-mode-beta-border-width)
|
|
||||||
|
|
||||||
#image-mode-beta
|
|
||||||
+module
|
+module
|
||||||
border-width: $image-mode-beta-border-width
|
|
||||||
display: block
|
|
||||||
float: left
|
|
||||||
margin-bottom: 1em
|
|
||||||
padding: ($image-mode-beta-h-padding / 1.5) $image-mode-beta-h-padding
|
|
||||||
text-align: center
|
|
||||||
width: $image-mode-beta-inner-width
|
|
||||||
|
|
||||||
header
|
background:
|
||||||
display: block
|
image: url(http://images.neopets.com/new_shopkeepers/t_993.gif)
|
||||||
|
position: ($container-width - 150px - 8px) -8px
|
||||||
|
repeat: no-repeat
|
||||||
|
margin-bottom: 1.5em
|
||||||
|
padding-bottom: 24px
|
||||||
|
padding-left: 24px
|
||||||
|
padding-top: 24px
|
||||||
|
|
||||||
|
header, div
|
||||||
|
+inline-block
|
||||||
|
|
||||||
|
p
|
||||||
|
font-family: $main-font
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
div
|
||||||
|
font-size: 115%
|
||||||
|
margin-left: 20px
|
||||||
|
|
||||||
|
#donation-form-title
|
||||||
|
font-size: 125%
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
|
margin-bottom: .25em
|
||||||
|
|
||||||
p
|
p
|
||||||
font-family: $main-font
|
font-size: 85%
|
||||||
font-size: 75%
|
margin-bottom: 0
|
||||||
margin: 0
|
margin-top: .5em
|
||||||
|
|
||||||
form
|
input[type=text]
|
||||||
margin: .75em 0
|
width: 3em
|
||||||
|
|
||||||
label
|
button
|
||||||
font-size: 85%
|
+loud-awesome-button-color
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
&:after
|
#outfits
|
||||||
content: ":"
|
+outfits-list
|
||||||
|
|
||||||
input
|
> li
|
||||||
width: 5em
|
+outfit
|
||||||
|
|
||||||
button
|
height: $outfit-inner-height
|
||||||
+loud-awesome-button-color
|
margin: 2px
|
||||||
|
width: $outfit-inner-width
|
||||||
|
|
||||||
#image-mode-description, #image-mode-comments
|
header, footer
|
||||||
float: right
|
padding: $outfit-banner-v-padding $outfit-banner-h-padding
|
||||||
width: $image-mode-description-width
|
text-align: center
|
||||||
|
width: $outfit-banner-inner-width
|
||||||
|
|
||||||
|
#fine-print
|
||||||
|
font-size: 85%
|
||||||
|
margin-top: 2em
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@ module StaticHelper
|
||||||
label_tag 'pledge[amount]', content
|
label_tag 'pledge[amount]', content
|
||||||
end
|
end
|
||||||
|
|
||||||
def pledgie_amount_field_tag
|
def pledgie_amount_field_tag(amount)
|
||||||
text_field_tag 'pledge[amount]', '0.00', :id => 'pledge_amount'
|
text_field_tag 'pledge[amount]', amount, :id => 'pledge_amount'
|
||||||
end
|
end
|
||||||
|
|
||||||
def pledgie_confirm_url
|
def pledgie_confirm_url
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,106 @@
|
||||||
- title "Support Dress to Impress"
|
- title "Support Dress to Impress"
|
||||||
%h2 Thank you so much for all your help. We made it!
|
|
||||||
|
|
||||||
= campaign_progress(:always => true) do
|
= campaign_progress(:always => true) do
|
||||||
We've received
|
We've received
|
||||||
= surround '$', ',' do
|
= precede '$' do
|
||||||
%span.campaign-raised
|
%span.campaign-raised
|
||||||
exceeding our goal for the upgrade. Thanks so much!
|
toward our hosting costs this year. Thanks so much!
|
||||||
|
|
||||||
%section#image-mode-data
|
= pledgie_form_tag id: 'donation-form' do
|
||||||
%figure#image-mode-preview
|
|
||||||
= image_tag 'image_mode_preview.png'
|
|
||||||
%figcaption
|
|
||||||
Image Mode ♥
|
|
||||||
#campaign-donors
|
|
||||||
%h3 Thank you!
|
|
||||||
%ol
|
|
||||||
|
|
||||||
#image-mode-description
|
|
||||||
:markdown
|
|
||||||
**Hooray!** We made our fundraising goal, and now have enough funds to run
|
|
||||||
on the upgraded server for the next year. We completed our server upgrade
|
|
||||||
around 9PM NST on August 4.
|
|
||||||
|
|
||||||
**Image Mode is now out of beta, and is open to the public.** Just head to
|
|
||||||
the home page and start dressing up a pet like normal, then hit the
|
|
||||||
**Image** button in the top left corner. Congrats! You're in!
|
|
||||||
|
|
||||||
Thanks again for all your help. Dress to Impress runs on you, from our data
|
|
||||||
to our funds. You make this site the great resource that it is, and I'm
|
|
||||||
consistently impressed by this community's generosity. Thanks for all you
|
|
||||||
do!
|
|
||||||
|
|
||||||
#image-mode-beta
|
|
||||||
%header
|
%header
|
||||||
Support Dress to Impress!
|
%p#donation-form-title
|
||||||
= pledgie_form_tag do
|
Thanks for supporting Dress to Impress!
|
||||||
= pledgie_amount_label_tag 'Amount'
|
%p#donation-form-subtitle
|
||||||
= pledgie_amount_field_tag
|
All donations go directly to our hosting costs. Thanks for your help!
|
||||||
|
%div
|
||||||
|
= precede '$' do
|
||||||
|
= pledgie_amount_field_tag('10.00')
|
||||||
%button{:type => 'submit'} Donate now!
|
%button{:type => 'submit'} Donate now!
|
||||||
|
|
||||||
%p
|
#description
|
||||||
A
|
:markdown
|
||||||
= link_to 'Linode 768 VPS', 'http://www.linode.com/'
|
**Dress to Impress is cool!** We have loads of fancy features: we're
|
||||||
costs about $360 a year.
|
constantly adding models to our database, we help folks make NC trades, and
|
||||||
|
you can easily save your outfits and share them across the interwebs.
|
||||||
|
It's pretty sweet.
|
||||||
|
|
||||||
%p
|
**But cool features cost money.** We're running on a cool
|
||||||
All donations go directly to hosting costs. Thanks so much for your help!
|
[4GB Linode server][linode] for $40/mo, and y'all's fancy outfit thumbnails
|
||||||
|
live on [Amazon Web Services][aws] for about $25/mo (it varies by usage),
|
||||||
|
so that leaves us at about $65/mo. Add in $10 for the domain name and our
|
||||||
|
Amazon costs being on the rise, and that rounds to an annual
|
||||||
|
budget of $800.
|
||||||
|
|
||||||
|
**So, we're here to ask for help.** If you have some spare change to send
|
||||||
|
our way, we'll gladly accept
|
||||||
|
<img src="http://images.neopets.com/neoboards/smilies/grin.gif" />
|
||||||
|
Thanks for helping Dress to Impress stay online and running smoothly!
|
||||||
|
|
||||||
#image-mode-comments
|
**And, as a thank-you gift, we'll feature your outfits here!** Eeyup, for
|
||||||
#disqus_thread
|
every $5 you send our way, we'll post one of your beautiful outfits right
|
||||||
- if Rails.env.development?
|
here, and feature it on the homepage, too! Personally, I'm looking forward
|
||||||
:javascript
|
to seeing all your lovely creations, and wishing I could make things
|
||||||
var disqus_developer = 1;
|
even [half as pretty][matts_bat]
|
||||||
:javascript
|
<img src="http://images.neopets.com/neoboards/smilies/tongue.gif" />
|
||||||
var disqus_shortname = 'dresstoimpress';
|
(See the fine print at the bottom of the page for details.)
|
||||||
|
|
||||||
// The following are highly recommended additional parameters. Remove the slashes in front to use.
|
**Thanks again for all your help.** Dress to Impress runs on you, from our
|
||||||
var disqus_identifier = 'dresstoimpress_donate';
|
data to our servers. You make this site the great resource that it is, and
|
||||||
|
I'm consistently impressed by this community's generosity. Thanks for
|
||||||
|
all you do!
|
||||||
|
|
||||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
[linode]: https://www.linode.com/pricing
|
||||||
(function() {
|
[aws]: http://aws.amazon.com/
|
||||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
[matts_bat]: http://www.neopets.com/petlookup.phtml?pet=matts_bat
|
||||||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
|
||||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
|
||||||
|
|
||||||
var s = document.createElement('script'); s.async = true;
|
%h2 Thanks to our lovely donors!
|
||||||
s.type = 'text/javascript';
|
|
||||||
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
|
|
||||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
|
||||||
}());
|
|
||||||
%a.dsq-brlink{:href => "http://disqus.com"}
|
|
||||||
blog comments powered by
|
|
||||||
%span.logo-disqus Disqus
|
|
||||||
|
|
||||||
|
%ul#outfits
|
||||||
|
= Outfit.includes(:user).find_each do |outfit| # TODO: donors only
|
||||||
|
= outfit_li_for(outfit) do
|
||||||
|
- if outfit.image?
|
||||||
|
= link_to image_tag(outfit.image.small.url), outfit
|
||||||
|
|
||||||
|
%header
|
||||||
|
- if outfit.user
|
||||||
|
Thanks, #{outfit.user.name}!
|
||||||
|
- else
|
||||||
|
Thanks, anonymous!
|
||||||
|
|
||||||
|
#fine-print
|
||||||
|
%h2 Some notes on featured outfits
|
||||||
|
:markdown
|
||||||
|
When you make a donation, we'll divide the amount by $5, and, rounding
|
||||||
|
down, that's how many of your outifts we'll feature. Cool, eh?
|
||||||
|
|
||||||
|
This is our way of publicly thanking our donors.
|
||||||
|
(Thanks again, by the way!)
|
||||||
|
We love them very much and want to bring attention to their awesomeness.
|
||||||
|
However, there are a few important bits of legal whatnot to keep in mind.
|
||||||
|
(Mostly, it's the list of things that we expect to do but in no legally
|
||||||
|
binding way promise to do. Just in case
|
||||||
|
<img src="http://images.neopets.com/neoboards/smilies/tongue.gif" />)
|
||||||
|
|
||||||
|
Featuring your outfit is a thank-you gift that we like to give our donors;
|
||||||
|
it is *not* a purchased service. We offer no guarantee that we'll post your
|
||||||
|
outfit on any page for any particular amount of time, or even at all.
|
||||||
|
(That said, we expect to publicly list our donors' outfits somewhere on the
|
||||||
|
site for as long as it lives, and in rotation on the homepage until some
|
||||||
|
other site event or feature needs the space.)
|
||||||
|
|
||||||
|
We reserve the right to refuse to post any outfit for any reason, and we
|
||||||
|
reserve the right to remove any previously posted outfit for any reason.
|
||||||
|
(That said, so long as your outfit is appropriate for Neopians of all ages,
|
||||||
|
we don't expect any trouble.)
|
||||||
|
|
||||||
|
If you change your mind about donating, no worries: we'll refund any
|
||||||
|
donation within 30 days of the moment you donated.
|
||||||
|
(Please don't be that person who repeatedly donates and refunds.
|
||||||
|
We'll stop posting your outfits
|
||||||
|
<img src="http://images.neopets.com/neoboards/smilies/tongue.gif" />)
|
||||||
|
|
||||||
|
**TL;DR: We love to help and acknowledge our good-faith donors,
|
||||||
|
but reserve the right not to do those things,
|
||||||
|
in order to better handle bad-faith donors and unexpected circumstances.**
|
||||||
|
Huh. That was way simpler.
|
||||||
|
Maybe I should've just written that in the first place.
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue