ONOS-1933 - CORD-GUI -- Basic login page layout created, skeleton of mast head and footer created.

Change-Id: Ifca7a70e9063cd10678426e81bffba3801576cf4

+/*
+ * 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.
+ */
+
+div.foot {
+    width: 100%;
+    height: 20px;
+    background-color: gray;
+    position: absolute;
+    bottom: 0;
+}
+
+.foot div {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.foot div.left {
+    left: 25px;
+}
+
+.foot div.right {
+    right: 25px;
+}

+<!--
+  ~ 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.
+  -->
+
+<div class="foot">
+    <div class="left">
+
+    </div>
+
+    <div class="right">
+
+    </div>
+</div>

+/*
+ * 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.
+ */
+
+angular.module('cordFoot', [])
+    .directive('foot', function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/fw/foot/foot.html'
+        };
+    });

+/*
+ * 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.
+ */
+
+div.mast {
+    width: 100%;
+    height: 50px;
+    background-color: gray;
+    position: relative;
+    margin-bottom: 2%;
+}
+
+.mast div {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.mast div.left {
+    left: 25px;
+}
+
+.mast div.right {
+    right: 25px;
+}

+<!--
+  ~ 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.
+  -->
+
+<!--Mast HTML-->
+
+<div class="mast">
+    <div class="left">
+        <h1>CORD</h1>
+    </div>
+
+    <div class="right">
+
+    </div>
+</div>

+/*
+ * 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.
+ */
+
+angular.module('cordMast', [])
+    .directive('mast', function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/fw/mast/mast.html'
+        };
+    });

@@ -21,7 +21,7 @@
     <title></title>
 </head>
 <body>
-<h2>Subscriptions Page</h2>
+<h2>Subscriber Bundle</h2>
 
 </body>
 </html>
\ No newline at end of file

@@ -17,8 +17,10 @@
 (function () {
     'use strict';
 
-    angular.module('cordSub', [])
-        .controller('CordSubCtrl', ['$log', function ($log) {
-            $log.debug('Cord Sub Ctrl has been created.');
+    angular.module('cordBundle', [])
+        .controller('CordBundleCtrl', ['$log', function ($log) {
+            $log.debug('Cord Bundle Ctrl has been created.');
         }]);
+
+    // can have a directive here that uses templateUrl for editable and readonly
 }());

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-h1, h2, h3, h4, h5, h6, p, div, a {
+head, body, footer, h1, h2, h3, h4, h5, h6, p, div, a {
     padding: 0;
     margin: 0;
 }
@@ -22,3 +22,7 @@ h1, h2, h3, h4, h5, h6, p, div, a {
 h1, h2, h3, h4, h5, h6, p, a {
     font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
 }
+
+#view h2 {
+    text-align: center;
+}

@@ -21,7 +21,7 @@
     <title></title>
 </head>
 <body>
-<h2>Home Page</h2>
+<h2>Dashboard</h2>
 
 </body>
 </html>
\ No newline at end of file

+/*
+ * 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.
+ */
+
+#login-header h2 {
+    margin: 1%;
+}
+
+div#login-form {
+    width: 135px;
+    margin: 0 auto;
+}
+
+#login-form form {
+    line-height: 150%;
+}

@@ -21,10 +21,19 @@
     <title></title>
 </head>
 <body>
-<h2>Login Page</h2>
-<p>Hooray!</p>
-<br>
-<a href="#/home">Click to login</a>
+<div id="login-header">
+    <h2>Login to Subscriber Portal</h2>
+</div>
+
+<div id="login-form">
+    <form>
+        <input type="text" placeholder="email">
+        <br>
+        <input type="password" placeholder="password">
+        <br>
+        <a href="#/home"><input type="submit" value="Submit"></a>
+    </form>
+</div>
 
 </body>
 </html>
\ No newline at end of file

@@ -21,7 +21,7 @@
     <title></title>
 </head>
 <body>
-<h2>Users Page</h2>
+<h2>Users</h2>
 
 </body>
 </html>
\ No newline at end of file

@@ -21,4 +21,6 @@
         .controller('CordUserCtrl', ['$log', function ($log) {
             $log.debug('Cord User Ctrl has been created.');
         }]);
+
+    // can have a directive here that uses templateUrl for editable and readonly
 }());

@@ -18,13 +18,15 @@
     'use strict';
 
     var modules = [
-            'ngRoute'
+            'ngRoute',
+            'cordMast',
+            'cordFoot'
         ],
         viewIds = [
             'login',
             'home',
             'user',
-            'sub'
+            'bundle'
         ],
         viewDependencies = [],
         dependencies;

@@ -23,23 +23,32 @@
 
     <script src="tp/angular.js"></script>
     <script src="tp/angular-route.js"></script>
+    <script src="tp/angular-animate.js"></script>
     <script src="tp/jquery-2.1.4.js"></script>
 
     <script src="cord.js"></script>
-    <link rel="stylesheet" href="common.css">
+    <link rel="stylesheet" href="app/view/common/common.css">
+
+    <script src="app/fw/mast/mast.js"></script>
+    <link rel="stylesheet" href="app/fw/mast/mast.css">
+    <script src="app/fw/foot/foot.js"></script>
+    <link rel="stylesheet" href="app/fw/foot/foot.css">
 
     <script src="app/view/login/login.js"></script>
+    <link rel="stylesheet" href="app/view/login/login.css">
 
     <script src="app/view/home/home.js"></script>
 
     <script src="app/view/user/user.js"></script>
 
-    <script src="app/view/sub/sub.js"></script>
+    <script src="app/view/bundle/bundle.js"></script>
 </head>
 <body ng-app="cordGui">
 <div id="frame" ng-controller="CordCtrl as cordCtrl"></div>
 
+<mast></mast>
 <div id="view" ng-view></div>
+<foot></foot>
 
 </body>
 </html>