CORD GUI -- Login page now takes emails to log into different accounts. Bundle page layout WIP.
Change-Id: I4af52d68f481b637a9b5576ddaba0bad1d113c28
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index af0e940..6f300d4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -1,4 +1,4 @@
-<div id="available">
+<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>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
index bc36f1d..5683011 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -16,13 +16,11 @@
div#bundle div.main-left {
width: 61%;
- padding-left: 1%;
+ padding: 4% 0 0 1%;
}
div#bundle div.main-right {
width: 37%;
- height: 85vh;
- background-color: rgba(173, 216, 230, 0.25);
- border-radius: 5px;
+ padding-top: 4%;
}
#bundle table {
@@ -57,18 +55,42 @@
border: none;
}
+#bundle img {
+ width: 100%;
+}
+
#bundle h2 {
text-align: center;
padding: 3%;
- background-color: rgba(173, 216, 230, 0.75);
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- color: white;
- font-weight: normal;
+ 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 {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index 1fafa79..fb4211f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -13,7 +13,10 @@
</table>
</div>
<div class="main-right">
- <h2>Available Bundles</h2>
- <div bundle-available></div>
+ <img src="imgs/binary.jpg">
+ <div ng-click="showBundles()">
+ <h2>Available Bundles</h2>
+ </div>
+ <div id="bundles" bundle-available></div>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index c7281f9..a5b59d0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -28,6 +28,7 @@
var BundleData, resource,
getData;
$scope.page.curr = 'bundle';
+ $scope.show = false;
getData = function (id) {
if (!id) { id = ''; }
@@ -61,6 +62,10 @@
getData(id);
};
+ $scope.showBundles = function () {
+ $scope.show = !$scope.show;
+ };
+
$log.debug('Cord Bundle Ctrl has been created.');
}])