diff options
author | Steven Saunders <steve@llantz9470.cablelabs.com> | 2015-08-12 08:48:07 -0600 |
---|---|---|
committer | Steven Saunders <steve@khiatt8460b.cablelabs.com> | 2015-08-12 18:21:36 -0600 |
commit | e8a4652f70284c414ceafc086669dfd4b935573d (patch) | |
tree | edfa339167fee1863505f7a39b5b3cab431b3eee /demo-ui/app/views/less/vcpe.less | |
parent | ed73dbf357aff41edcbab401a94e5fbc266d9391 (diff) |
Add demo-ui folder. This folder contains HTML/CSS/Javascript code for the VCPE Demo UI. The Demo UI allows you to CRUD CoS instances, and EPL instances, and will also display information about EVCs and UNIs that were created as well
Change-Id: I32eea1121c21e0b451efc057a0c0f30fe5601cd5
Signed-off-by: Steven Saunders <steve@llantz9470.cablelabs.com>
Diffstat (limited to 'demo-ui/app/views/less/vcpe.less')
-rw-r--r-- | demo-ui/app/views/less/vcpe.less | 365 |
1 files changed, 365 insertions, 0 deletions
diff --git a/demo-ui/app/views/less/vcpe.less b/demo-ui/app/views/less/vcpe.less new file mode 100644 index 0000000..5598160 --- /dev/null +++ b/demo-ui/app/views/less/vcpe.less @@ -0,0 +1,365 @@ +@dbg-flg: false; + +@side-panel-width: 5%; +@main-panel-width: 100%-(2*@side-panel-width); + +@backgroundGray: #E3E3E3; + +@cos-basis: 50%; +@epl-basis: 100%-(@cos-basis); + + +// +// Utilities +// + +.dbg-border( // show border if @dbg-flg is true + @dbg-bordersFlg, + @dbg-borderClr, + @dbg-borderStyle) + when (@dbg-bordersFlg=true) { + border: 3px @dbg-borderStyle @dbg-borderClr; + margin: 1px; padding: 1px; +} + +.set-text(@color, + @font-size, + @font-weight, + @text-align) { + color:@color; font-size:@font-size; + font-weight:@font-weight; text-align:@text-align; +} + +// +// Common Styles +// + +input[type='number'] { font-size: 12px; } + +.choosable { + cursor: pointer; +} + +.gradient { + background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); + background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); +} + +.my-btn-addon { + height: 30px; + width: 100px; +} + +.primary-lable { + .set-text(darkred, large, bold, center); } + +.list-item { + .set-text(black, small, normal, left); + background-color:none; } + +.selected-item-idle { + background-color: @backgroundGray; } + +.selected-item-delete { + background-color: #FFE4E1; } + +.selected-item-update { + background-color: #FFEFD5; } + +.primary-container { + border: 3px solid black; + .dbg-border(@dbg-flg, blue, solid); + background-color: @backgroundGray; + border-radius: 15px; + padding: 10px; + height: 400px; +} + +.secondary-container { + border: 1px solid darkgray; + .dbg-border(@dbg-flg, green, solid); + background-color: white; + padding: 5px 10px; // TB RL + margin: 10px 10px -1px 10px; // T R B L + height: 125px; + overflow-y: scroll; +} + +.action-icon-container { + border: 1px solid darkgray; + .dbg-border(@dbg-flg, magenta, solid); + .gradient; + margin: 0px 10px; // TB RL + padding: 2px 10px; // TB RL +} + +.action-icon { + .choosable; + padding: 0px 1px; // TB RL + font-size: small; + color: black; + padding: 2px; +} + +.action { + color: blue !important; +} + +.warning { + color: red !important; + font-size: small !important; +} + +.data-row { + .dbg-border(@dbg-flg, red, solid); + display: flex; + flex-flow:row nowrap; + height: 20px; + width: 300; + } +.label-col { + .dbg-border(@dbg-flg, gray, solid); + .set-text(purple, small, normal, left); + flex: 0 0 auto; order: 1; + width: 85px; + } + + +.data-col { + .dbg-border(@dbg-flg, gray, solid); + flex: 0 0 auto; order: 2; + .set-text(black, small, normal, left); + + } + +.data-label { + .set-text(purple, small, normal, left); + vertical-align: middle; +} +.data-item { + .set-text(black, small, bold, left); +} +.data-input { + height: 20px; + width: 70px; + border-radius: 5px; +} +.cos-dd-input { + height: 20px; + width: 70px; +} + +.epl-dd-input { + height: 20px; + width: 150px; +} + + +.data-unit { + .set-text(black, small, normal, left); + margin-left: 5px; + vertical-align: middle; +} + +// +// Page starts here +// + +.header-container { + display: flex; + flex-flow:row nowrap; + justify-content: space-between; + .hdr { + flex: 1 1 auto; order: 1; + } + .img { + flex: 1 1 auto; order: 2; + align-self: flex-end; + margin-bottom: 12px; + } +} + + +.frame{ + .dbg-border(@dbg-flg, lightgray, solid); + display: flex; + flex-flow:row nowrap; + border: 1px solid lightgray; + + margin: 20px; // TBRL + padding: 20px 0px; // TB RL + + .left { .dbg-border(@dbg-flg, lightgray, solid); + flex: 1 6 @side-panel-width; order: 1; } + + .right{ .dbg-border(@dbg-flg, lightgray, solid); + flex: 1 6 @side-panel-width; order: 3; } + + .content { + border: none; + .dbg-border(@dbg-flg, lightgray, solid); + flex: 1 6 @main-panel-width; order: 2; + + .action-container { + border: none; + .dbg-border(@dbg-flg, yellow, solid); + + display: flex; + flex-flow:row nowrap; + + .cos-container { + .primary-container; + flex: 1 1 @cos-basis; order: 1; + margin-right: 20px; + + .cos-list { + .secondary-container; + } + .cos-info-contaier { + .dbg-border(@dbg-flg, green, solid); + display: flex; + flex-flow:column nowrap; + margin: 10px 20px; // TB RL + .labelContainer { + .dbg-border(@dbg-flg, yellow, solid); + flex: 1 1 33%; order: 1; + min-width: 80px; + .data-label; + } + } + .warning-container { + .dbg-border(@dbg-flg, magenta, solid); + height: 15px; + margin-top: 10px; + } + .button-container { + .dbg-border(@dbg-flg, magenta, solid); + } + } + .epl-container { + .primary-container; + flex: 1 1 @epl-basis; order: 2; + margin-right: 20px; + + .epl-list { + .secondary-container; + } + .epl-info-contaier { + .dbg-border(@dbg-flg, green, solid); + display: flex; + flex-flow:column nowrap; + margin: 10px 20px; // TB RL + .labelContainer { + .dbg-border(@dbg-flg, yellow, solid); + flex: 1 1 33%; order: 1; + min-width: 80px; + .data-label; + } + } + .warning-container { + .dbg-border(@dbg-flg, magenta, solid); + height: 15px; + margin-top: 10px; + } + .button-container { + .dbg-border(@dbg-flg, magenta, solid); + } + } + } + + .monitor-container { + .dbg-border(@dbg-flg, yellow, solid); + + + .mef-container { + .primary-container; + height: 450px; + + .dbg-border(@dbg-flg, blue, solid); + background-color: #B0C4DE; + margin: 20px 20px 20px 0px; // T R B L + + .primary-mef-lable { + .set-text(SteelBlue, large, bold, center); + margin-bottom: 10px; + } + + @mef-container-border-color: SlateGray; + + .mef-panel-hdr { + border-bottom: 1px solid @mef-container-border-color; + .dbg-border(@dbg-flg, blue, solid); + } + + .secondary-mef-label { + .set-text(SlateGray, small, bold, center); + background-color: @backgroundGray; + } + + .mef-data-label { + .set-text(purple, small, normal, left); + vertical-align: middle; + + } + .mef-label-col { + .dbg-border(@dbg-flg, gray, solid); + .set-text(purple, small, normal, left); + flex: 0 0 auto; order: 1; + padding-left: 10px; + } + + .evc-label-col { + .mef-label-col; + width: 200px; + + } + .uni-label-col { + .mef-label-col; + width: 100px; + } + + .mef-info-container { + display: flex; + flex-flow:row nowrap; + justify-content: center; + + .mef-secondary-container { + border: 1px solid darkgray; + .dbg-border(@dbg-flg, green, solid); + background-color: WhiteSmoke; + //padding: 5px 30px; // TB RL + margin: 5px; + } + + @evc-basis: 38%; + @uni-basis: 100%-(2*@evc-basis); + + .uni1-container { + .mef-secondary-container; + border: 2px solid @mef-container-border-color; + .dbg-border(@dbg-flg, darkred, solid); + flex: 1 1 @uni-basis; order: 1; + + } + .evc-container { + .mef-secondary-container; + border: 2px solid @mef-container-border-color; + .dbg-border(@dbg-flg, darkred, solid); + flex: 1 1 @evc-basis; order: 2; + + } + .uni2-container { + .mef-secondary-container; + border: 2px solid @mef-container-border-color; + .dbg-border(@dbg-flg, darkred, solid); + flex: 1 1 @uni-basis; order: 3; + + } + } + } + } + } +} + + + |