diff --git a/app/stylesheets/screen.sass b/app/stylesheets/screen.sass index 45447e2e..2ae499f8 100644 --- a/app/stylesheets/screen.sass +++ b/app/stylesheets/screen.sass @@ -16,6 +16,7 @@ @import outfits/show @import pets/bulk @import static/donate +@import static/image_mode @import static/terms @import users/top_contributors diff --git a/app/stylesheets/static/_donate.sass b/app/stylesheets/static/_donate.sass index d2070de1..67b5d7a7 100644 --- a/app/stylesheets/static/_donate.sass +++ b/app/stylesheets/static/_donate.sass @@ -46,7 +46,9 @@ body.static-donate 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 diff --git a/app/stylesheets/static/_image_mode.sass b/app/stylesheets/static/_image_mode.sass new file mode 100644 index 00000000..27d5df1c --- /dev/null +++ b/app/stylesheets/static/_image_mode.sass @@ -0,0 +1,11 @@ +body.static-image_mode + h2 + margin: + bottom: .25em + top: 1.25em + + ol, ul + font-family: $text-font + margin-bottom: 1em + padding-left: 3em + diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 6add87c3..134924e6 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -36,9 +36,9 @@ #userbar - if user_signed_in? - if can_use_image_mode? - = link_to donate_path, :id => 'userbar-image-mode' do + = link_to image_mode_path, :id => 'userbar-image-mode' do = image_tag 'image_mode_icon.png', :alt => 'Image Mode' - Thank you! + Welcome to Image Mode! %span Hey, = succeed '!' do diff --git a/app/views/static/image_mode.html.haml b/app/views/static/image_mode.html.haml new file mode 100644 index 00000000..7c4db224 --- /dev/null +++ b/app/views/static/image_mode.html.haml @@ -0,0 +1,100 @@ +- title 'Welcome to Image Mode!' + +:markdown + Thank you so much for helping to support Dress to Impress! From the data on + the site to the funds that keep it running, none of it happens without you. + + Here's a quick breakdown of Image Mode, its beta status, and what that means + for you. + + What is Image Mode? + ------------------- + + Image Mode has two main features: + + 1. **Save images of your pets!** + On supported browsers, you will see a "Download" button. Clicking it will + start downloading a PNG image file to your computer. + 2. **No more Flash!** + In Flash Mode, your browser downloads several Flash files and layers them + on top of each other. In Image Mode, we layer images, instead. + + + How do I use it? + ---------------- + + Start using Dress to Impress normally: type in a pet name or choose a + color/species combination from the home page. Then, to the left of the pet's + image, you should see Flash highlighted. + **Click on the word Image.** Congrats, you're in! + + + What does "Waiting on X images" mean? + ------------------------------------- + + This means that some of the images you're trying to view haven't been + converted yet. They're waiting in line to be converted, and, in order to keep + the site stable, **the server will not convert any more images until the + upgrade is ready**. So, in actuality, waiting will do you no good. + + **Once we're out of beta, however, that message shouldn't stay up for very long at + all.** Once the images are done converting, they will appear, and the message + will disappear. Once we finish converting the thousands of Flash files + already in our database, the conversion line will almost always be very short. + + The main reason that Image Mode is not ready for the public yet, and the + reason we're raising money for a server upgrade, is that **we're not done + converting all of the customization Flash files to images**. There are over + 100,000 to convert, and each one can take up to 10 seconds or so. We have, + however, converted a lot of them already. However, we've also discovered that, + when we do the conversion process, we have unacceptable amounts of downtime. + You may have run into some of it during the past few weeks. So, the converters + are off until the upgrade. + + **Remember, this is just a preview of Image Mode.** You pretty much won't have + all of the images you want until the upgrade is all done. + + + How do I download an image? + --------------------------- + + Just click the Download button beneath the Flash/Image switch. If all goes + well, a download should begin automatically. + + + I don't see any Download button. + -------------------------------- + + Downloading currently only works for modern browsers that support the new + canvas feature. It is, however, supported in the latest versions of, + + * [Google Chrome](http://www.google.com/chrome) + * [Mozilla Firefox](http://www.firefox.com/) + * [Opera](http://www.opera.com/) + * [Safari](http://www.apple.com/safari/) + * [Internet Explorer](http://www.microsoft.com/ie) + + However, Internet Explorer currently is having trouble running Dress to + Impress in general, so is not recommended. + + + Why is the image so small? + -------------------------- + + We currently convert images to sizes 600x600, 300x300, 150x150. We use the + largest size that fits the space available. If you end up with the 150x150 + images, searching for a nonsense search query and entering full screen mode + are some cheap, easy ways to see what image mode is like. A fix for this + issue is coming up soon. + + + What do I do if I find a problem? Have a suggestion? Just want to talk? + ----------------------------------------------------------------------- + + Email me at . Report Image Mode problems and broken + images, ask questions, give me cool ideas, or just say whatever you want. + That's what I'm here for. + + Thanks again! Enjoy Image Mode! + ------------------------------- + diff --git a/config/routes.rb b/config/routes.rb index 9d91f115..74a89a92 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -42,6 +42,7 @@ OpenneoImpressItems::Application.routes.draw do |map| match '/wardrobe' => 'outfits#edit', :as => :wardrobe match '/donate' => 'static#donate', :as => :donate + match 'image-mode' => 'static#image_mode', :as => :image_mode match '/terms' => 'static#terms', :as => :terms match '/sitemap.xml' => 'sitemap#index', :as => :sitemap, :format => :xml diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index f4bd39fe..c7bd563c 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -2603,36 +2603,38 @@ body.static-donate #image-mode-preview { /* line 47, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-preview img { border: 1px solid #006600; + height: 300px; margin-bottom: 0.5em; + width: 300px; } -/* line 51, ../../../app/stylesheets/static/_donate.sass */ +/* line 53, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-preview figcaption { display: block; font-family: Calligraffitti; font-size: 250%; text-align: center; } -/* line 57, ../../../app/stylesheets/static/_donate.sass */ +/* line 59, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #campaign-donors { display: none; margin-right: 20px; width: 344px; } -/* line 62, ../../../app/stylesheets/static/_donate.sass */ +/* line 64, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #campaign-donors ol { font-size: 85%; padding-left: 2em; } -/* line 66, ../../../app/stylesheets/static/_donate.sass */ +/* line 68, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #campaign-donors ol span { color: #448844; float: right; } -/* line 70, ../../../app/stylesheets/static/_donate.sass */ +/* line 72, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #campaign-donors.has-donors { display: block; } -/* line 79, ../../../app/stylesheets/static/_donate.sass */ +/* line 81, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta { background: #eeffee; border: 1px solid #006600; @@ -2645,35 +2647,35 @@ body.static-donate #image-mode-beta { text-align: center; width: 404px; } -/* line 89, ../../../app/stylesheets/static/_donate.sass */ +/* line 91, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta header { display: block; font-weight: bold; } -/* line 93, ../../../app/stylesheets/static/_donate.sass */ +/* line 95, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta p { font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif; font-size: 75%; margin: 0; } -/* line 98, ../../../app/stylesheets/static/_donate.sass */ +/* line 100, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta form { margin: 0.75em 0; } -/* line 101, ../../../app/stylesheets/static/_donate.sass */ +/* line 103, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta form label { font-size: 85%; font-weight: bold; } -/* line 105, ../../../app/stylesheets/static/_donate.sass */ +/* line 107, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta form label:after { content: ":"; } -/* line 108, ../../../app/stylesheets/static/_donate.sass */ +/* line 110, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta form input { width: 5em; } -/* line 111, ../../../app/stylesheets/static/_donate.sass */ +/* line 113, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-beta form button { background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x; } @@ -2681,12 +2683,24 @@ body.static-donate #image-mode-beta form button { body.static-donate #image-mode-beta form button:hover { background-color: #ee4b00; } -/* line 114, ../../../app/stylesheets/static/_donate.sass */ +/* line 116, ../../../app/stylesheets/static/_donate.sass */ body.static-donate #image-mode-description, body.static-donate #image-mode-comments { float: right; width: 436px; } +/* line 2, ../../../app/stylesheets/static/_image_mode.sass */ +body.static-image_mode h2 { + margin-bottom: 0.25em; + margin-top: 1.25em; +} +/* line 7, ../../../app/stylesheets/static/_image_mode.sass */ +body.static-image_mode ol, body.static-image_mode ul { + font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; + margin-bottom: 1em; + padding-left: 3em; +} + /* line 1, ../../../app/stylesheets/static/_terms.sass */ body.static-terms { text-align: center;