detect os in browser and show proper download link

We add a class to the html element based on the detected os and use that to pick which download link should be visible.

If we detect an os that is not supported we display a deactivated download link instead with all alternatives.

2 files changed, 80 insertions, 8 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index cd90934..03a40da 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -16,9 +16,8 @@
 //= require bootstrap
 //= require rails.validations
 //= require rails.validations.simple_form
-
 //= require leap
+//= require platform
 //= require tickets
 //= require users
-
 //= require_tree .
diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss
index b382773..30f7741 100644
--- a/app/assets/stylesheets/leap.scss
+++ b/app/assets/stylesheets/leap.scss
@@ -43,25 +43,95 @@
 }
 
 //
+// OS specific
+//
+
+.os-android {
+  display: none !important;
+}
+
+html.android .os-android {
+  display: inherit !important;
+}
+
+.os-linux32 {
+  display: none !important;
+}
+
+html.linux .os-linux32 {
+  display: inherit !important;
+}
+
+.os-linux64 {
+  display: none !important;
+}
+
+html.linux64 .os-linux64 {
+  display: inherit !important;
+}
+
+.os-windows {
+  display: none !important;
+}
+
+html.windows .os-windows {
+  display: inherit !important;
+}
+
+.os-mac {
+  display: none !important;
+}
+
+html.mac .os-mac {
+  display: inherit !important;
+}
+
+.os-other {
+  display: none !important;
+}
+
+html.oldmac, html.oldwin, html.ios, html.fxos, html.other {
+  .os-other {
+    display: inherit !important;
+  }
+}
+
+//
 // ICONS
 //
 
-[class^="big-icon-"],
-[class*=" big-icon-"] {
+[class*="-icon-"] {
   display: inline-block;
-  width: 32px;
-  height: 32px;
   @include ie7-restore-right-whitespace();
-  line-height: 32px;
   vertical-align: middle;
   background-repeat: no-repeat;
   margin-top: 1px;
 }
 
+[class^="big-icon-"],
+[class*=" big-icon-"] {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+[class^="huge-icon-"],
+[class*=" huge-icon-"] {
+  width: 128px;
+  height: 128px;
+  line-height: 128px;
+}
+
+
 .big-icon-arrow-down {
   background-image: url(/leap-img/32/arrow-down.png)
 }
 
+.huge-icon-mask {
+  height: 64px;
+  background-image: url(/leap-img/128/mask.png)
+}
+
 //
 // TYPOGRAPHY
 //
@@ -152,6 +222,9 @@ input, textarea {
   .download {
     a.btn {
       width: 14em;
+      small {
+        font-weight: normal;
+      }
     }
   }
   a.btn {
@@ -191,4 +264,4 @@ input, textarea {
 
 .overview li {
   padding: 6px 0;
-}
\ No newline at end of file
+}