design

html/css/base.css

@@ -16,6 +16,24 @@ HTML,BODY {
     margin-bottom: 30px;
 }
 
+.btn-sm {
+    line-height: 1.3;
+    font-size: 0.75rem;
+}
+
+.view_service_btn {
+    position: absolute;
+    bottom: -40px;
+    right: 40px;
+}
+
+.service_lower_info {
+    position: absolute;
+    bottom: -40px;
+    left: 40px;
+    color: #d1ffca;
+    font-size: 0.85rem;
+}
 
 .failing_bg {
     background-color: #ff4e4e !important;
@@ -56,12 +74,46 @@ HTML,BODY {
 
 .offline_bg {
     background-color: white !important;
+    padding-bottom: 70px !important;
 }
 
 .online_list {
 
 }
 
+.lower_canvas {
+    position: absolute;
+    bottom: -60px;
+    height: 60px;
+    left: 15px;
+    width: 800px;
+    background-color: #48d338;
+    padding: 17px 10px;
+}
+
+.lower_canvas SPAN {
+    font-size: 0.85rem;
+}
+
+.offline_lower_canvas {
+    position: absolute;
+    bottom: -120px;
+    height: 60px;
+    left: -25px;
+    width: 805px;
+    padding: 17px 10px;
+}
+
+.offline_lower_canvas SPAN {
+    font-weight: bold;
+    font-size: 0.85rem;
+}
+
+.offline_lower_canvas A {
+    background-color: #c51b1a;
+    border: 1px solid #bb1727;
+}
+
 .footer {
     text-decoration: none;
     margin-top: 20px;
@@ -121,20 +173,6 @@ HTML,BODY {
     padding: 5px 15px;
 }
 
-.btn-danger {
-    background-color: #dd3545;
-    border: 1px solid #b70000;
-    color: #fffcfc;
-    height: 35px;
-    padding: 5px 15px;
-}
-
-.lower_canvas {
-    width: 100%;
-    height: 100%;
-    background-color: #48d338;
-}
-
 .card-body {
     padding-bottom: 85px;
 }
@@ -170,7 +208,7 @@ HTML,BODY {
     .card-body {
         font-size: 6pt;
         padding: 5px 10px;
-        height: 330px;
+        height: 350px;
     }
 
     .lg_number {
@@ -187,5 +225,31 @@ HTML,BODY {
         padding-right: 0;
     }
 
+    .lower_canvas {
+        bottom: -3.65rem;
+        width: 98vw;
+    }
 
+    .lower_canvas SPAN {
+        font-size: 0.75rem;
+        float: left;
+    }
+
+    .btn-sm {
+        line-height: 0.75rem;
+        font-size: 0.65rem;
+    }
+
+    .offline_bg {
+        padding-bottom: 0 !important;
+        height: 240px !important;
+    }
+
+    .offline_lower_canvas {
+        width: 100vw;
+    }
+    .col-12 {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
 }

html/tmpl/index.html

@@ -79,7 +79,19 @@
                         {{ if .AvgTime }}
                         <div class="chart-container">
                             <canvas id="service_{{ .Id }}"></canvas>
-                            <div class="lower_canvas"></div>
+                            <div class="lower_canvas text-white">
+                                <div class="col-12">
+                                <span>No failures within the last 25 days</span>
+                                <a href="/service/{{ .Id }}" class="btn btn-success btn-sm float-right">View Service</a>
+                                </div>
+                            </div>
+                        </div>
+                        {{ else }}
+                            <div class="offline_lower_canvas bg-danger">
+                                <div class="col-12">
+                                <span class="text-white">383 failures in the last 24 hours</span>
+                                <a href="/service/{{ .Id }}" class="btn btn-danger btn-sm float-right">View Failures</a>
+                                </div>
                             </div>
                         {{ end }}