Mobile detection

Author: Nicholas Thomson

app/index.html

@@ -47,7 +47,7 @@
         </script>
         <!-- Add your site or application content here -->
 
-        <div id="splash" role="splash" ng-if="!isIE()">
+        <div id="splash" role="splash" ng-if="!isIE && !isMobile">
             <a class='forkme' target='_blank' href='https://github.com/cloudspace/angular.crunchinator.com'>
                 <img src='images/forkme_right_ribbon.png' alt='Fork me on GitHub' />
             </a>
@@ -62,15 +62,19 @@
             </div>
         </div>
 
-        <div id="main" role="main" ui-view="main" ng-if="!isIE()">
+        <div id="main" role="main" ui-view="main" ng-if="!isIE && !isMobile">
         </div>
-        <div class='no-ie' ng-if="isIE()">
+        <div class='no-ie' ng-if="isIE">
             The Crunchinator does not currently support Internet Explorer due to poor Javascript performance. <br />
             Please check us out with
             <a href='https://www.google.com/intl/en/chrome/browser/'>Chrome</a>,
             <a href='http://www.mozilla.org/en-US/firefox/new/'>Firefox</a>,
             or <a href='https://www.apple.com/safari/'>Safari</a>.
         </div>
+        <div class='no-ie' ng-if="isMobile">
+            The Crunchinator is a desktop-only experience due to the processing required. <br />
+            Please visit us on your desktop.
+        </div>
         <div id="about" role="about" ui-view="about">
         </div>
 
@@ -119,6 +123,7 @@
         <script src="scripts/services/fundingRound.js"></script>
         <script src="scripts/services/componentData.js"></script>
         <script src="scripts/services/bitly.js"></script>
+        <script src="scripts/services/isMobile.js"></script>
 
         <script src="scripts/controllers/crunchinator.js"></script>
         <script src="scripts/controllers/about.js"></script>

app/scripts/app.js

@@ -41,11 +41,13 @@ angular.module('crunchinatorApp', [
 .run(function run() {
 })
 
-.controller('AppCtrl', function AppCtrl($scope, $location) {
-    $scope.isIE = function() {
+.controller('AppCtrl', function AppCtrl($scope, $location, IsMobile) {
+    $scope.isIE = (function() {
         var myNav = navigator.userAgent.toLowerCase();
         return (myNav.indexOf('msie') !== -1) ? parseInt(myNav.split('msie')[1]) : false;
-    };
+    })();
+
+    $scope.isMobile = IsMobile.any();
 
     $scope.shared_results = !!$location.search().filters;
 
@@ -55,7 +57,7 @@ angular.module('crunchinatorApp', [
         }
     });
 
-    if($scope.isIE()){
+    if($scope.isIE || $scope.isMobile){
         angular.element('html, body').css({
             'overflow': 'visible'
         });

app/scripts/controllers/about.js

@@ -1,13 +1,14 @@
 'use strict';
 
 angular.module('crunchinatorApp.controllers')
-.controller('AboutCtrl', [
-    '$scope',
-    function AboutCtrl($scope) {
+.controller('AboutCtrl',  [
+    '$scope', 'IsMobile',
+    function AboutCtrl($scope, IsMobile) {
         var section = angular.element('#about');
         var body = angular.element('body');
 
         $scope.showPage = 'about';
+        $scope.isMobile = IsMobile.any();
 
         $scope.navigate = function(page) {
             if (body.scrollTop() === section.offset().top) {

app/styles/main.less

@@ -628,7 +628,7 @@ header{
         color: @light-grey;
         text-align: left;
         padding: 70px 40px 70px 135px;
-        margin: 10px 20px 10px 0px;
+        margin: 10px 0 10px 0px;
         border: solid 1px @light-grey2;
         border-radius: 5px;
         box-sizing: border-box;

app/views/about.tpl.html

@@ -1,17 +1,13 @@
 <div class='about-contain'>
-    <div id="about-header"  affix parent='#about'>
-        <div class='forkme' >
+    <div id="about-header" affix parent='#about'>
+        <div class='forkme'>
             <a target='_blank' href='https://github.com/cloudspace/angular.crunchinator.com'>
                 <img src='/images/forkme_right_ribbon.png' alt='Fork me on GitHub' />
             </a>
         </div>
         <div class="header-text">
             <h2><a href="http://cloudspace.com/" class="cloudspace-logo">cloudspace</a></h2>
             <nav>
-                <ul>
-
-                </ul>
-
                 <ul class="nav nav-pills">
                     <li ng-class="{active: showPage=='about'}"><a ng-click="navigate('about')" href="#about">About Us
                     <li ng-class="{active: showPage=='faq'}"><a ng-click="navigate('faq')" href="#faq">F.A.Q</a></li></a></li>