Moved to SASS bootstrap and refactored
diff --git a/applications/subscriberPortal/src/app/fw/foot/foot.css b/applications/subscriberPortal/src/app/fw/foot/foot.css
deleted file mode 100644
index b8746d6..0000000
--- a/applications/subscriberPortal/src/app/fw/foot/foot.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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: 30px;
- background-color: white;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- margin-left: auto;
- margin-right: auto;
- z-index: 100;
- box-shadow: 0 10px 5px 10px gray;
-}
-
-.foot div {
- position: absolute;
- top: 50%;
- transform: translate(0, -50%);
- font-style: italic;
- font-size: 12px;
- color: #3C3C3C;
-}
-
-.foot div.left {
- left: 25px;
-}
-
-.foot div.right {
- right: 25px;
-}
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.css b/applications/subscriberPortal/src/app/fw/mast/mast.css
deleted file mode 100644
index b79d89e..0000000
--- a/applications/subscriberPortal/src/app/fw/mast/mast.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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: 85px;
- background-color: white;
- position: relative;
- box-shadow: 0 10px 5px -7px gray;
- z-index: 100;
-}
-
-.mast div {
- position: absolute;
- top: 50%;
- transform: translate(0, -50%);
-}
-
-.mast div.left {
- left: 25px;
-}
-
-.mast div.right {
- right: 7%;
- width: 37%;
-}
-
-.mast img {
- width: 220px;
-}
-
-.mast a,
-.mast a:visited {
- text-decoration: none;
- color: #3C3C3C;
-}
-
-.mast li.logout {
- list-style-type: none;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translate(0, -50%);
- font-size: 90%;
-}
-.mast li.logout:hover {
- font-weight: bold;
- list-style-type: none;
- cursor: pointer;
-}
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.html b/applications/subscriberPortal/src/app/fw/mast/mast.html
index 30bae4b..d11e66e 100644
--- a/applications/subscriberPortal/src/app/fw/mast/mast.html
+++ b/applications/subscriberPortal/src/app/fw/mast/mast.html
@@ -1,8 +1,8 @@
<!--Mast HTML-->
-<nav class="navbar navbar-default navbar-fixed-top" ng-controller="CordMastCtrl">
+<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+ <button ng-if="page.curr !== 'login'" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -12,8 +12,8 @@
<img src="/imgs/logo.png">
</a>
</div>
- <div id="navbar" class="collapse navbar-collapse">
- <ul ng-show="page.curr !== 'login'" class="nav navbar-nav pull-right">
+ <div id="navbar" class="collapse navbar-collapse" close-on-route-change>
+ <ul ng-if="page.curr !== 'login'" class="nav navbar-nav pull-right">
<li ng-class="{active: page.curr === 'dashboard'}">
<a href="#/home">Home</a>
</li>
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.js b/applications/subscriberPortal/src/app/fw/mast/mast.js
index 9b27628..eb08d79 100644
--- a/applications/subscriberPortal/src/app/fw/mast/mast.js
+++ b/applications/subscriberPortal/src/app/fw/mast/mast.js
@@ -31,7 +31,19 @@
.directive('mast', function () {
return {
restrict: 'E',
- templateUrl: 'app/fw/mast/mast.html'
+ templateUrl: 'app/fw/mast/mast.html',
+ controller: 'CordMastCtrl',
+ controllerAs: ''
};
- });
+ })
+ .directive('closeOnRouteChange', function(){
+ return {
+ restrict: 'A',
+ link: function(scope, elem){
+ scope.$on('$routeChangeStart', function(next, current) {
+ elem.removeClass('in');
+ });
+ }
+ }
+ });
}());
diff --git a/applications/subscriberPortal/src/app/view/bundle/available.html b/applications/subscriberPortal/src/app/view/bundle/available.html
index 6f300d4..a6f2a31 100644
--- a/applications/subscriberPortal/src/app/view/bundle/available.html
+++ b/applications/subscriberPortal/src/app/view/bundle/available.html
@@ -1,5 +1,11 @@
-<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>
+<div class="panel panel-primary animate" ng-hide="!show">
+ <div class="panel-heading">
+ <h3 class="panel-title">{{available.name}}</h3>
+ </div>
+ <div class="panel-body">
+ {{available.desc}}
+ </div>
+ <div class="panel-footer text-right">
+ <a class="btn btn-success btn-xs" ng-click="changeBundle(available.id)">Apply</a>
+ </div>
</div>
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.css b/applications/subscriberPortal/src/app/view/bundle/bundle.css
deleted file mode 100644
index 84fa842..0000000
--- a/applications/subscriberPortal/src/app/view/bundle/bundle.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * 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#bundle div.main-left {
- width: 61%;
- padding: 4% 0 0 1%;
-}
-div#bundle div.main-right {
- width: 37%;
- padding-top: 4%;
-}
-
-#bundle table {
- width: 95%;
- margin-top: 5%;
- margin-left: 2%;
- border-radius: 3px;
-}
-
-#bundle td {
- font-size: 90%;
-}
-#bundle td.icon {
- text-align: center;
- width: 50px;
- height: 50px;
- padding: 4%;
-}
-#bundle td.name {
- border-left: solid 1px rgba(136, 0, 0, 0.25);
- padding-left: 3%;
-}
-#bundle td.desc {
- width: 60%;
- text-align: left;
- font-style: italic;
-}
-/* animation specific */
-#bundle tr.fadein.ng-leave td.name,
-#bundle tr.fadein.ng-leave-active td.name {
- opacity: 0;
- border: none;
-}
-
-#bundle img {
- width: 100%;
-}
-
-#bundle h2 {
- text-align: center;
- padding: 3%;
- 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 {
- text-indent: initial;
- text-align: initial;
-}
-
-#available button {
- float: right;
- width: 33%;
- margin-top: 5%;
-}
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.html b/applications/subscriberPortal/src/app/view/bundle/bundle.html
index 8852d86..f658ccf 100644
--- a/applications/subscriberPortal/src/app/view/bundle/bundle.html
+++ b/applications/subscriberPortal/src/app/view/bundle/bundle.html
@@ -1,24 +1,39 @@
<!-- Bundle page partial html -->
<div id="bundle" class="container">
- <div class="main-left">
- <h4>You are subscribed to the</h4>
- <h3>{{name}}</h3>
- <p>{{desc}}</p>
- <table>
- <tr ng-repeat="func in funcs" class="fadein">
- <td class="icon">
- <img ng-src="{{'/imgs/' + func.id + '.png'}}">
- </td>
- <td class="name">{{func.name}}</td>
- <td class="desc">{{func.desc}}</td>
- </tr>
- </table>
- </div>
- <div class="main-right">
- <img src="imgs/bundle.jpg">
- <div ng-click="showBundles()">
- <h2>Available Bundles</h2>
+ <div class="row">
+ <div class="col-sm-6">
+ <h4>You are subscribed to the</h4>
+ <div class="panel panel-primary">
+ <div class="panel-heading">
+ <h3 class="panel-title">{{name}}</h3>
+ </div>
+ <div class="panel-body">
+ {{desc}}
+ </div>
+ </div>
+ <div class="panel panel-primary">
+ <div class="panel-heading">
+ <h3 class="panel-title">Users</h3>
+ </div>
+ <table class="table">
+ <tr ng-repeat="func in funcs" class="animate-repeat">
+ <td class="avatar">
+ <img ng-src="{{'/imgs/' + func.id + '.png'}}">
+ </td>
+ <td class="name"><b>{{func.name}}</b></td>
+ <td class="desc">{{func.desc}}</td>
+ </tr>
+ </table>
+ </div>
+
+
</div>
- <div id="bundles" bundle-available></div>
+ <div class="col-sm-6">
+ <img class="img-responsive" src="imgs/bundle.jpg">
+ <a ng-click="showBundles()" class="btn btn-primary-border btn-large btn-block">
+ Available Bundles
+ </a>
+ <div id="bundles" bundle-available></div>
+ </div>
</div>
</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/common/common.css b/applications/subscriberPortal/src/app/view/common/common.css
deleted file mode 100644
index 800fe24..0000000
--- a/applications/subscriberPortal/src/app/view/common/common.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * 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.
- */
-
-[ng\:cloak], [ng-cloak], .ng-cloak {
- display: none !important;
-}
-
-html, body, div#frame, div#view {
- height: 100%;
- overflow: scroll;
-}
-
-head, body, footer,
-h1, h2, h3, h4, h5, h6, p,
-a, ul, li, div,
-table, tr, td, th, thead, tbody,
-form, select, input, option, label {
- padding: 0;
- margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6,
-p, a, li, th, td,
-select, input, option, label, div {
- font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
- color: #3C3C3C;
-}
-
-body {
- background-color: white;
- overflow: hidden;
-}
-table {
- border-spacing: 0;
- border-collapse: collapse;
-}
-th, td {
- color: rgba(0, 0, 0, 0.8);
-}
-h3 {
- margin-bottom: 4%;
- font-size: xx-large;
- font-weight: lighter;
-}
-h4 {
- font-size: large;
- font-weight: lighter;
-}
-h5 {
- color: rgb(107, 107, 107);
- font-style: italic;
- font-weight: normal;
- font-size: 90%;
- margin-bottom: 1%;
-}
-p {
- font-size: 100%;
- color: rgba(0,0,0, 0.8);
- text-indent: 20px;
- text-align: justify;
- padding-right: 5%;
-}
-th {
- background-color: #7AB6EA;
- color: white;
- letter-spacing: 0.05em;
- font-weight: lighter;
-}
-
-button,
-input[type="button"],
-input[type="reset"] {
- height: 30px;
- box-shadow: none;
- border: none;
- outline: none;
- cursor: pointer;
- letter-spacing: 0.02em;
- font-size: 14px;
- background-color: lightgray;
- transition: background-color 0.4s;
-}
-button:hover,
-input[type="button"]:hover,
-input[type="reset"]:hover {
- color: white;
- background-color: rgb(122, 188, 229);
-}
-
-button[disabled],
-input[type="button"][disabled],
-input[type="reset"][disabled] {
- background-color: lightgray;
- color: graytext;
-}
-
-
-button[disabled]:hover,
-input[type="button"][disabled]:hover,
-input[type="reset"][disabled]:hover {
- cursor: default;
-}
-
-div.container {
- width: 85%;
- margin: 0 auto;
- min-height: 100%;
-}
-div.main-left, div.main-right {
- float: left;
-}
-div.main-left {
- width: 37%;
- padding-left: 1%;
-}
-div.main-right {
- width: 61%;
-}
-
-svg#icon-defs {
- display: none;
-}
-
-g.icon circle {
- fill: none;
-}
-g.icon use.glyph.checkMark {
- fill: rgb(68, 189, 83)
-}
-g.icon use.glyph.xMark {
- fill: #CE5650;
-}
-
-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;
-}
-.fadein.ng-enter-stagger,
-.fadein.ng-leave-stagger {
- transition-delay: 0.2s;
- animation-delay: 0.2s;
-}
-.fadein.ng-enter {
- opacity: 0;
-}
-.fadein.ng-enter.ng-enter-active {
- opacity: 1;
-}
-.fadein.ng-leave,
-.fadein.ng-leave-active {
- opacity: 0;
-}
diff --git a/applications/subscriberPortal/src/app/view/home/home.css b/applications/subscriberPortal/src/app/view/home/home.css
deleted file mode 100644
index 58f07a5..0000000
--- a/applications/subscriberPortal/src/app/view/home/home.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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.
- */
-
-#home div.main-left {
- width: 55%;
- padding: 0;
-}
-#home div.main-right {
- padding: 1% 0 0 3%;
- width: 42%;
-}
-#home div.move-down {
- margin-top: 5%;
-}
-
-#home div.image-holder {
- width: 100%;
- position: relative;
-}
-
-#home div.main-left img {
- width: 100%;
-}
-
-#home div.main-right div.bundle-title {
- padding: 2% 0;
-}
-
-#home h4 {
- padding-bottom: 2%;
-}
-
-#home p {
- margin-bottom: 3%;
-}
-
-#home table {
- width: 94%;
- table-layout: fixed;
- margin-left: 6%;
- border-left: 1px solid #CE5650;
-}
-
-#home table.users th,
-#home table.users td {
- font-size: 90%;
-}
-
-#home td, #home th {
- text-align: left;
- padding: 2%;
-}
diff --git a/applications/subscriberPortal/src/app/view/home/home.html b/applications/subscriberPortal/src/app/view/home/home.html
index a3d7fb2..2537996 100644
--- a/applications/subscriberPortal/src/app/view/home/home.html
+++ b/applications/subscriberPortal/src/app/view/home/home.html
@@ -1,42 +1,50 @@
<!-- Home page partial html -->
<div id="home" class="container">
- <div class="main-left">
- <img src="/imgs/home.jpg">
- </div>
-
- <div class="main-right">
- <div class="move-down">
+ <div class="row">
+ <div class="col-sm-6 hidden-xs">
+ <img class="img-responsive" src="/imgs/home.jpg">
+ </div>
+ <div class="col-sm-6">
<div class="bundle-title">
- <h4>Welcome Dad!</h4>
+ <h2>Welcome Dad!</h2>
<h5>You are subscribed to the</h5>
- <h3>{{bundle_name}}</h3>
</div>
- <p>{{bundle_desc}}</p>
+ <div class="panel panel-primary">
+ <div class="panel-heading">
+ <h3 class="panel-title">{{bundle_name}}</h3>
+ </div>
+ <div class="panel-body">
+ {{bundle_desc}}
+ </div>
+ </div>
-
- <h4>Users</h4>
- <table class="users">
- <thead>
+ <div class="panel panel-primary">
+ <div class="panel-heading">
+ <h3 class="panel-title">Users</h3>
+ </div>
+ <table class="table">
+ <thead>
<tr>
- <th class="user-pic"></th>
+ <th></th>
<th>Name</th>
<th>Last Login</th>
</tr>
- </thead>
- <tbody>
+ </thead>
+ <tbody>
- <!--<pre>{{users | json}}</pre>-->
+ <!--<pre>{{users | json}}</pre>-->
- <tr ng-repeat="user in users" class="fadein">
- <td class="user-pic">
+ <tr ng-repeat="user in users" class="animate-repeat">
+ <td class="avatar">
<img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
</td>
<td>{{user.name}}</td>
<td>{{shared.userActivity[user.id]}}</td>
</tr>
- </tbody>
- </table>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/login/login.css b/applications/subscriberPortal/src/app/view/login/login.css
deleted file mode 100644
index b4275c5..0000000
--- a/applications/subscriberPortal/src/app/view/login/login.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * 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#login {
- background: url("/imgs/login.jpg") no-repeat center;
- background-size: contain;
- position: absolute;
- top: 3%;
- left: 5%;
-}
-
-div#login-wrapper {
- text-align: center;
-}
-
-#login h2 {
- margin: 1%;
- color: rgb(115, 115, 115);
- font-size: xx-large;
- font-weight: lighter;
- text-align: left;
- position: absolute;
- top: -140px;
-}
-
-div#login-form {
- display: inline-block;
-}
-
-#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;
- height: 245px;
- border-radius: 1px;
-}
-
-div#login-form {
- margin-left: 2.5%;
- position: relative;
- width: 255px;
- margin-top: 33.5%;
-}
-
-#login-form form {
- line-height: 250%;
-}
-
-#login-form input {
- display: block;
- height: 40px;
- width: 230px;
- font-size: 19px;
- padding: 0 5px;
- margin-bottom: 3.5%;
- border-radius: 1px;
- position: absolute;
-}
-
-#login-form .login-error{
- background: red;
- border: 2px solid darkred;
- color: white;
- position: absolute;
- height: 40px;
- width: 230px;
- padding: 0 5px;
- border-radius: 1px;
- top: 70px;
- font-size: 10px;
-}
-
-#login-form input[type="text"] {
- top: -90px;
-}
-#login-form input[type="password"] {
- top: -35px;
-}
-
-#login-form input[type="text"],
-#login-form input[type="password"] {
- border: 2px solid rgba(115, 115, 115, 0.7);
- transition: border 0.1s;
-}
-#login-form input[type="text"]:focus,
-#login-form input[type="password"]:focus,
-#login-form input[type="button"]:focus {
- outline: none;
- border: solid 2px rgba(122, 188, 229, 0.5);
-}
-
-#login-form a {
- text-decoration: none;
-}
-
-#login-form input[type="button"] {
- top: 25px;
- width: 245px;
- height: 30px;
- cursor: pointer;
- letter-spacing: 0.02em;
- font-size: 100%;
- color: #3C3C3C;
- background-color: lightgray;
- transition: background-color 0.4s;
-}
-
-#login-form input[type="button"]:hover {
- color: white;
- background-color: rgb(122, 188, 229);
-}
-
-#login-form input.ng-invalid.ng-touched {
- background-color: #CE5650;
- color: white;
-}
diff --git a/applications/subscriberPortal/src/app/view/login/login.html b/applications/subscriberPortal/src/app/view/login/login.html
index 6359cce..eb32222 100644
--- a/applications/subscriberPortal/src/app/view/login/login.html
+++ b/applications/subscriberPortal/src/app/view/login/login.html
@@ -1,18 +1,23 @@
<!-- Login page partial html -->
-<div id="login" class="container">
- <div id="login-wrapper">
- <div id="login-form">
- <div class="outline"></div>
- <h2>Subscriber Portal</h2>
- <form ng-submit="login()">
- <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">
- <div class="login-error" ng-show="error">
+<div class="container login">
+ <div class="login-wrapper">
+ <h3 class="text-center">Subscriber Portal</h3>
+ <form ng-submit="login()">
+ <div class="form-group">
+ <input class="form-control" ng-model="email" type="text" placeholder="email" required>
+ </div>
+ <div class="form-group">
+ <input class="form-control" ng-model="password" type="password" placeholder="password" required>
+ </div>
+ <div class="form-group">
+ <button class="btn btn-primary btn-block" type="submit">Log In</button>
+ </div>
+ <div class="form-group" ng-show="error">
+ <div class="alert alert-danger">
Sorry, your login failed.
Please try again.
</div>
- </form>
- </div>
+ </div>
+ </form>
</div>
</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/user/user.css b/applications/subscriberPortal/src/app/view/user/user.css
deleted file mode 100644
index a3f64d5..0000000
--- a/applications/subscriberPortal/src/app/view/user/user.css
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * 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.
- */
-
-#user div {
- padding-top: 2%;
-}
-
-#user .icon-saved{
- background-image: url('../../../imgs/icon-saved.gif');
- display: inline-block;
- width: 15px;
- height: 15px;
- background-size: cover;
-}
-
-/* when hiding the picture */
-#user .icon-saved.ng-hide-add { animation:0.5s lightSpeedOut ease; }
-
-/* when showing the picture */
-#user .icon-saved.ng-hide-remove { animation:0.5s lightSpeedIn ease; }
-
-/* light speed out */
-@keyframes lightSpeedOut {
- 0% {
- opacity: 1;
- }
-
- 100% {
- transform: translate3d(100%, 0, 0) skewX(30deg);
- transform: translate3d(100%, 0, 0) skewX(30deg);
- opacity: 0;
- }
-}
-
-@keyframes lightSpeedIn {
-
- 0% {
- transform: translate3d(100%, 0, 0) skewX(30deg);
- transform: translate3d(100%, 0, 0) skewX(30deg);
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-#user div.main-left {
- width: 98%;
- padding-left: 1%;
-}
-#user div.main-left.family {
- width: 62%;
- padding-left: 1%;
-}
-
-#user div.main-right {
- width: 0;
-}
-#user div.main-right.family {
- width: 37%;
-}
-
-#user table.user-info,
-#user table.user-form {
- float: left;
- width: 100%;
-}
-
-#user table.user-info th,
-#user table.user-form th {
- text-align: left;
- padding: 2% 1%;
-}
-
-#user span.help:hover {
- cursor: pointer;
- color: #CE5650;
-}
-
-#user div.main-left.family table.user-info th,
-#user div.main-right.family table.user-form th {
- padding: 17px;
-}
-
-#user div.main-left.family table.user-info td,
-#user div.main-right.family table.user-form td {
- padding: 10px;
- height: 23px;
-}
-#user table.user-info td {
- padding: 1%;
-}
-
-#user table.user-form td {
- border-left: 1px solid #CE5650;
-}
-
-#user table.user-form td.buttons {
- text-align: right;
- border: none;
-}
-
-#user table.user-form tr.options td {
- padding-left: 5%;
-}
-
-#user select,
-#user select:focus {
- border: none;
-}
-
-#user select {
- font-size: 95%;
-}
-
-#user option,
-#user option:focus {
- border: none;
-}
-
-#user option[selected] {
- background-color: rgb(122, 188, 229);
-}
-
-#user label {
- font-weight: bold;
- display: block;
- text-align: center;
- padding: 5%;
-}
-
-#user input[type="button"],
-#user input[type="reset"] {
- width: 30%;
-}
-
-#user td.buttons div {
- display: inline;
-}
-#user td.buttons svg {
- vertical-align: middle;
-}
-
-#rating-panel th,
-#rating-panel td {
- text-align: center;
- padding: 1%;
- font-weight: lighter;
-}
-
-#rating-panel th.title,
-#rating-panel td.title {
- width: 125px;
- text-align: left;
-}
-
-#rating-panel th {
- background-color: white;
- padding-top: 3%;
- border-bottom: 1px solid #CE5650;
- color: #3C3C3C;
- font-weight: normal;
-}
-
-#rating-panel tr th:first-child,
-#rating-panel tr td:first-child {
- padding-left: 5%;
-}
-#rating-panel tr th:last-child,
-#rating-panel tr td:last-child {
- padding-right: 5%;
-}
-
-div#rating-panel {
- position: relative;
- pointer-events: none;
-}
-
-#rating-panel div.ng-hide-add.ng-hide-add-active,
-#rating-panel div.ng-hide-remove.ng-hide-remove-active {
- -webkit-transition: all linear 0.75s;
- transition: all linear 0.75s;
-}
-
-#rating-panel div.panel {
- position: absolute;
- top: 0;
- left: -6%;
- height: 545px;
- overflow: auto;
- padding: 0;
- pointer-events: auto;
- box-shadow: 0 3px 23px 7px rgb(118, 118, 118);
- border-radius: 3px;
-}
-#rating-panel table {
- table-layout: fixed;
- width: 500px;
- background-color: white;
- opacity: 1;
-}
-
-#rating-panel div.ng-hide {
- opacity: 0;
- left: -55%;
-}
diff --git a/applications/subscriberPortal/src/app/view/user/user.html b/applications/subscriberPortal/src/app/view/user/user.html
index 0065799..76896f8 100644
--- a/applications/subscriberPortal/src/app/view/user/user.html
+++ b/applications/subscriberPortal/src/app/view/user/user.html
@@ -1,42 +1,40 @@
<!-- Users page partial html -->
<div class="container">
- <div id="user">
- <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">
+ <div id="user" class="row">
+ <div class="col-xs-12">
+ <table class="table">
+ <thead>
+ <tr>
+ <th></th>
+ <th class="form-inline">
+ Name <input ng-model="q.name" type="text" class="form-control">
+ </th>
+ <th>Last Login</th>
+ <th ng-if="isFamily">
+ Select Site Rating
+ <span class="help" ng-click="showRatings()"> (?)</span>
+ </th>
+ <th ng-if="isFamily"></th>
+ </tr>
+ </thead>
+ <tr ng-repeat="user in users | filter:q" class="animate-repeat">
+ <td class="avatar">
<img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
</td>
<td>{{user.name}}</td>
<td>{{shared.userActivity[user.id]}}</td>
+ <td ng-if="isFamily">
+ <select class="form-control" ng-model="user.level" ng-options="l for l in levels" ng-change="updateLevel(user)">
+ </select>
+ </td>
+ <td ng-if="isFamily" style="width: 46px">
+ <user-updated-tick user="user">Saved</user-updated-tick>
+ </td>
</tr>
</table>
</div>
- <div class="main-right" ng-class="{family: isFamily}">
- <form ng-if="isFamily" name="changeLevels">
- <table class="user-form">
- <tr>
- <th>
- Select Site Rating
- <span class="help" ng-click="showRatings()"> (?)</span>
- </th>
- </tr>
- <tr ng-repeat="user in users" class="options">
- <td>
- <select ng-model="user.level" ng-options="l for l in levels" ng-change="updateLevel(user)">
- </select>
- <user-updated-tick user="user">Saved</user-updated-tick>
- </td>
- </tr>
- </table>
- </form>
- </div>
+ <!-- TODO refactor in modal-->
<div ng-if="isFamily">
<ratings-panel></ratings-panel>
</div>
diff --git a/applications/subscriberPortal/src/app/view/user/user.js b/applications/subscriberPortal/src/app/view/user/user.js
index 616529b..6b42bc4 100644
--- a/applications/subscriberPortal/src/app/view/user/user.js
+++ b/applications/subscriberPortal/src/app/view/user/user.js
@@ -67,7 +67,7 @@
scope: {
user: '='
},
- template: '<span class="icon-saved" ng-show="saved"></span>',
+ template: '<span class="icon-saved animate" ng-show="saved"></span>',
link: function(scope, elem){
scope.saved = false;
scope.$watch('user.updated', function(val){