CORD GUI -- Login page now takes emails to log into different accounts. Bundle page layout WIP.

Change-Id: I4af52d68f481b637a9b5576ddaba0bad1d113c28

-<!--
-  ~ Copyright 2015 Open Networking Laboratory
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
+<!--Foot partial html-->
 <div class="foot">
     <div class="left">
         Sample copyright notice here

-<div id="available">
+<div ng-cloak class="ng-hide ng-cloak" ng-show="show" id="available">
     <h3>{{available.name}}</h3>
     <p>{{available.desc}}</p>
     <button ng-click="changeBundle(available.id)">Apply</button>

@@ -16,13 +16,11 @@
 
 div#bundle div.main-left {
     width: 61%;
-    padding-left: 1%;
+    padding: 4% 0 0 1%;
 }
 div#bundle div.main-right {
     width: 37%;
-    height: 85vh;
-    background-color: rgba(173, 216, 230, 0.25);
-    border-radius: 5px;
+    padding-top: 4%;
 }
 
 #bundle table {
@@ -57,18 +55,42 @@ div#bundle div.main-right {
     border: none;
 }
 
+#bundle img {
+    width: 100%;
+}
+
 #bundle h2 {
     text-align: center;
     padding: 3%;
-    background-color: rgba(173, 216, 230, 0.75);
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    color: white;
-    font-weight: normal;
+    font-weight: lighter;
+    border: 1px solid #3C3C3C;
+    cursor: pointer;
+}
+#bundle h2:hover {
+    color: #CE5650;
+    border-color: #CE5650;
+}
+
+div#bundles {
+    position: relative;
+}
+
+div#available.ng-hide-add.ng-hide-add-active,
+div#available.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.5s;
+    transition: all linear 0.5s;
+}
+div#available.ng-hide {
+    opacity: 0;
+    top: -80px;
 }
 
 div#available {
+    position: absolute;
     padding: 5%;
+    opacity: 1;
+    top: -10px;
+    width: 100%;
 }
 
 #available p {

@@ -13,7 +13,10 @@
         </table>
     </div>
     <div class="main-right">
+        <img src="imgs/binary.jpg">
+        <div ng-click="showBundles()">
             <h2>Available Bundles</h2>
-        <div bundle-available></div>
+        </div>
+        <div id="bundles" bundle-available></div>
     </div>
 </div>
\ No newline at end of file

@@ -28,6 +28,7 @@
                 var BundleData, resource,
                     getData;
                 $scope.page.curr = 'bundle';
+                $scope.show = false;
 
                 getData = function (id) {
                     if (!id) { id = ''; }
@@ -61,6 +62,10 @@
                     getData(id);
                 };
 
+                $scope.showBundles = function () {
+                    $scope.show = !$scope.show;
+                };
+
                 $log.debug('Cord Bundle Ctrl has been created.');
             }])
 

@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+[ng\:cloak], [ng-cloak], .ng-cloak {
+    display: none !important;
+}
+
 head, body, footer,
 h1, h2, h3, h4, h5, h6, p,
 a, ul, li, div,
@@ -27,6 +31,7 @@ h1, h2, h3, h4, h5, h6,
 p, a, li, th, td,
 select, input, option, label {
     font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
+    color: #3C3C3C;
 }
 
 body {
@@ -57,7 +62,7 @@ h5 {
     margin-bottom: 1%;
 }
 p {
-    font-size: 70%;
+    font-size: 100%;
     color: rgba(0,0,0, 0.8);
     text-indent: 20px;
     text-align: justify;

@@ -9,9 +9,11 @@
             <div class="outline"></div>
                 <h2>Subscriber Portal</h2>
                 <form>
-                    <input type="text" placeholder="email">
+                    <input ng-model="email" type="text" placeholder="email">
                     <input type="password" placeholder="password">
-                    <a href="#/home"><input type="button" value="Log In"></a>
+                    <a href="#/home">
+                        <input ng-click="login()" type="button" value="Log In">
+                    </a>
                 </form>
         </div>
     </div>

@@ -16,11 +16,25 @@
 
 (function () {
     'use strict';
+    var urlSuffix = '/rs/login';
 
     angular.module('cordLogin', [])
-        .controller('CordLoginCtrl', ['$log', '$scope',
-            function ($log, $scope) {
+        .controller('CordLoginCtrl', ['$log', '$scope', '$resource',
+            function ($log, $scope, $resource) {
+                var LoginData, resource;
                 $scope.page.curr = 'login';
+
+                $scope.login = function () {
+                    var email;
+                    if (!$scope.email) {
+                        email = 'mom@user.org';
+                    } else {
+                        email = $scope.email
+                    }
+                    LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
+                    resource = LoginData.get();
+                };
+
                 $log.debug('Cord Login Ctrl has been created.');
         }]);
 }());