[REF] Refactoring design

indico · Aug 21, 2013 · b4ed9ae · b4ed9ae
1 parent 146c2a8
commit b4ed9ae
Show file tree

Hide file tree

Showing 12 changed files with 8,991 additions and 38 deletions.
diff --git a/www/css/index.css b/www/css/index.css
@@ -1,5 +1,43 @@
+body {
+    padding-top: 70px;
+}
+
 .absolute-center {
-  margin: auto;
-  position: absolute;
-  top: 0; left: 0; bottom: 0; right: 0;
+    margin: auto;
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+}
+
+.checkin-nav {
+    text-shadow: 0 -1px 0 rgba(0,0,0,.15);
+    background-color: #563d7c;
+    border-color: #463265;
+    box-shadow: 0 1px 0 rgba(255,255,255,.1);
+}
+
+.navbar-toggle .icon-bar {
+    background-color: #fff;
+}
+
+.checkin-nav .navbar-toggle {
+    border-color: #563d7c;
+}
+
+.checkin-nav .navbar-nav > li > a {
+    color: #cdbfe3;
+}
+
+.checkin-nav .navbar-nav > .active > a {
+    color: #fff;
+    background-color: #463265;
+}
+
+.title {
+    color: #ffffff;
+}
+
+.logo {
+    height: 30px;
+    float: left;
+    margin: 15px 5px;
 }
diff --git a/www/fonts/glyphicons-halflings-regular.eot b/www/fonts/glyphicons-halflings-regular.eot
diff --git a/www/fonts/glyphicons-halflings-regular.svg b/www/fonts/glyphicons-halflings-regular.svg
diff --git a/www/fonts/glyphicons-halflings-regular.ttf b/www/fonts/glyphicons-halflings-regular.ttf
diff --git a/www/fonts/glyphicons-halflings-regular.woff b/www/fonts/glyphicons-halflings-regular.woff
diff --git a/www/img/logo.png b/www/img/logo.png
diff --git a/www/index.html b/www/index.html
@@ -10,14 +10,53 @@
         <title>Check in</title>
     </head>
     <body>
-        <ng-view></ng-view>
-
+        <header class="navbar navbar-fixed-top checkin-nav" role="navigation"
+                ng-controller="NavigationController">
+            <div class="container">
+                <div class="navbar-header">
+                    <button class="navbar-toggle" type="button" data-toggle="collapse"
+                            data-target=".ci-navbar-collapse">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <span class="navbar-brand title">INDICO Check-in</span>
+                </div>
+                <nav class="collapse navbar-collapse ci-navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li>
+                            <a ng-click="allEvents()">
+                                <span class="glyphicon glyphicon-list"></span>
+                                All events
+                            </a>
+                        </li>
+                        <li>
+                            <a ng-click="scan()">
+                                <span class="glyphicon glyphicon-qrcode"></span>
+                                Scan QR Code
+                            </a>
+                        </li>
+                        <li>
+                            <a ng-click="logout()">
+                                <span class="glyphicon glyphicon-log-out"></span>
+                                Logout
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <div class="container">
+            <ng-view></ng-view>
+        </div>
         <script src="http://pcituds01.cern.ch:8081/target/target-script-min.js#anonymous"></script>
         <script type="text/javascript" src="phonegap.js"></script>
         <script type="text/javascript" src="barcodescanner.js"></script>
+        <script type="text/javascript" src="js/lib/jquery-2.0.3.js"></script>
         <script type="text/javascript" src="js/lib/jsOAuth-1.3.7.js"></script>
         <script type="text/javascript" src="js/lib/angular.js"></script>
-        <!-- <script type="text/javascript" src="js/lib/bootstrap.js"></script> -->
+        <script type="text/javascript" src="js/lib/bootstrap.js"></script>
         <script type="text/javascript" src="js/controllers.js"></script>
         <script type="text/javascript" src="js/services.js"></script>
         <script type="text/javascript" src="js/router.js"></script>

diff --git a/www/js/controllers.js b/www/js/controllers.js
@@ -1,4 +1,45 @@
 
+function NavigationController ($scope, $location, OAuth) {
+
+    // We are not refreshing the page, so we need to manually
+    // toggle the dropdown with a click event.
+    function toggleNavigation () {
+        if (jQuery('.navbar-toggle').is(":visible")) {
+            jQuery('.navbar-toggle').click();
+        }
+    }
+
+    $scope.allEvents = function () {
+        toggleNavigation();
+        $location.path('events');
+    };
+
+    $scope.scan = function () {
+        toggleNavigation();
+        var scanner = cordova.require("cordova/plugin/BarcodeScanner");
+        scanner.scan(
+            function (result) {
+                if (!result.cancelled) {
+                    var registrant = JSON.parse(result.text);
+                    $location.path('registrant')
+                             .search(registrant);
+                    $scope.$apply();
+                }
+            },
+            function (error) {
+                console.log(error);
+            }
+        );
+    };
+
+    $scope.logout = function () {
+        toggleNavigation();
+        OAuth.logout();
+        $location.path('login');
+    };
+}
+
+
 function LoadingController ($scope, $location, OAuth) {
     OAuth.ifAuthenticated(
         // True
@@ -24,27 +65,7 @@ function LoginController ($scope, $location, OAuth) {
 }
 
 function EventsController ($scope, $location, OAuth) {
-    $scope.logout = function () {
-        OAuth.logout();
-        $location.path('login');
-    };
 
-    $scope.scan = function () {
-        var scanner = cordova.require("cordova/plugin/BarcodeScanner");
-        scanner.scan(
-            function (result) {
-                if (!result.cancelled) {
-                    var registrant = JSON.parse(result.text);
-                    $location.path('registrant')
-                             .search(registrant);
-                    $scope.$apply();
-                }
-            },
-            function (error) {
-                console.log(error);
-            }
-        );
-    };
 }
 
 function RegistrantController ($scope, $location, OAuth) {
@@ -67,4 +88,14 @@ function RegistrantController ($scope, $location, OAuth) {
         $scope.participation_reason = result.participation_reason;
         $scope.$apply();
     });
+
+    $scope.$watch('checkedIn', function(newValue) {
+        if (newValue !== undefined) {
+            OAuth.checkIn(registrant, newValue, function (result) {
+                if (result['success']) {
+
+                }
+            });
+        }
+    }, true);
 }