aboutsummaryrefslogtreecommitdiffstats
path: root/vpp-userdemo/ui
diff options
context:
space:
mode:
authorPadraig Connolly <padraig.connolly@intel.com>2016-11-21 10:10:07 +0000
committerPadraig Connolly <padraig.connolly@intel.com>2016-11-21 10:10:07 +0000
commit51e00de1e4a4102e5d15c2e219787f8565f51019 (patch)
tree9761fb3b816904dcac0ed2f6285a3875f534ec38 /vpp-userdemo/ui
parent08e0618fef8173d3c94d64bce69f34d26f6a1f1c (diff)
vpp-userdemo: Small changes to README/GUI
Changes to README: *README flow changed (i.e intro first, setup next, then running) *Changed CLI command help (tutorials directory needed to run demo) Changes to GUI: *Added fd.io colors to GUI interface *Added more relevent icons to each tutorial *Capitalized tutorial file names (Looks better on GUI) Change-Id: Ib6c1347e24687d489f3b0be3808aefb4bbb622f2 Signed-off-by: Padraig Connolly <padraig.connolly@intel.com>
Diffstat (limited to 'vpp-userdemo/ui')
-rw-r--r--vpp-userdemo/ui/dist.prod/cssProd/style.css32
-rw-r--r--vpp-userdemo/ui/dist.prod/html/main.html12
2 files changed, 22 insertions, 22 deletions
diff --git a/vpp-userdemo/ui/dist.prod/cssProd/style.css b/vpp-userdemo/ui/dist.prod/cssProd/style.css
index 4222468..9ade21c 100644
--- a/vpp-userdemo/ui/dist.prod/cssProd/style.css
+++ b/vpp-userdemo/ui/dist.prod/cssProd/style.css
@@ -23,7 +23,7 @@ html, body {
color: white; }
.nav {
- background-color: #258dc4;
+ background-color: #ed1c24;
position: relative;
width: 100%;
height: 50px; }
@@ -141,13 +141,13 @@ html, body {
width: 50%;
margin-right: 50%; }
.progress-indicator > li.completed {
- color: #258dc4; }
+ color: #ed1c24; }
.progress-indicator > li.completed .bubble {
- background-color: #258dc4;
- color: #258dc4;
+ background-color: #ed1c24;
+ color: #ed1c24;
border-color: #0d3043; }
.progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
- background-color: #258dc4;
+ background-color: #ed1c24;
border-color: #0d3043; }
.progress-indicator > li.active {
color: #337AB7; }
@@ -236,7 +236,7 @@ html, body {
color: #a3a3a3;
font-size: 15px;
font-weight: bold;
- font-family: "Roboto"; }
+ font-family: "Arial"; }
.tutorials-icon {
color: white;
@@ -265,10 +265,10 @@ html, body {
outline: none; }
.tutorials-row:hover {
- background-color: #258dc4; }
+ background-color: #ed1c24; }
.tutorials-active {
- background-color: #258dc4; }
+ background-color: #ed1c24; }
.card-footer {
background-color: #fafafa;
@@ -314,7 +314,7 @@ html, body {
position: relative;
top: 18px;
font-size: 18px;
- font-family: "Roboto"; }
+ font-family: "Arial"; }
.card-button:focus, .card-button-group:focus {
outline: none; }
@@ -333,13 +333,13 @@ html, body {
color: #434343;
font-weight: 100;
font-size: 18px;
- font-family: "Roboto-Light";
+ font-family: "Arial";
margin: 0; }
.command-text {
font-weight: bold;
font-family: monospace;
- color: #258dc4; }
+ color: #26cad3; }
.command-response {
display: block;
@@ -379,7 +379,7 @@ html, body {
cursor: pointer; }
.clipboard-div:hover > .clipboard-text, .clipboard-div:hover > .clipboard-icon {
- color: #258dc4; }
+ color: #26cad3; }
.code-block {
display: inline-block;
@@ -957,13 +957,13 @@ html, body {
width: 50%;
margin-right: 50%; }
.progress-indicator > li.completed {
- color: #258dc4; }
+ color: #26cad3; }
.progress-indicator > li.completed .bubble {
- background-color: #258dc4;
- color: #258dc4;
+ background-color: #1cede5;
+ color: #26cad3;
border-color: #0d3043; }
.progress-indicator > li.completed .bubble:before, .progress-indicator > li.completed .bubble:after {
- background-color: #258dc4;
+ background-color: #1cede5;
border-color: #0d3043; }
.progress-indicator > li.active {
color: #337AB7; }
diff --git a/vpp-userdemo/ui/dist.prod/html/main.html b/vpp-userdemo/ui/dist.prod/html/main.html
index b0ba597..3c5300c 100644
--- a/vpp-userdemo/ui/dist.prod/html/main.html
+++ b/vpp-userdemo/ui/dist.prod/html/main.html
@@ -9,9 +9,9 @@
<div layout layout-align="center" class="tutorials-row" ng-repeat="tutorial in tutorials" ng-click="selectTutorial(tutorial)"
ng-class="{'tutorials-active': (tutorial == selectedTutorial)}">
<div flex="90">
- <i class="material-icons tutorials-icon">insert_drive_file</i>
+ <i class="material-icons tutorials-icon">label</i>
<h5 class="tutorials-text">{{tutorial}}</h5>
- <i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_play</i>
+ <i ng-if="selectedTutorial == tutorial" class="material-icons tutorial-playing-icon">playlist_add_check</i>
</div>
</div>
</div>
@@ -26,11 +26,11 @@
<md-card-header-text>
<div layout>
<div flex>
- <span class="md-title card-title">{{selectedTutorial}}</span>
+ <span style="font-family:arial;"class="md-title card-title">{{selectedTutorial}}</span>
</div>
<div flex>
<div class="clipboard-div" ng-if="selectedTutorial" ngclipboard data-clipboard-text="{{commands[pointer]}}">
- <span class="clipboard-text">Copy to clipboard</span>
+ <span style="font-family:arial;"class="clipboard-text">Copy to Clipboard</span>
<i class="material-icons clipboard-icon">content_paste</i>
</div>
</div>
@@ -52,7 +52,7 @@
<md-progress-circular ng-if="!stepDone" class="card-loader" md-mode="indeterminate"></md-progress-circular>
<div ng-if="stepDone" class="card-button-group" ng-click="nextStep()">
<i class="material-icons card-button">navigate_next</i>
- <span class="card-button-text">next</span>
+ <span class="card-button-text">Next</span>
</div>
</md-card-footer>
</md-card>
@@ -102,4 +102,4 @@
</div>
</div>
</div>
-</div> \ No newline at end of file
+</div>