Initial changes to support mobile version of UI.

intuit · Jan 13, 2017 · 6c419ad · 6c419ad
1 parent 9ce0ef7
commit 6c419ad
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 11 deletions.
diff --git a/modules/ui/Gruntfile.js b/modules/ui/Gruntfile.js
@@ -67,7 +67,7 @@ module.exports = function (grunt) {
             options: {
                 port: 9000,
                 // Change this to '0.0.0.0' to access the server from outside.
-                hostname: 'localhost',
+                hostname: '0.0.0.0',
                 livereload: 35729
             },
             livereload: {

diff --git a/modules/ui/app/images/hamburger-icon.svg b/modules/ui/app/images/hamburger-icon.svg
diff --git a/modules/ui/app/images/hamburger_sprites.svg b/modules/ui/app/images/hamburger_sprites.svg
diff --git a/modules/ui/app/images/logout-icon.svg b/modules/ui/app/images/logout-icon.svg
diff --git a/modules/ui/app/index.html b/modules/ui/app/index.html
@@ -8,7 +8,7 @@
     <meta charset="utf-8">
     <title>Experiment Admin</title>
     <meta name="description" content="">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="cache-control" content="max-age=0" />
     <meta http-equiv="cache-control" content="no-cache" />
     <meta http-equiv="expires" content="0" />
@@ -69,6 +69,13 @@ <h1></h1>
             <div class="idea"></div>
         </div>
     </header>
+    <div class="sticky-nav-bar">
+        <nav class="hamburger-nav"> </nav>
+        <a href="/" class="clickable-area"></a>
+        <a href="#" class="logout-button-container" ng-controller="SignOutCtrl" onclick="return false;" ng-click="signOut()">
+          <div class="image-button logout-button" data-qty=""></div>
+        </a>
+    </div>
 
     <div id="mainContent">
         <!-- MAIN CONTENT AND INJECTED VIEWS  -->

diff --git a/modules/ui/app/scripts/app.js b/modules/ui/app/scripts/app.js
@@ -1,6 +1,12 @@
 /* global wasabiUIPlugins:false */
 'use strict';
 
+window.mobilecheck = function() {
+  var check = false;
+  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+  return check;
+};
+
 /*
  * create sub modules (with [] in the end)
  */
@@ -194,7 +200,8 @@ angular.module('wasabi', [
                             $rootScope.originalPage = next.name;
                             $rootScope.originalURI = $window.location.hash;
                             $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
-                            $state.go('signin');
+                            $rootScope.goToSignin();
+                            //$state.go('signin');
                         }
                     }
                 }
@@ -216,6 +223,5 @@ angular.module('wasabi', [
             $rootScope.multiply100 = function (value) {
                 return parseFloat((value * 100).toFixed(8));
             };
-
         }
     ]);
diff --git a/modules/ui/app/scripts/controllers/ExperimentsCtrl.js b/modules/ui/app/scripts/controllers/ExperimentsCtrl.js
@@ -30,6 +30,8 @@ angular.module('wasabi.controllers').
                 enableCardView: false
             };
 
+            $scope.msg = 'nothing';
+
             // We save the $scope.data object above after a search so we have it when we come back to the list
             // from a Details dialog.  We don't want to save the pagedItems list, so putting it in a separate attribute.
             $scope.pagedData = {
@@ -312,6 +314,7 @@ angular.module('wasabi.controllers').
                 $scope.doLoadExperiments(true, $scope.cardViewItemsPerPage, $scope.cardViewData.cardViewCurrentPage, function(data) {
                     var experiments = data.experimentDetails;
                     if (experiments) {
+                    $scope.msg = 'Num: ' + experiments.length;
                         // Initialize all the experiments selected values to false so the checkboxes (when list used in selection dialog) will be unchecked.
                         for (var i = 0; i < experiments.length; i++) {
                             if (experiments[i]) {
@@ -397,6 +400,13 @@ angular.module('wasabi.controllers').
             if (Session && Session.switches) {
                 $scope.data.enableCardView = Session.switches.ShowCardView;
             }
+
+            if (window.mobilecheck()) {
+                // Force card view
+                $scope.data.enableCardView = true;
+                $scope.data.showGrid = true;
+            }
+
             // If this user has turned on Card View and we've saved it in a cookie, enable it (or use the saved value).
             if ($scope.data.enableCardView) {
                 if ($cookies.wasabiCardViewSetting) {

diff --git a/modules/ui/app/scripts/controllers/SignInCtrl.js b/modules/ui/app/scripts/controllers/SignInCtrl.js
@@ -11,6 +11,8 @@ angular.module('wasabi.controllers')
                     password: ''
                 };
 
+                $scope.viewWidth = document.documentElement.clientWidth;
+
                 UtilitiesFactory.hideHeading(true);
 
                 $scope.handleOriginalPage = function() {
@@ -70,10 +72,6 @@ angular.module('wasabi.controllers')
                     }));
 
                     return AuthFactory.signIn().$promise.then(function(result) {
-/*
-                        console.log('In SignInCtrl');
-                        console.log(result);
-*/
                         localStorage.removeItem('wasabiLastSearch');
 
                         var sessionInfo = {userID: credentials.username, accessToken: result.access_token, tokenType: result.token_type};

diff --git a/modules/ui/app/scripts/services/UtilitiesFactory.js b/modules/ui/app/scripts/services/UtilitiesFactory.js
@@ -171,9 +171,11 @@ angular.module('wasabi.services').factory('UtilitiesFactory', ['Session', '$stat
             hideHeading: function(flag) {
                 if (flag) {
                     $('header').hide();
+                    $('.sticky-nav-bar').addClass('sticky-nav-bar-logged-off');
                 }
                 else {
                     $('header').show();
+                    $('.sticky-nav-bar').removeClass('sticky-nav-bar-logged-off');
                 }
             },
 

diff --git a/modules/ui/app/styles/wasabi.scss b/modules/ui/app/styles/wasabi.scss
@@ -186,8 +186,7 @@ header {
 }
 
 #mainContent {
-  width: 1000px;
-  margin: 0 auto 20px auto;
+  margin: 0 20px 20px 20px;
 }
 
 .truncateDiv {
@@ -4481,3 +4480,109 @@ form input.ng-dirty.ng-invalid:not(.ng-focused) {
 .gridWithAdvanced {
     margin-top: 40px;
 }
+
+/* Changes to support mobile version */
+
+nav.hamburger-nav {
+    display: block;
+    height: 56px;
+    min-height: 56px;
+    width: 56px;
+    min-width: 56px;
+    cursor: pointer;
+    background-color: transparent;
+    background-image: url(/images/hamburger_sprites.svg);
+    background-position: 20px 20px;
+    background-repeat: no-repeat;
+    background-size: 20px auto;
+}
+
+.logout-button-container {
+    text-align: center;
+    display: block;
+    height: 56px;
+    min-height: 56px;
+    width: 56px;
+    min-width: 56px;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.logout-button {
+    display: inline-block;
+    margin-top: 20px;
+    width: 20px;
+    height: 20px;
+    background-image: url(/images/logout-icon.svg);
+    background-size: 20px auto;
+    background-repeat: no-repeat;
+    position: relative;
+}
+
+.sticky-nav-bar {
+    display: none;
+    position: fixed;
+    background-color: white;
+    left: 0px;
+    right: 0px;
+    z-index: 19;
+}
+
+.sticky-nav-bar-logged-off {
+    display: none !important;
+}
+
+.mobile-spacer {
+    height: 0;
+}
+
+@media (max-width: 768px) {
+    #mainContent {
+        margin: 0 auto 20px auto;
+    }
+
+    #exprSummary > li {
+        height: 600px;
+        width: 355px;
+        margin-left: 10px;
+        .summaryBody .bucketsTable {
+            td {
+                width: 100%;
+            }
+        }
+    }
+
+    .signinBox {
+        width: 275px;
+    }
+
+    .sticky-nav-bar {
+        display: block;
+    }
+
+    .mobile-spacer {
+        height: 60px;
+    }
+
+    header {
+        display: none !important;
+    }
+
+    .toolbar {
+        display: none !important;
+    }
+}
+
+@media (max-width: 414px) {
+    #exprSummary > li {
+        margin-left: 30px;
+    }
+}
+
+@media (max-width: 375px) {
+    #exprSummary > li {
+        margin-left: 10px;
+    }
+}
diff --git a/modules/ui/app/views/ExperimentTable.html b/modules/ui/app/views/ExperimentTable.html
@@ -1,4 +1,5 @@
 <div ng-controller="ExperimentsCtrl">
+    <div class="mobile-spacer">&nbsp;</div>
     <div class="toolbar">
         <a href="" onclick="return false;" id="searchMoreLess" title="More Search Options" ng-show="!noExperiments" ng-click="showMoreLessSearch();"><span></span></a>
         <button id="btnNewExperiment" class="blue" ng-click="openExperimentModal()" ng-class="{disabled: !applicationsLoaded}" ng-disabled="!applicationsLoaded">Create Experiment</button>

diff --git a/modules/ui/app/views/SignIn.html b/modules/ui/app/views/SignIn.html
@@ -1,7 +1,7 @@
 <div class="signinBox">
     <form name="signInForm" ng-submit="signIn(credentials)" novalidate>
      <h1>Wasabi Service</h1>
-     <h2>Please sign in with your login.</h2>
+     <h2>Please sign in with your {{viewWidth}} login.</h2>
 
         <div class="signinLogo">
             <input type="text" id="userId" ng-model="credentials.username" auto-focus placeholder="User ID"/>