setup scrollspy for nav links on settings page

This commit is contained in:
Stephen Birarda 2014-09-25 17:18:10 -07:00
parent 623e9e625b
commit 606a25694d
3 changed files with 27 additions and 12 deletions

View file

@ -1,3 +1,7 @@
body {
position: relative;
}
.table-lead {
color: #66CCCC;
}
@ -55,4 +59,5 @@ span.port {
#save-button {
width: 100%;
margin-top: 10px;
}

View file

@ -26,15 +26,24 @@ $(document).ready(function(){
Settings.panelsTemplate = _.template(panelsSource);
var sidebarTemplate = $('#list-group-template').html();
Settings.sidebarTemplate = _.template(sidebarTemplate)
Settings.sidebarTemplate = _.template(sidebarTemplate);
$('body').scrollspy({ target: '#setup-sidebar', offset: 60 });
reloadSettings();
});
function reloadSettings() {
$.getJSON('/settings.json', function(data){
$('.list-group').html(Settings.sidebarTemplate(data))
$('.nav-stacked').html(Settings.sidebarTemplate(data))
$('#panels').html(Settings.panelsTemplate(data));
$('.nav-stacked li').each(function(){
$(this).removeClass('active');
});
$('.nav-stacked li:first-child').addClass('active');
$('body').scrollspy('refresh');
});
}

View file

@ -5,30 +5,31 @@
<div class="alert" style="display:none;"></div>
</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="col-md-2 col-sm-2" id="setup-sidebar-col">
<div id="setup-sidebar" data-clampedwidth="#setup-sidebar-col" class="hidden-xs" data-spy="affix" data-offset-top="55">
<script id="list-group-template" type="text/template">
<% _.each(descriptions, function(group){ %>
<a href="" class="list-group-item">
<%- group.label %>
</a>
<li>
<a href="#<%-group.name %>" class="list-group-item">
<%- group.label %>
</a>
</li>
<% }); %>
</script>
<div class="list-group">
</div>
<ul class="nav nav-pills nav-stacked">
</ul>
<button id="save-button" class="btn btn-success">Save and restart</button>
</div>
</div>
<div class="col-md-9 col-sm-9">
<div class="col-md-10 col-sm-10">
<form class="form-horizontal" id="settings-form" role="form">
<script id="panels-template" type="text/template">
<% _.each(descriptions, function(group){ %>
<div class="panel panel-default">
<div class="panel panel-default" id="<%- group.name %>">
<div class="panel-heading">
<h3 class="panel-title"><%- group.label %></h3>
</div>