Inline metrics (#3)

* Styling for inline metrics

* Scripting for inline metrics

Author: MattIPv4

custom-css.css

@@ -1,12 +1,21 @@
-/***********************
- * Consistent rounding *
- ***********************/
+/**************************
+ * Consistent rounding/bg *
+ **************************/
+.layout-content.status.status-index .page-status,
 .layout-content.status.status-index .components-section .components-container.one-column,
 .layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
-    background: rgba(0, 0, 0, 0.3);
     border-radius: 4px;
 }
 
+.availability-time-line-graphic rect {
+  rx: 4px;
+}
+
+.layout-content.status.status-index .components-section .components-container.one-column,
+.layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
+    background: rgba(0, 0, 0, 0.3);
+}
+
 /*********
  * Pills *
  *********/
@@ -193,3 +202,57 @@ body.status .layout-content.status .date.border-color {
 .custom-masthead {
     text-align: center;
 }
+
+/**********
+ * Status *
+ **********/
+.layout-content.status.status-index .page-status {
+    border: none;
+    text-shadow: none;
+}
+
+/***********
+ * Buttons *
+ ***********/
+.flat-button,
+.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
+    box-shadow: none;
+    text-shadow: none;
+}
+
+/***********
+ * Metrics *
+ ***********/
+.metric .metric-meta {
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    margin: .75rem 0 .125rem;
+}
+
+.metric .metric-meta .metric-name,
+.metric .metric-meta .metric-average {
+    display: inline-block;
+}
+
+.metric .metric-meta .metric-average {
+    float: right;
+}
+  
+
+.metric .highcharts-background {
+    fill: none;
+}
+
+.custom-metrics-container .timeframes-container .timeframe {
+    font-size: .85rem;
+    color: #D9643A; /* LINK COLOR */
+    margin: .25em 0 0 .5em;
+}
+
+.custom-metrics-container .timeframes-container #system-metrics {
+    font-size: .85rem;
+    font-weight: normal;
+    color: #B9B9BA;
+    pointer-events: none;
+}

custom-footer.html

@@ -27,4 +27,12 @@
 
     // Fix custom masthead subscribe button
     document.getElementById("show-updates-dropdown").className += " flat-button";
+  
+    // Move metrics to components
+    var metrics = [].slice.call(document.getElementsByClassName('metrics-container')[0].children);
+    var components = [].slice.call(document.getElementsByClassName('components-container')[0].children);
+    for (var i = 0; i < metrics.length; i++) {
+        components[i].appendChild(metrics[i]);
+    }
+    document.getElementsByClassName('components-section')[0].appendChild(document.getElementsByClassName('custom-metrics-container')[0]);
 </script>