From 892be2c2b8f25bfb7a69509e5aa3552789ae2a12 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Wed, 17 Feb 2021 23:18:53 -0500
Subject: [PATCH] added content and design

---
 .../Shared/Components/NodeInfo/Default.cshtml | 10 +++-
 src/BirdsiteLive/wwwroot/css/pattern.css      | 53 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/BirdsiteLive/Views/Shared/Components/NodeInfo/Default.cshtml b/src/BirdsiteLive/Views/Shared/Components/NodeInfo/Default.cshtml
index 3c30c68..60a6be0 100644
--- a/src/BirdsiteLive/Views/Shared/Components/NodeInfo/Default.cshtml
+++ b/src/BirdsiteLive/Views/Shared/Components/NodeInfo/Default.cshtml
@@ -3,5 +3,13 @@
 *@
 
 <div>
-    TEST
+    <a href="#" class="badge badge-light" title="What does this mean?">Whitelisting Enabled</a>
+    <a href="#" class="badge badge-light" title="What does this mean?">Blacklisting Enabled</a>
+
+    <div class="node-progress-bar">
+        <div class="node-progress-bar__label">Instance saturation: </div>
+        <div class="progress node-progress-bar__bar"> 
+            <div class="progress-bar" style="width: 15%">15%</div>
+        </div>
+    </div>
 </div>
diff --git a/src/BirdsiteLive/wwwroot/css/pattern.css b/src/BirdsiteLive/wwwroot/css/pattern.css
index 7816722..161c812 100644
--- a/src/BirdsiteLive/wwwroot/css/pattern.css
+++ b/src/BirdsiteLive/wwwroot/css/pattern.css
@@ -1,8 +1,57 @@
 .container-nodeinfo {
     line-height: 30px;
-    
+    text-align: center;   
 }
 
 .wrapper-nodeinfo {
     border-bottom: 1px solid #dee2e6;
-}
\ No newline at end of file
+}
+
+
+
+@media (max-width: 767px) {
+    .node-progress-bar {
+        display: block;
+        width: 100%;
+        margin-bottom: 7px;
+    }
+
+    .node-progress-bar__label {
+        display: block;
+        font-size: 12px;
+        /*float: left;*/
+        padding: 0 5px 0 0;
+        /*height: 15px;*/
+        line-height: 15px;
+    }
+
+    .node-progress-bar__bar {
+        width: 80%;
+        margin: auto;
+        margin-top: 5px;
+    }
+}
+
+
+@media (min-width: 768px) {
+    .node-progress-bar {
+        display: inline-block;
+        width: 400px;
+    }
+
+    .node-progress-bar__label {
+        display: inline-block;
+        font-size: 12px;
+        float: left;
+        padding: 0 5px 0 0;
+        /*height: 15px;*/
+        line-height: 15px;
+    }
+
+    .node-progress-bar__bar {
+        width: 200px;
+        position: relative;
+        top: -1px;
+    }
+}
+