Added the mazak and okuma links into the viewer for the demo.

Author: wsobel

demo/styles/viewer.html

@@ -50,18 +50,14 @@
               <option value="xml">XML</option>
               <option value="json">JSON</option>
             </select>
-            <div style="padding: 5px 5px">
-              <li>
-                <a style="color: white" href="/twin/index.html?device=Mazak">Mazak Digital Twin</a>
-              </li>
-              <li>
-                <a style="color: white" href="/twin/index.html?device=OKUMA">Okuma Digital Twin</a>
-              </li>
-            </div>
             <button id="raw" type="button" class="btn">Raw</button>
             <button id="help" type="button" class="btn">?</button>
           </div>
         </form>
+        <ul class="nav navbar-nav navbar-right mtc-links">
+          <li><a href="/twin/index.html?device=Mazak">Mazak Twin</a></li>
+          <li><a href="/twin/index.html?device=OKUMA">Okuma Twin</a></li>
+        </ul>
       </div>
     </nav>
 

styles/viewer.css

@@ -22,17 +22,18 @@
   padding: 5px 10px;
 }
 
-.mtc-path {
+/* Bootstrap sets .navbar-form .form-control to width: auto, so these need the same specificity */
+.navbar-form .mtc-path {
   width: 18em;
   margin-right: 6px;
 }
 
-.mtc-small {
+.navbar-form .mtc-small {
   width: 6em;
   margin-right: 6px;
 }
 
-.mtc-format {
+.navbar-form .mtc-format {
   display: inline-block;
   width: auto;
   margin-right: 6px;
@@ -42,6 +43,21 @@
   margin-right: 6px;
 }
 
+/* Extra links at the right of the navbar, such as the demo's digital twins. No horizontal
+   padding, so the links are spaced by their margins and the bar fits on one row. */
+.navbar-nav.mtc-links {
+  margin-right: 12px;
+}
+
+.navbar-nav.mtc-links > li {
+  margin-left: 12px;
+}
+
+.navbar-nav.mtc-links > li > a {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .mtc-notice {
   margin: 0;
   padding: 6px 12px;