a little more space on the dashboard and the sidebar menu
Costa Tsaousis (ktsaou) committed
Sep 5, 2016 at 22:39 UTC
adc822a809106d18076c49869620d7df800d27c0
1 file changed
+74
-29
web/index.html
+74
-29
@@ -101,10 +101,6 @@
101
margin-top: 10px;
102
}
103
104
- .container {
105
- width: 90% !important;
106
- }
107
-
104
#masthead h1 {
105
/*font-size: 30px;*/
106
line-height: 1;
@@ -277,37 +273,48 @@
273
margin-top: 0;
274
}
275
276
+ .container {
277
+ width: calc(100% - 20px) !important;
278
+ }
279
+
280
+ .charts-body {
281
+ display: inline-block;
282
+ width: 100%;
283
+ }
284
+
285
+ .sidebar-body {
286
+ position: absolute;
287
+ display: none;
288
+ }
289
+
290
@media (min-width: 768px) {
291
+ .charts-body {
292
+ padding-left: 0%;
293
+ padding-right: 0%;
294
+ }
295
+
296
.back-to-top,
297
.dashboard-theme-toggle {
298
display: block;
299
}
300
+ }
301
286
- /* Widen the fixed sidebar */
287
- .dashboard-sidebar.affix,
288
- .dashboard-sidebar.affix-top,
289
- .dashboard-sidebar.affix-bottom {
290
- width: 200px !important;
302
+ /* Show and affix the side nav when space allows it */
303
+ @media (min-width: 992px) {
304
+ .container {
305
+ padding-left: 1% !important;
306
}
307
293
- .dashboard-sidebar.affix {
294
- position: fixed; /* Undo the static from mobile first approach */
295
- top: 20px;
308
+ .charts-body {
309
+ width: calc(100% - 213px) !important;
310
+ padding-right: 0% !important;
311
}
312
298
- .dashboard-sidebar.affix-bottom {
299
- position: absolute; /* Undo the static from mobile first approach */
313
+ .sidebar-body {
314
+ display: inline-block !important;
315
+ width: 213px !important;
316
}
317
302
- .dashboard-sidebar.affix-bottom .dashboard-sidenav,
303
- .dashboard-sidebar.affix .dashboard-sidenav {
304
- margin-top: 0;
305
- margin-bottom: 0;
306
- }
307
- }
308
-
309
- /* Show and affix the side nav when space allows it */
310
- @media (min-width: 992px) {
318
.dashboard-sidebar .nav > .active > ul {
319
display: block;
320
}
@@ -316,7 +323,7 @@
323
.dashboard-sidebar.affix,
324
.dashboard-sidebar.affix-top,
325
.dashboard-sidebar.affix-bottom {
319
- width: 200px !important;
326
+ width: 213px !important;
327
}
328
.dashboard-sidebar.affix {
329
position: fixed; /* Undo the static from mobile first approach */
@@ -333,13 +340,51 @@
340
}
341
342
@media (min-width: 1200px) {
343
+ .container {
344
+ padding-left: 3% !important;
345
+ }
346
+
347
+ .charts-body {
348
+ width: calc(100% - 233px) !important;
349
+ padding-right: 1% !important;
350
+ }
351
+
352
+ .sidebar-body {
353
+ display: inline-block !important;
354
+ width: 233px !important;
355
+ }
356
+
357
/* Widen the fixed sidebar again */
337
- .dashboard-sidebar.affix-bottom,
358
+ .dashboard-sidebar.affix,
359
.dashboard-sidebar.affix-top,
339
- .dashboard-sidebar.affix {
340
- width: 263px;
360
+ .dashboard-sidebar.affix-bottom {
361
+ width: 233px !important;
362
}
363
}
364
+
365
+ @media (min-width: 1360px) {
366
+ .container {
367
+ padding-left: 4% !important;
368
+ }
369
+
370
+ .charts-body {
371
+ width: calc(100% - 263px) !important;
372
+ padding-right: 2% !important;
373
+ }
374
+
375
+ .sidebar-body {
376
+ display: inline-block !important;
377
+ width: 263px !important;
378
+ }
379
+
380
+ /* Widen the fixed sidebar again */
381
+ .dashboard-sidebar.affix,
382
+ .dashboard-sidebar.affix-top,
383
+ .dashboard-sidebar.affix-bottom {
384
+ width: 263px !important;
385
+ }
386
+ }
387
+
388
</style>
389
390
<!-- check which theme to use -->
@@ -641,10 +686,10 @@
686
687
<div class="container">
688
<div class="row">
644
- <div class="col-md-10" role="main">
689
+ <div class="charts-body" role="main">
690
<div id="charts_div"></div>
691
</div>
647
- <div class="col-md-2" role="complementary">
692
+ <div class="sidebar-body hidden-xs hidden-sm" role="complementary">
693
<nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
694
</div>
695
</div>