IE/non css3d fallback

3 files changed, 31 insertions, 5 deletions

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 01a2e54..41edafe 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -1,12 +1,9 @@
 
 if (is_mobile) {
-	$("html").addClass("mobile");
-}
-else if ($.browser.msie || ! has3d()) {
-	$("html").addClass("fallback");
+	$("html").addClass("mobile")
 }
 else {
- $("html").addClass("desktop");
+ $("html").addClass("desktop")
 }
 
 
@@ -22,6 +19,8 @@ app.init = function () {
 }
 
 app.launch = function () {
+  if ($.browser.msie || ! has3d()) { return app.fallback() }
+  
 	var movements
 
 	scene = new MX.Scene().addTo('#scene')
@@ -74,6 +73,18 @@ app.launch = function () {
 	window.scrollTo(0,0)
 }
 
+app.fallback = function(){
+  app.unsupported = true
+  var msg = "Sorry, your browser is not supported.<br><br>" +
+            "Please use <a href='http://chrome.com/'>Chrome</a> or <a href='https://www.apple.com/safari/'>Safari</a> or <a href='http://getfirefox.com/'>Firefox</a>."
+  var $fallback = $("<div>")
+  $fallback.attr('id', 'fallback')
+  $fallback.html(msg)
+  $('body').append($fallback)
+  $("#keyhint").hide()
+  $("#editorView").hide()
+}
+
 app.on = function(){
 	app.tube.on.apply(app.tube, arguments)
 }
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 4219a28..3532428 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -89,6 +89,7 @@ var SiteRouter = Router.extend({
 	layoutEditor: function(e, name){
 		app.mode.builder = true
 		app.launch()
+		if (app.unsupported) return
 
 		this.builderView = app.controller = new BuilderView()
 		this.builderView.load(name)
@@ -117,6 +118,7 @@ var SiteRouter = Router.extend({
 
 		app.mode.editor = true
 		app.launch()
+		if (app.unsupported) return
 
 		layout = slugify(layout)
 		
@@ -137,6 +139,7 @@ var SiteRouter = Router.extend({
 	projectEditor: function(e, name){
 		app.mode.editor = true
 		app.launch()
+		if (app.unsupported) return
 
 		this.editorView = app.controller = new EditorView()
 		this.editorView.load(name)
@@ -145,6 +148,7 @@ var SiteRouter = Router.extend({
 	projectViewer: function(e, name){
 		app.mode.editor = true
 		app.launch()
+		if (app.unsupported) return
 
 		this.readerView = app.controller = new ReaderView()
 		this.readerView.load(name)
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 07d1bbb..aecd6be 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1150,6 +1150,17 @@ border-left: 1px solid black;
 .desktop .logo:hover svg {
 	fill:white;
 }
+
+#fallback {
+  width: 400px;
+  margin: 10% auto;
+  border: 2px solid black;
+  padding: 30px 20px 30px 20px;
+}
+#fallback a {
+  border-bottom: 1px solid;
+}
+
 .profile{
   padding:8px;
   float:right;