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

image mode welcome page

Browse source
This commit is contained in:
Emi Matchu 2011-07-02 17:09:42 -04:00
parent c34f250da3
commit c6a7bfffa1
7 changed files with 145 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/stylesheets/screen.sass
View file

@ -16,6 +16,7 @@
@import outfits/show
@import pets/bulk
@import static/donate
@import static/image_mode
@import static/terms
@import users/top_contributors

2
app/stylesheets/static/_donate.sass
View file

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

11
app/stylesheets/static/_image_mode.sass Normal file
View file

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

4
app/views/layouts/application.html.haml
View file

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

100
app/views/static/image_mode.html.haml Normal file
View file

@ -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 <webmaster@openneo.net>. 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!
-------------------------------

1
config/routes.rb
View file

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

42
public/stylesheets/compiled/screen.css
View file

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