1
0
Fork 0
forked from OpenNeo/impress

new donations page mockup; temporary outfits and old campaign as placeholders

This commit is contained in:
Emi Matchu 2014-09-09 18:02:49 -05:00
parent fffd3ac2e6
commit 1d7ca7cec2
3 changed files with 146 additions and 157 deletions

View file

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

View file

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

View file

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