image mode welcome page
This commit is contained in:
parent
c34f250da3
commit
c6a7bfffa1
7 changed files with 145 additions and 16 deletions
|
@ -16,6 +16,7 @@
|
||||||
@import outfits/show
|
@import outfits/show
|
||||||
@import pets/bulk
|
@import pets/bulk
|
||||||
@import static/donate
|
@import static/donate
|
||||||
|
@import static/image_mode
|
||||||
@import static/terms
|
@import static/terms
|
||||||
@import users/top_contributors
|
@import users/top_contributors
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,9 @@ body.static-donate
|
||||||
|
|
||||||
img
|
img
|
||||||
border: $image-mode-preview-border-width solid $module-border-color
|
border: $image-mode-preview-border-width solid $module-border-color
|
||||||
|
height: $image-mode-preview-image-width
|
||||||
margin-bottom: .5em
|
margin-bottom: .5em
|
||||||
|
width: $image-mode-preview-image-width
|
||||||
|
|
||||||
figcaption
|
figcaption
|
||||||
display: block
|
display: block
|
||||||
|
|
11
app/stylesheets/static/_image_mode.sass
Normal file
11
app/stylesheets/static/_image_mode.sass
Normal 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
|
||||||
|
|
|
@ -36,9 +36,9 @@
|
||||||
#userbar
|
#userbar
|
||||||
- if user_signed_in?
|
- if user_signed_in?
|
||||||
- if can_use_image_mode?
|
- 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'
|
= image_tag 'image_mode_icon.png', :alt => 'Image Mode'
|
||||||
Thank you!
|
Welcome to Image Mode!
|
||||||
%span
|
%span
|
||||||
Hey,
|
Hey,
|
||||||
= succeed '!' do
|
= succeed '!' do
|
||||||
|
|
100
app/views/static/image_mode.html.haml
Normal file
100
app/views/static/image_mode.html.haml
Normal 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!
|
||||||
|
-------------------------------
|
||||||
|
|
|
@ -42,6 +42,7 @@ OpenneoImpressItems::Application.routes.draw do |map|
|
||||||
match '/wardrobe' => 'outfits#edit', :as => :wardrobe
|
match '/wardrobe' => 'outfits#edit', :as => :wardrobe
|
||||||
|
|
||||||
match '/donate' => 'static#donate', :as => :donate
|
match '/donate' => 'static#donate', :as => :donate
|
||||||
|
match 'image-mode' => 'static#image_mode', :as => :image_mode
|
||||||
match '/terms' => 'static#terms', :as => :terms
|
match '/terms' => 'static#terms', :as => :terms
|
||||||
|
|
||||||
match '/sitemap.xml' => 'sitemap#index', :as => :sitemap, :format => :xml
|
match '/sitemap.xml' => 'sitemap#index', :as => :sitemap, :format => :xml
|
||||||
|
|
|
@ -2603,36 +2603,38 @@ body.static-donate #image-mode-preview {
|
||||||
/* line 47, ../../../app/stylesheets/static/_donate.sass */
|
/* line 47, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-preview img {
|
body.static-donate #image-mode-preview img {
|
||||||
border: 1px solid #006600;
|
border: 1px solid #006600;
|
||||||
|
height: 300px;
|
||||||
margin-bottom: 0.5em;
|
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 {
|
body.static-donate #image-mode-preview figcaption {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: Calligraffitti;
|
font-family: Calligraffitti;
|
||||||
font-size: 250%;
|
font-size: 250%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
/* line 57, ../../../app/stylesheets/static/_donate.sass */
|
/* line 59, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #campaign-donors {
|
body.static-donate #campaign-donors {
|
||||||
display: none;
|
display: none;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
width: 344px;
|
width: 344px;
|
||||||
}
|
}
|
||||||
/* line 62, ../../../app/stylesheets/static/_donate.sass */
|
/* line 64, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #campaign-donors ol {
|
body.static-donate #campaign-donors ol {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
}
|
}
|
||||||
/* line 66, ../../../app/stylesheets/static/_donate.sass */
|
/* line 68, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #campaign-donors ol span {
|
body.static-donate #campaign-donors ol span {
|
||||||
color: #448844;
|
color: #448844;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
/* line 70, ../../../app/stylesheets/static/_donate.sass */
|
/* line 72, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #campaign-donors.has-donors {
|
body.static-donate #campaign-donors.has-donors {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
/* line 79, ../../../app/stylesheets/static/_donate.sass */
|
/* line 81, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta {
|
body.static-donate #image-mode-beta {
|
||||||
background: #eeffee;
|
background: #eeffee;
|
||||||
border: 1px solid #006600;
|
border: 1px solid #006600;
|
||||||
|
@ -2645,35 +2647,35 @@ body.static-donate #image-mode-beta {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 404px;
|
width: 404px;
|
||||||
}
|
}
|
||||||
/* line 89, ../../../app/stylesheets/static/_donate.sass */
|
/* line 91, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta header {
|
body.static-donate #image-mode-beta header {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
/* line 93, ../../../app/stylesheets/static/_donate.sass */
|
/* line 95, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta p {
|
body.static-donate #image-mode-beta p {
|
||||||
font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
|
font-family: "Droid Sans", Helvetica, Arial, Verdana, sans-serif;
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
/* line 98, ../../../app/stylesheets/static/_donate.sass */
|
/* line 100, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta form {
|
body.static-donate #image-mode-beta form {
|
||||||
margin: 0.75em 0;
|
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 {
|
body.static-donate #image-mode-beta form label {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: bold;
|
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 {
|
body.static-donate #image-mode-beta form label:after {
|
||||||
content: ":";
|
content: ":";
|
||||||
}
|
}
|
||||||
/* line 108, ../../../app/stylesheets/static/_donate.sass */
|
/* line 110, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta form input {
|
body.static-donate #image-mode-beta form input {
|
||||||
width: 5em;
|
width: 5em;
|
||||||
}
|
}
|
||||||
/* line 111, ../../../app/stylesheets/static/_donate.sass */
|
/* line 113, ../../../app/stylesheets/static/_donate.sass */
|
||||||
body.static-donate #image-mode-beta form button {
|
body.static-donate #image-mode-beta form button {
|
||||||
background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
|
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 {
|
body.static-donate #image-mode-beta form button:hover {
|
||||||
background-color: #ee4b00;
|
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 {
|
body.static-donate #image-mode-description, body.static-donate #image-mode-comments {
|
||||||
float: right;
|
float: right;
|
||||||
width: 436px;
|
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 */
|
/* line 1, ../../../app/stylesheets/static/_terms.sass */
|
||||||
body.static-terms {
|
body.static-terms {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue