add browser compatibility page

app/assets/stylesheets/desktop/desktop-compatibility.css

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

app/views/desktop/compatibility.html.erb

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

app/views/layouts/compatibility.html.erb

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

app/views/layouts/desktop.html.erb

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