CORD GUI -- Images updated and other CSS added. CORD logo no longer goes to Home page.

Change-Id: I1f6c26dd0918b801d1c4f0b517f0dd50d2cadfb0

@@ -40,6 +40,9 @@ div.mast {
 
 .mast h1 {
     font-size: 250%;
+    text-decoration: none;
+    color: #3C3C3C;
+    cursor: default;
 }
 
 .mast a,
@@ -63,9 +66,10 @@ div.mast {
     right: 0;
     top: 50%;
     transform: translate(0, -50%);
+    font-size: 90%;
 }
 .mast li.logout:hover {
-    border-bottom: 2px solid #CE5650;
+    font-weight: bold;
     list-style-type: none;
     cursor: pointer;
 }

@@ -2,7 +2,7 @@
 
 <div class="mast" ng-controller="CordMastCtrl">
     <div class="left">
-        <a href="#/home" class="logo"><h1>CORD</h1></a>
+        <h1>CORD</h1>
         <icon size="30" id="bird"></icon>
     </div>
 
@@ -10,6 +10,6 @@
         <nav ng-show="page.curr !== 'login'"></nav>
         <li class="logout"
            ng-show="page.curr !== 'login'"
-           ng-click="logout()">Logout</li>
+           ng-click="logout()">LOGOUT</li>
     </div>
 </div>

@@ -3,15 +3,15 @@
     <ul>
         <a href="#/home">
             <li ng-class="{selected: page.curr === 'dashboard'}"
-                ng-click="$route.reload()">Dashboard</li>
-        </a>
-        <a href="#/bundle">
-            <li ng-class="{selected: page.curr === 'bundle'}"
-                ng-click="$route.reload()">Bundles</li>
+                ng-click="$route.reload()">Home</li>
         </a>
         <a href="#/user">
             <li ng-class="{selected: page.curr === 'user'}"
                 ng-click="$route.reload()">Users</li>
         </a>
+        <a href="#/bundle">
+            <li ng-class="{selected: page.curr === 'bundle'}"
+                ng-click="$route.reload()">Bundles</li>
+        </a>
     </ul>
 </div>

@@ -15,7 +15,7 @@
         </table>
     </div>
     <div class="main-right">
-        <img src="imgs/binary.jpg">
+        <img src="imgs/bundle.jpg">
         <div ng-click="showBundles()">
             <h2>Available Bundles</h2>
         </div>

@@ -142,6 +142,18 @@ g.icon use.glyph.checkMark {
     fill: rgb(68, 189, 83)
 }
 
+th.user-pic {
+    background-color: white;
+}
+th.user-pic,
+td.user-pic {
+    width: 30px;
+    padding-left: 4%;
+}
+td.user-pic img {
+    width: 25px;
+}
+
 /* animation */
 .fadein {
     transition: all linear 0.5s;

@@ -33,8 +33,6 @@
 
 #home div.main-left img {
     width: 100%;
-    opacity: 0.8;
-    box-shadow: 10px 0 12px 1px rgba(54, 136, 210, 0.25);
 }
 
 #home div.main-right div.bundle-title {
@@ -65,16 +63,3 @@
     text-align: left;
     padding: 2%;
 }
-
-#home table.users th.user-pic {
-    background-color: white;
-}
-#home table.users th.user-pic,
-#home table.users td.user-pic {
-    width: 30px;
-    padding-left: 4%;
-}
-#home table.users td.user-pic img {
-    width: 25px;
-    opacity: 0.5;
-}
\ No newline at end of file

 <!-- Home page partial html -->
 <div id="home" class="container">
     <div class="main-left">
-        <img src="/imgs/bin_ball.jpg">
+        <img src="/imgs/home.jpg">
     </div>
 
     <div class="main-right">
         <div class="move-down">
             <div class="bundle-title">
-                <h4>Welcome {{shared.login}}!</h4>
+                <h4>Welcome Dad!</h4>
                 <h5>You are subscribed to the</h5>
                 <h3>{{bundle}}</h3>
             </div>
@@ -35,7 +35,7 @@
 
                 <tr ng-repeat="user in users" class="fadein">
                         <td class="user-pic">
-                            <img ng-src="{{'/imgs/' + user.icon_id + '.png'}}">
+                            <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
                         </td>
                         <td>{{user.name}}</td>
                         <td>{{shared.userActivity[user.id]}}</td>

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-div#login{
-    /*background: url("/imgs/login.png") no-repeat;*/
-    height: 100%;
+div#login {
+    background: url("/imgs/login.jpg") no-repeat center;
+    background-size: contain;
+    position: absolute;
+    top: 3%;
+    left: 5%;
 }
 
 div#login-wrapper {
@@ -40,6 +43,8 @@ div#login-form {
 #login div.outline {
     position: absolute;
     border: 1px solid rgba(115, 115, 115, 0.7);
+    background-color: white;
+    opacity: .6;
     top: -160px;
     left: -25px;
     width: 300px;
@@ -51,7 +56,7 @@ div#login-form {
     margin-left: 2.5%;
     position: relative;
     width: 255px;
-    margin-top: 30%;
+    margin-top: 33.5%;
 }
 
 #login-form form {

@@ -3,12 +3,12 @@
     <div id="login-wrapper">
         <div id="login-form">
             <div class="outline"></div>
-                <h2>Subscriber Portal</h2>
-                <form>
-                    <input ng-model="email" type="text" placeholder="email" required>
-                    <input ng-model="password" type="password" placeholder="password" required>
-                    <input ng-click="login()" type="button" value="Log In">
-                </form>
+            <h2>Subscriber Portal</h2>
+            <form>
+                <input ng-model="email" type="text" placeholder="email" required>
+                <input ng-model="password" type="password" placeholder="password" required>
+                <input ng-click="login()" type="button" value="Log In">
+            </form>
         </div>
     </div>
 </div>
\ No newline at end of file

@@ -35,12 +35,10 @@
                 }
 
                 $scope.login = function () {
-
                     if ($scope.email && $scope.password) {
                         getResource($scope.email);
+                        $scope.shared.login = $scope.email;
                     }
-
-                    $scope.shared.login = $scope.email;
                 };
 
                 $log.debug('Cord Login Ctrl has been created.');

@@ -43,7 +43,6 @@
 #user table.user-info th,
 #user table.user-form th {
     text-align: left;
-    background-color: #7AB6EA;
     padding: 2% 1%;
 }
 

@@ -4,10 +4,14 @@
         <div class="main-left" ng-class="{family: isFamily}">
             <table class="user-info">
                 <tr>
+                    <th class="user-pic"></th>
                     <th>Name</th>
                     <th>Last Login</th>
                 </tr>
                 <tr ng-repeat="user in users" class="fadein">
+                    <td class="user-pic">
+                        <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
+                    </td>
                     <td>{{user.name}}</td>
                     <td>{{shared.userActivity[user.id]}}</td>
                 </tr>

@@ -57,8 +57,8 @@
 <div id="frame" ng-controller="CordCtrl as cordCtrl">
 
 <mast></mast>
-<div id="view" ng-view></div>
 <foot></foot>
+<div id="view" ng-view></div>
 
 <svg id="icon-defs">
     <defs>