]> arthur.barton.de Git - netdata.git/commitdiff
projects / netdata.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2ec983f)
ui changes
authorCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sun, 13 Apr 2014 14:58:43 +0000 (17:58 +0300)
committerCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sun, 13 Apr 2014 14:58:43 +0000 (17:58 +0300)
web/index.html patch | blob | history

diff --git a/web/index.html b/web/index.html
index fd2bd802039d96a35848d54b1893c0d5e291df6b..41bd82c1d325eafbdab681d82632358d115bf58b 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -56,12 +56,14 @@
        function showChartIsLoading(id, width, height) { document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height); }
 
        function thumbChartActions(i, c, nogroup) {
-               var refinfo = "the chart " + c.name + " is drawing ";
+               var refinfo = "the chart is drawing ";
                if(c.group == 1) refinfo += "every single point collected.";
                else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
 
-               var html = "<div class=\"btn-group btn-group\">"
-               +               "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
+               var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" title=\"" + refinfo + "\">"
+               +               "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
+               +       "</div>"
+               +       "<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small>&nbsp;&nbsp; " + c.name + "</small></button>";
 
                if(!nogroup) {
                        var ingroup = 0;
@@ -494,6 +496,10 @@
                // switch mode
                mode = MODE_THUMBS;
                playGraphs();
+
+               $('[data-spy="scroll"]').each(function () {
+                       var $spy = $(this).scrollspy('refresh')
+               })
        }
 
        function switchToGroupGraphs() {
@@ -654,7 +660,7 @@
                        
                        // combine all the htmls into one
                        var allcategories = "<table width=\"100%\">";
-                       mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
+                       mainmenu = "<ul class=\"nav navbar-nav\"><li><a href=\"#\">Home</a></li>";
                        $.each(categories, function(i, a) {
                                allcategories += a.html;
                                mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
@@ -663,6 +669,7 @@
                        mainmenu += "</ul>";
 
                        thumbsContainer.innerHTML = allcategories;
+                       $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
                        switchToThumbGraphs();
                });
        }
@@ -670,11 +677,11 @@
        </script>
 </head>
 
-<body role="document">
+<body role="document" data-spy="scroll" data-target="#main_menu_div">
     <nav id="mynav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_menu_div">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -684,15 +691,7 @@
         </div>
         <div class="collapse navbar-collapse" id="main_menu_div">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#system">System</a></li>
-            <li><a href="#net">Network</a></li>
-            <li><a href="#tc">QoS</a></li>
-            <li><a href="#conntrack">Netfilter</a></li>
-            <li><a href="#ipv4">IPv4</a></li>
-            <li><a href="#ipvs">IPVS</a></li>
-            <li><a href="#cpu">CPU</a></li>
-            <li><a href="#disk">Disk</a></li>
+            <li><a href="#">Home</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -804,16 +803,6 @@
 
     <div class="container graphs" id="groupgraphs_container">
        <div class="allgraphs" id="groupgraphs">
-               <table width="100%">
-                       <tr><td id="splash" align="center" style="vertical-align:middle">
-                               <span class="glyphicon glyphicon-off"></span>
-                               <br/><br/>
-                               loading charts
-                               <br/><br/>
-                               <span class="label label-default">Please wait...</span>
-                               </h1>
-                       </td></tr>
-               </table>
        </div>
        </div>
 
@@ -821,7 +810,13 @@
                $(document).ready(function(){
                        document.getElementById('splash').height = $(window).height();
 
-                       $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
+                       $(document).on('click','.navbar-collapse.in',function(e) {
+                               if( $(e.target).is('a') ) {
+                                       $(this).collapse('hide');
+                               }
+                       });
+                       
+                       $('body').scrollspy({ target: '#main_menu_div' })
                });
 
        </script>
NetData