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