Merge pull request #212 from prometheus/ui/smaller-navigation-links

Restyle navigation a bit, align content elements with it

web/static/css/graph.css

@@ -6,6 +6,10 @@ a { color: black; }
 a:hover { color: gray; }
 a:active { color: black; }
 
+.graph_wrapper {
+  margin-top: 8px;
+}
+
 .graph_container {
   font-family: Arial, Helvetica, sans-serif;
 }

web/static/css/prometheus.css

@@ -1,5 +1,5 @@
 body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333;
@@ -15,6 +15,10 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
           border-radius: 3px;
 }
 
+h2 {
+  margin-left: 8px;
+}
+
 .grouping_box {
   position: relative;
   padding: 5px;
@@ -24,6 +28,7 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
+  margin: 0px 8px 2px 8px;
 }
 
 .grouping_box .head, .eval_stats {
@@ -55,18 +60,22 @@ input[name=end_input], input[name=range_input] {
 }
 
 #navigation {
-  font-size: 16pt;
   background-color: #333;
-  color: #F2F2F2;
-  line-height: 120%;
+  padding: 3px;
+  font-size: 13px;
+  font-weight: bold;
 }
 
 #navigation a {
-  color: #F2F2F2;
-  padding-right: 1em;
+  color: #bbb;
+  padding: 5px;
   text-decoration: none;
 }
 
-#navigation a:visited { color: #F2F2F2 }
-#navigation a:active { color: #F60 }
-#navigation a:hover { color: #06C }
+#navigation a:visited { color: #bbb }
+#navigation a:active { color: #fff }
+#navigation a:hover { color: #fff }
+
+#add_graph {
+    margin-left: 8px;
+}

web/static/js/graph_template.handlebar

@@ -1,4 +1,4 @@
-        <div id="graph_wrapper{{id}}">
+        <div id="graph_wrapper{{id}}" class="graph_wrapper">
           <form action="/api/query_range" method="GET" class="query_form">
             <div class="grouping_box">
               <div class="head">
@@ -25,12 +25,12 @@
                   <input title="Time range of graph" type="text" name="range_input" id="range_input{{id}}" size="3" value="{{range_input}}"  >
                   <input type="button" value="+" name="inc_range">
                   <input type="hidden" name="range">
-      
+
                   <input type="button" value="&larr;" name="dec_end">
                   <input title="End time of graph" placeholder="Until" type="text" name="end_input" id="end{{id}}" size="16" value="{{end  }}">
                   <input type="button" value="&rarr;" name="inc_end">
                   <input type="hidden" name="end">
-      
+
                   <input title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
                   <input type="hidden" name="step">
                   <label for="refresh">↻</label>