add browser compatibility page

This commit is contained in:
devin 2013-03-13 15:49:20 +08:00 committed by Matt K. Fu
parent 9815950083
commit 0d5ab20efa
10 changed files with 151 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
app/assets/images/desktop/ie.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1,113 @@
/*
*This is a manifest file that'll automatically include all the stylesheets available in this directory
*and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
*the top of the compiled file, but it's generally better to create a new file per style scope.
*= require desktop/desktop-font
*= require bootstrap
*= require bootstrap-orbit
*= require icons
*= require desktop/desktop-main
*= require desktop/desktop-media
*= require orbit-bar
*/
html, body, #compatibility {
height: 100%;
*overflow: hidden;
}
header {
display: block;
}
body {
background: #7DAE0F url(compatibility_bg.jpg) center top no-repeat;
}
#compatibility {
position: relative;
}
#support_list {
width: 516px;
height: 490px;
position: absolute;
left: 50%;
top: 50%;
margin: -245px 0 0 -258px;
}
#support_list li {
position: absolute;
overflow: hidden;
}
[data-col="1"] { left: 0;}
[data-col="2"] { left: 132px;}
[data-col="3"] { left: 264px;}
[data-col="4"] { left: 396px;}
[data-row="1"] { top: 0;}
[data-row="2"] { top: 132px;}
[data-row="3"] { top: 264px;}
[data-row="4"] { top: 396px;}
.app-chrome { background-color: #000;}
.app-safari { background-color: #666;}
.app-opera { background-color: #FF0000;}
.app-ie { background-color: #3399CC;}
.app-firefox { background-color: #FF6600;}
.appname {
color: #fff;
}
.appicon {
margin: 0 auto;
}
.w1.h1 .appname {
padding: 0 10px;
*width: 100px;
}
.w1.h1 .appicon {
margin-top: 24px;
*padding-top: 24px;
}
.w2.h2 .appname {
font-size: 21px;
font-weight: normal;
height: 50px;
line-height: 50px;
*width: 228px;
}
.w2.h2 .appicon {
width: 120px;
height: 120px;
margin-top: 64px;
*padding-top: 64px;
}
.w2.h1 .appname {
height: 120px;
line-height: 120px;
font-size: 21px;
left: 120px;
width: 132px;
padding-left: 0;
}
.w2.h1 .appicon {
width: 80px;
height: 80px;
margin: 20px;
*padding: 20px;
*margin: 0;
}
.desc {
font-size: 13px;
color: #333;
line-height: 1.2em;
font-family: Arial, sans-serif;
width: 100%;
}
.desc h1 {
font-size: 21px;
padding: 16px 0;
*padding: 10px 0;
font-family: Cuprum, sans-serif;
color: #000;
}
.op09 { filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90); }
.op07 { filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); }

View File

@ -1 +1,35 @@
You have a bad browser ...!!! <div id="compatibility">
<div id="support_list">
<ul>
<li class="w2 h2" data-col="1" data-row="1">
<span class="tile op07 app-chrome"></span>
<a href="http://www.google.com/chrome" target="_blank" title="Get the latest Google Chrome!" class="appicon"><%= image_tag("desktop/chrome.png", :alt => "Google Chrome") %></a>
<h1 class="appname">Google Chrome</h1>
</li>
<li class="w2 h1" data-col="1" data-row="3">
<span class="tile op07 app-safari"></span>
<a href="http://www.apple.com/safari" target="_blank" title="Get the latest Safari!" class="appicon"><%= image_tag("desktop/safari.png", :alt => "Safari") %></a>
<h1 class="appname">Safari</h1>
</li>
<li class="w1 h1" data-col="3" data-row="1">
<span class="tile op07 app-opera"></span>
<a href="http://www.opera.com/download" target="_blank" title="Get the latest Opera!" class="appicon"><%= image_tag("desktop/opera.png", :alt => "Opera") %></a>
<h1 class="appname">Opera</h1>
</li>
<li class="w1 h1" data-col="4" data-row="1">
<span class="tile op09 app-ie"></span>
<a href="http://microsoft.com/ie" target="_blank" title="Get the latest Internet Explorer!" class="appicon"><%= image_tag("desktop/ie.png", :alt => "Internet Explorer") %></a>
<h1 class="appname">Internet Explorer</h1>
</li>
<li class="w2 h2" data-col="3" data-row="2">
<span class="tile op07 app-firefox"></span>
<a href="http://www.mozilla.org/firefox" target="_blank" title="Get the latest Firefox!" class="appicon"><%= image_tag("desktop/firefox.png", :alt => "Firefox") %></a>
<h1 class="appname">Firefox</h1>
</li>
<li class="desc" data-col="1" data-row="4">
<h1>Your browser is out of date or does not support JavaScript</h1>
To take full advantage of <b>Orbit Desktop</b> you need to enable JavaScript, or upgrade your browser to the latest version.
</li>
</ul>
</div>
</div>

View File

@ -2,14 +2,12 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Error</title> <title>Oops!</title>
<%= stylesheet_link_tag "desktop" %> <%= stylesheet_link_tag "desktop/desktop-compatibility" %>
<%= yield :page_specific_css %> <%= yield :page_specific_css %>
<%= csrf_meta_tag %> <%= csrf_meta_tag %>
</head> </head>
<body> <body>
<%= render 'layouts/orbit_bar' %>
<%= yield %> <%= yield %>
</body> </body>
</html> </html>

View File

@ -5,7 +5,7 @@
<noscript> <noscript>
<meta http-equiv="refresh" content="0; URL=/compatibility"> <meta http-equiv="refresh" content="0; URL=/compatibility">
</noscript> </noscript>
<!--[if lte IE 8]> <!--[if lt IE 8]>
<meta http-equiv="refresh" content="0; URL=/compatibility" /> <meta http-equiv="refresh" content="0; URL=/compatibility" />
<![endif]--> <![endif]-->
<meta charset="utf-8"> <meta charset="utf-8">