fix for affix
Costa Tsaousis (ktsaou) committed
Dec 21, 2015 at 02:52 UTC
74c4ef8bc3aaa1a093906aa5fb749704ef454ba9
1 file changed
+22
-19
web/index.html
+22
-19
@@ -92,8 +92,9 @@
92
body.modal-open{
93
width: 100% !important;
94
padding-right: 0 !important;
95
- overflow-y: scroll !important;
96
- position: fixed !important;
95
+/* overflow-y: scroll !important; */
96
+/* position: fixed !important;*/
97
+ overflow: visible;
98
}
99
100
/*
@@ -106,7 +107,7 @@
107
.dashboard-sidebar {
108
max-height: calc(100% - 70px) !important;
109
overflow-y: auto;
109
- width: 170px !important;
110
+ /*width: 220px !important;*/
111
}
112
113
/* By default it's not affixed in mobile views, so undo that */
@@ -122,10 +123,10 @@
123
.affix {
124
position: static;
125
top: 70px !important;
125
- width: 170px;
126
+ /*width: 220px;*/
127
}
128
.affix-top {
128
- width: 170px;
129
+ /*width: 220px;*/
130
}
131
132
/* First level of nav */
@@ -250,7 +251,7 @@
251
<script type="text/javascript" src="dashboard.js?v2"></script>
252
</head>
253
253
-<body data-spy="scroll">
254
+<body data-spy="scroll" data-target="#sidebar">
255
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
256
<div class="container">
257
<div class="navbar-header">
@@ -307,7 +308,7 @@
308
<div id="charts_div"></div>
309
</div>
310
<div class="col-md-2" role="complementary">
310
- <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" data-spy="affix" id="sidebar" role="menu"></nav>
311
+ <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
312
</div>
313
</div>
314
</div>
@@ -781,7 +782,7 @@ function prepareScreen(data) {
782
// find the proper duration for per-second updates
783
var duration = Math.round(($(div).width() * pcent_width / 100 * data.update_every / 3) / 60) * 60;
784
var html = '';
784
- var sidebar = '<ul class="nav dashboard-sidenav" id="sidebar_ul">';
785
+ var sidebar = '<ul class="nav dashboard-sidenav" data-spy="affix" id="sidebar_ul">';
786
787
function getMessage(id) {
788
if(typeof messages[id] !== 'undefined')
@@ -924,7 +925,7 @@ function prepareScreen(data) {
925
*/
926
div.innerHTML = html;
927
document.getElementById('sidebar').innerHTML = sidebar;
927
-
928
+
929
// resize all charts - without starting the background thread
930
// this has to be done while NETDATA is paused
931
// if we ommit this, the affix menu will be wrong, since all
@@ -944,16 +945,10 @@ function prepareScreen(data) {
945
$('html, body').animate({ scrollTop: offset.top }, 0);
946
}
947
947
- /* activate bootstrap scrollspy (needed for sidebar) */
948
- $(document.body).scrollspy({
949
- target: '#sidebar',
950
- offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
951
- });
952
-
948
/* activate bootstrap sidebar (affix) */
949
$('#sidebar').affix({
950
offset: {
956
- top: (document.location.hostname === demo_hostname)?200:0,
951
+ top: (document.location.hostname === demo_hostname)?150:0,
952
bottom: 0
953
}
954
});
@@ -965,6 +960,12 @@ function prepareScreen(data) {
960
$(this).removeAttr('style');
961
});
962
963
+ /* activate bootstrap scrollspy (needed for sidebar) */
964
+ $(document.body).scrollspy({
965
+ target: '#sidebar',
966
+ offset: $(window).height() / 3 // controls the diff of the <hX> element to the top, to select it
967
+ });
968
+
969
document.getElementById('footer').style.display = 'block';
970
971
// default options
@@ -982,6 +983,11 @@ function prepareScreen(data) {
983
$('#sync_selection').change(function() { NETDATA.options.current.sync_selection = $(this).prop('checked'); });
984
$('#sync_pan_and_zoom').change(function() { NETDATA.options.current.sync_pan_and_zoom = $(this).prop('checked'); });
985
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.options.current.stop_updates_when_focus_is_lost = $(this).prop('checked'); });
986
+
987
+ if(document.location.hostname === demo_hostname)
988
+ setTimeout(function() {
989
+ $('#welcomeModal').modal();
990
+ }, 1000);
991
}
992
993
NETDATA.ready(function() {
@@ -999,9 +1005,6 @@ NETDATA.ready(function() {
1005
// pause the NETDATA thread that updates the charts
1006
NETDATA.pause(function() {
1007
1002
- if(document.location.hostname === demo_hostname)
1003
- $('#welcomeModal').modal();
1004
-
1008
// prepare our DOM
1009
// this will be called when NETDATA is paused
1010
prepareScreen(data);