ui changes
Costa Tsaousis (ktsaou) committed
Apr 13, 2014 at 17:58 UTC
56eff1f18d7bfa68ee15bd9835ec6612de21936e
1 file changed
+21
-26
web/index.html
+21
-26
@@ -56,12 +56,14 @@
56
function showChartIsLoading(id, width, height) { document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height); }
57
58
function thumbChartActions(i, c, nogroup) {
59
- var refinfo = "the chart " + c.name + " is drawing ";
59
+ var refinfo = "the chart is drawing ";
60
if(c.group == 1) refinfo += "every single point collected.";
61
else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
62
63
- var html = "<div class=\"btn-group btn-group\">"
64
- + "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
63
+ var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" title=\"" + refinfo + "\">"
64
+ + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
65
+ + "</div>"
66
+ + "<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small> " + c.name + "</small></button>";
67
68
if(!nogroup) {
69
var ingroup = 0;
@@ -494,6 +496,10 @@
496
// switch mode
497
mode = MODE_THUMBS;
498
playGraphs();
499
+
500
+ $('[data-spy="scroll"]').each(function () {
501
+ var $spy = $(this).scrollspy('refresh')
502
+ })
503
}
504
505
function switchToGroupGraphs() {
@@ -654,7 +660,7 @@
660
661
// combine all the htmls into one
662
var allcategories = "<table width=\"100%\">";
657
- mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
663
+ mainmenu = "<ul class=\"nav navbar-nav\"><li><a href=\"#\">Home</a></li>";
664
$.each(categories, function(i, a) {
665
allcategories += a.html;
666
mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
@@ -663,6 +669,7 @@
669
mainmenu += "</ul>";
670
671
thumbsContainer.innerHTML = allcategories;
672
+ $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
673
switchToThumbGraphs();
674
});
675
}
@@ -670,11 +677,11 @@
677
</script>
678
</head>
679
673
-<body role="document">
680
+<body role="document" data-spy="scroll" data-target="#main_menu_div">
681
<nav id="mynav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
682
<div class="container">
683
<div class="navbar-header">
677
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
684
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_menu_div">
685
<span class="sr-only">Toggle navigation</span>
686
<span class="icon-bar"></span>
687
<span class="icon-bar"></span>
@@ -684,15 +691,7 @@
691
</div>
692
<div class="collapse navbar-collapse" id="main_menu_div">
693
<ul class="nav navbar-nav">
687
- <li class="active"><a href="#">Home</a></li>
688
- <li><a href="#system">System</a></li>
689
- <li><a href="#net">Network</a></li>
690
- <li><a href="#tc">QoS</a></li>
691
- <li><a href="#conntrack">Netfilter</a></li>
692
- <li><a href="#ipv4">IPv4</a></li>
693
- <li><a href="#ipvs">IPVS</a></li>
694
- <li><a href="#cpu">CPU</a></li>
695
- <li><a href="#disk">Disk</a></li>
694
+ <li><a href="#">Home</a></li>
695
</ul>
696
</div><!--/.nav-collapse -->
697
</div>
@@ -804,16 +803,6 @@
803
804
<div class="container graphs" id="groupgraphs_container">
805
<div class="allgraphs" id="groupgraphs">
807
- <table width="100%">
808
- <tr><td id="splash" align="center" style="vertical-align:middle">
809
- <span class="glyphicon glyphicon-off"></span>
810
- <br/><br/>
811
- loading charts
812
- <br/><br/>
813
- <span class="label label-default">Please wait...</span>
814
- </h1>
815
- </td></tr>
816
- </table>
806
</div>
807
</div>
808
@@ -821,7 +810,13 @@
810
$(document).ready(function(){
811
document.getElementById('splash').height = $(window).height();
812
824
- $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
813
+ $(document).on('click','.navbar-collapse.in',function(e) {
814
+ if( $(e.target).is('a') ) {
815
+ $(this).collapse('hide');
816
+ }
817
+ });
818
+
819
+ $('body').scrollspy({ target: '#main_menu_div' })
820
});
821
822
</script>