Handle more screen sizes with console templates.

This is based on #1198, and avoids all the weird behaviour where the graphs aren't aligned.

Handle more screen sizes with console templates.
4f9c2519 · Brian Brazil · 6adf77e4 · 4f9c2519 · 4f9c2519 · 4f9c2519
Commit 4f9c2519 authored 9 years ago by Brian Brazil
--- a/console_libraries/menu.lib
+++ b/console_libraries/menu.lib
@@ -3,23 +3,21 @@
 {{/* Navbar, should be passed . */}}
 {{ define "navbar" }}
 <nav class="navbar navbar-inverse navbar-static-top">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="{{ pathPrefix }}/">Prometheus</a>
-    </div>
-
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav">
-        <li><a href="{{ pathPrefix }}/alerts">Alerts</a></li>
-        <li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
-      </div>
+  <!-- Brand and toggle get grouped for better mobile display -->
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="{{ pathPrefix }}/">Prometheus</a>
+  </div>
+
+  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+    <ul class="nav navbar-nav">
+      <li><a href="{{ pathPrefix }}/alerts">Alerts</a></li>
+      <li><a href="https://www.pagerduty.com/">PagerDuty</a></li>
    </ul>
  </div>
 </nav>
@@ -27,7 +25,7 @@
  
 {{/* LHS menu, should be passed . */}}
 {{ define "menu" }}
-<div class="prom_lhs_menu">
+<div class="col-md-2 prom_lhs_menu">
 <ul>
 {{ template "_menuItem" (args . "index.html.example" "Overview") }}
  

--- a/console_libraries/prom.lib
+++ b/console_libraries/prom.lib
@@ -21,6 +21,8 @@
 {{ template "prom_console_head" }}
 </head>
 <body>
+<div class="prom_console_content">
+  <div class="container-fluid">
 {{ template "navbar" . }}
 {{ template "menu" . }}
 {{ end }}
@@ -47,7 +49,7 @@ renderTemplate is the name of the template to use to render the value.
 {{ define "prom_path" }}/consoles/{{ .Path }}?{{ range $param, $value := .Params }}{{ $param }}={{ $value }}&amp;{{ end }}{{ end }}"
  
 {{ define "prom_right_table_head" }}
-<div class="prom_console_rhs">
+<div class="col-md-3 col-md-push-7">
 <table class="table table-bordered table-hover table-condensed">
 {{ end }}
 {{ define "prom_right_table_tail" }}
@@ -73,12 +75,10 @@ renderTemplate is the name of the template to use to render the value.
  
  
 {{ define "prom_content_head" }}
-<div class="prom_console_content">
-  <div class="container">
+<div class="col-md-7 col-md-pull-3">
 {{ template "prom_graph_timecontrol" . }}
 {{ end }}
 {{ define "prom_content_tail" }}
-  </div>
 </div>
 {{ end }}
  
@@ -128,6 +128,8 @@ renderTemplate is the name of the template to use to render the value.
  
 {{/* Bottom of all pages. */}}
 {{ define "tail" }}
+  </div>
+</div>
 </body>
 </html>
 {{ end }}
--- a/web/ui/bindata.go
+++ b/web/ui/bindata.go
--- a/web/ui/static/css/prom_console.css
+++ b/web/ui/static/css/prom_console.css
@@ -2,15 +2,16 @@
  margin-bottom: 0;
 }
  
+.container-fluid {
+  padding: 0;
+}
+
 div.prom_lhs_menu {
-  float: left;
-  margin-right: 2ex;
  background: #222;
-  min-height: 100%;
-  overflow: auto;
 }
 .prom_lhs_menu ul {
  list-style: none;
+  padding-top: .5ex;
  padding-left: .5ex;
  margin-left: .5ex;
 }
@@ -38,21 +39,6 @@ li.prom_lhs_menu_selected {
  background: #666666;
 }
  
-.prom_console_rhs {
-  float: right;
-  margin-left: 1ex;
-  height: 100%;
-}
-.prom_console_rhs table {
-  margin-top: 1ex;
-  margin-bottom: 32px;  /* Space for time control. */
-}
-.prom_console_rhs th {
-  text-align: center;
-}
-.prom_console_rhs td:nth-child(2) {
-  text-align: right;
-}
  
 .prom_console_content {
  overflow: visible;