handle permanent sidebar in setup page

This commit is contained in:
Stephen Birarda 2014-09-25 14:22:32 -07:00
parent 4790f517d6
commit 33462f7466
3 changed files with 89 additions and 8 deletions

View file

@ -46,4 +46,13 @@ span.port {
.stale {
color: red;
}
#setup-sidebar.affix {
position: fixed;
top: 15px;
}
#save-button {
width: 100%;
}

View file

@ -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);
});
});

View file

@ -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"-->