Merge "vpp-userdemo: Small changes to README/GUI"

6 files changed, 34 insertions, 37 deletions

diff --git a/vpp-userdemo/README.md b/vpp-userdemo/README.md
index 9820600..31fdc09 100644
--- a/vpp-userdemo/README.md
+++ b/vpp-userdemo/README.md
@@ -17,15 +17,7 @@
 
 This is a Vagrant based user demo environment for beginners with VPP
 
-to access the GUI for the demo, simply open up your favorite browser and point it at 
-` http://localhost:5000 `
-
-# RUNNING DEMOS VIA GUI
-
-- click on a tutorial from the list appearing on the side navigation bar. 
-- Once the selected tutorial is loaded, click the "NEXT" button, or hit the SPACE bar to go through the steps.
-- Each step is executing the shown command against the VM, showing the response on the console that appears at the bottom of the GUI.
-
+You can run the demo either through the GUI (recommended) or through the CLI
 
 # REQUIREMENTS
 - vagrant (1.8)
@@ -38,24 +30,29 @@ to access the GUI for the demo, simply open up your favorite browser and point i
 - ```vagrant up```
 - ... run the demo
 
-# RUNNING DEMOs
-- From the Host, where you ran ```vagrant up``` run ```./run <demoname>```
+# RUNNING DEMOS VIA THE GUI
+
+- simply open up your favorite browser and point it at ` http://localhost:5000 `
+- click on a tutorial from the list appearing on the side navigation bar. 
+- Once the selected tutorial is loaded, click the "Next" button, or hit the SPACE bar to go through the steps.
+- Each step is executing the shown command against the VM, showing the response on the console that appears at the bottom of the GUI.
 
-```./run <demoname>```
+# RUNNING DEMOs VIA THE CLI
+- From the Host, where you ran ```vagrant up``` run ```./run tutorials/<demoname>```
 
 # DEMOs
 
-## routing - directly connected routing
+## Routing - directly connected routing
 - Creates two network namespaces c1, c2
 - A gateway interface for each on VPP
 - Routes due to directly connected routes inserted into default FIB
 
-## bridging - directly connected interfaces into a bridge-domain
+## Bridging - directly connected interfaces into a bridge-domain
 - Creates two network namespaces c1, c2
 - Adds interfaces to VPP and add them to bridge-domain 1
 - MAC addresses are automatically learned
 
-## tracing - how to show a "day in the life of a packet" in VPP
+## Tracing - how to show a "day in the life of a packet" in VPP
 - Same environment as "routing" demo
 - How to add a trace
 - View a trace
diff --git a/vpp-userdemo/tutorials/bridging b/vpp-userdemo/tutorials/Bridging
index c2fe664..c2fe664 100644
--- a/vpp-userdemo/tutorials/bridging
+++ b/vpp-userdemo/tutorials/Bridging
diff --git a/vpp-userdemo/tutorials/routing b/vpp-userdemo/tutorials/Routing
index 36e49af..36e49af 100644
--- a/vpp-userdemo/tutorials/routing
+++ b/vpp-userdemo/tutorials/Routing
diff --git a/vpp-userdemo/tutorials/tracing b/vpp-userdemo/tutorials/Tracing
index 981ec7a..981ec7a 100644
--- a/vpp-userdemo/tutorials/tracing
+++ b/vpp-userdemo/tutorials/Tracing
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>