From 33462f7466c1616c22b77737896bd776c631ddb0 Mon Sep 17 00:00:00 2001
From: Stephen Birarda <commit@birarda.com>
Date: Thu, 25 Sep 2014 14:22:32 -0700
Subject: [PATCH] handle permanent sidebar in setup page

---
 domain-server/resources/web/css/style.css     |  9 +++
 domain-server/resources/web/js/setup.js       | 21 ++++++
 domain-server/resources/web/setup/index.shtml | 67 ++++++++++++++++---
 3 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 domain-server/resources/web/js/setup.js

diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index 399315ce53..a77dc1aeab 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -46,4 +46,13 @@ span.port {
 
 .stale {
   color: red;
+}
+
+#setup-sidebar.affix {
+  position: fixed;
+  top: 15px;
+}
+
+#save-button {
+  width: 100%;
 }
\ No newline at end of file
diff --git a/domain-server/resources/web/js/setup.js b/domain-server/resources/web/js/setup.js
new file mode 100644
index 0000000000..d92a35fb26
--- /dev/null
+++ b/domain-server/resources/web/js/setup.js
@@ -0,0 +1,21 @@
+$(document).ready(function(){
+  /*
+  * Clamped-width. 
+  * Usage:
+  *  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
+  *
+  * Author: LV
+  */
+  
+  $('[data-clampedwidth]').each(function () {
+      var elem = $(this);
+      var parentPanel = elem.data('clampedwidth');
+      var resizeFn = function () {
+          var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
+          elem.css('width', sideBarNavWidth);
+      };
+
+      resizeFn();
+      $(window).resize(resizeFn);
+  });
+});
\ No newline at end of file
diff --git a/domain-server/resources/web/setup/index.shtml b/domain-server/resources/web/setup/index.shtml
index f1bb222b6f..b34bc22573 100644
--- a/domain-server/resources/web/setup/index.shtml
+++ b/domain-server/resources/web/setup/index.shtml
@@ -1,16 +1,18 @@
 <!--#include virtual="header.html"-->
 <div class="col-md-10 col-md-offset-1">
-  <div class="col-md-2" data-spy="affix" data-offset-top="100">
-    <div class="list-group">
-      <a href="#metaverse" class="list-group-item active">
-        Metaverse Registration
-      </a>
-    </div>
+  <div class="col-md-3 col-sm-3" id="setup-sidebar-col">
+    <div id="setup-sidebar" data-clampedwidth="#setup-sidebar-col" class="hidden-xs" data-spy="affix" data-offset-top="50">
+      <div class="list-group">
+        <a href="#metaverse" class="list-group-item active">
+          Metaverse Registration
+        </a>
+      </div>
       
-    <input class="btn btn-success" name="commit" type="submit" value="Save and restart">
+      <button id="save-button" class="btn btn-success">Save and restart</button>
+    </div>
   </div>
   
-  <div class="col-md-10">
+  <div class="col-md-9 col-sm-9">
     <form id="setup-form" role="form">
       <div class="panel panel-default" id="metaverse">
         <div class="panel-heading">
@@ -35,6 +37,52 @@
         </div>
         <div>
       </div>
+      <div class="panel panel-default" id="metaverse">
+        <div class="panel-heading">
+          <h3 class="panel-title">Metaverse Registration</h3>
+        </div>
+        <div class="panel-body">
+          <div class="form-group">
+            <label for="token" class="control-label">High Fidelity Access Token</label>
+            <input type="text" class="form-control" id="token" name="token">
+            <span class="help-block">
+              This is an access token generated on the <a href="https://data.highfidelity.io/tokens">My Tokens</a> page of your High Fidelity account.<br/>
+              Generate a token with the 'domains' scope and paste it here.<br/>
+              This is required to associate this domain-server with a domain in your.
+            </span>
+          </div>
+          <div class="form-group">
+            <label for="name" class="control-label">Domain ID</label>
+            <input type="text" class="form-control" id="domain_id" name="domain_id">
+            <span class="help-block">This is your High Fidelity domain ID. If you do not want your domain to be registered in the High Fidelity metaverse you can leave this blank.</span>
+            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#choose-domain-modal">Choose from my domains</button>
+          </div>
+        </div>
+        <div>
+      </div>
+      <div class="panel panel-default" id="metaverse">
+        <div class="panel-heading">
+          <h3 class="panel-title">Metaverse Registration</h3>
+        </div>
+        <div class="panel-body">
+          <div class="form-group">
+            <label for="token" class="control-label">High Fidelity Access Token</label>
+            <input type="text" class="form-control" id="token" name="token">
+            <span class="help-block">
+              This is an access token generated on the <a href="https://data.highfidelity.io/tokens">My Tokens</a> page of your High Fidelity account.<br/>
+              Generate a token with the 'domains' scope and paste it here.<br/>
+              This is required to associate this domain-server with a domain in your.
+            </span>
+          </div>
+          <div class="form-group">
+            <label for="name" class="control-label">Domain ID</label>
+            <input type="text" class="form-control" id="domain_id" name="domain_id">
+            <span class="help-block">This is your High Fidelity domain ID. If you do not want your domain to be registered in the High Fidelity metaverse you can leave this blank.</span>
+            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#choose-domain-modal">Choose from my domains</button>
+          </div>
+        </div>
+        <div>
+      </div>
     </form>
   </div>
 </div>
@@ -60,6 +108,9 @@
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+
+
   
 <!--#include virtual="footer.html"-->
+<script src='/js/setup.js'></script>
 <!--#include virtual="page-end.html"-->
\ No newline at end of file