Moved to SASS bootstrap and refactored
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){