From 815c29ce693d01e986199cfbdefeeafd689bfb84 Mon Sep 17 00:00:00 2001
From: Rob Scott <rob.scott87@gmail.com>
Date: Tue, 14 May 2019 10:38:28 -0400
Subject: [PATCH] moving to expandable category info

---
 pkg/dashboard/assets/css/dashboard.css   |  59 +++++--------
 pkg/dashboard/templates/dashboard.gohtml | 103 +++++++++++------------
 2 files changed, 71 insertions(+), 91 deletions(-)

diff --git a/pkg/dashboard/assets/css/dashboard.css b/pkg/dashboard/assets/css/dashboard.css
index 7e7f2947..18d603d5 100644
--- a/pkg/dashboard/assets/css/dashboard.css
+++ b/pkg/dashboard/assets/css/dashboard.css
@@ -107,59 +107,42 @@
   margin-right: 3px;
 }
 
-.card.category h3 strong {
-  font-weight: 800;
+.category .name {
+  font-weight: bold;
 }
 
-.category-list {
-  list-style-type: none;
-  margin: 10px 20px;
-  padding: 0;
-}
-
-.category-list .category-head {
-  margin: 20px 0 0;
-}
-
-.category-list .category-name {
-  font-size: 20px;
+.category .category-score {
+  font-size: 13px;
+  margin-left: 5px;
   font-weight: 200;
 }
 
-.category-list .category-results {
-  font-size: 13px;
-  float: right;
+.category .category-score strong {
+  font-weight: bold;
 }
 
-.category-list .category-info {
-  font-size: 13px;
+
+.category .category-info {
+  font-size: 14px;
   line-height: 21px;
-  color: #777;
-  margin: 0;
+  margin-left: 25px;
 }
 
-.category-list .category-info a {
+.category .category-info a {
   font-weight: bold;
   color: #777;
   text-decoration: none;
 }
 
-.category-list .category-info a:hover {
+.category .category-info a:hover {
   color: #23103A;
 }
 
-.category-list .status {
-  margin: 5px 0;
-  width: 840px;
+.category .status {
+  width: 200px;
   animation: fadeIn 2s;
 }
 
-.category-list .status div {
-  height: 5px;
-  border-radius: 3px;
-}
-
-
 .expandable-table {
   width: 100%;
   border-spacing: 0;
@@ -170,7 +153,7 @@
   height: 50px;
 }
 
-.expandable-table td {
+.expandable-table .resource-info {
   padding: 15px 20px;
   margin: 0;
   font-size: 18px;
@@ -256,17 +239,17 @@ a.more-info {
   text-decoration: none;
 }
 
-.namespace .status-bar {
-  vertical-align: top;
-  padding-top: 21px;
+.card .status-bar {
+  padding-top: 7px;
+  float: right;
 }
 
-.namespace .status-bar .status {
+.card .status-bar .status {
   float: right;
   animation: fadeIn 2s;
 }
 
-.namespace .status {
+.card .status {
   width: 200px;
 }
 
diff --git a/pkg/dashboard/templates/dashboard.gohtml b/pkg/dashboard/templates/dashboard.gohtml
index d153a56b..19450668 100644
--- a/pkg/dashboard/templates/dashboard.gohtml
+++ b/pkg/dashboard/templates/dashboard.gohtml
@@ -40,70 +40,35 @@
   </div>
 
   <div class="card category">
-    <h3>Results by <strong>Category</strong></h3>
-    <ul class="category-list">
+    <h3>Results by Category</h3>
+    <div class="expandable-table">
       {{ range $category, $summary := .AuditData.ClusterSummary.Results.ByCategory }}
-        <li>
-          <div class="category-head">
-            <span class="category-name">{{ $category }}</span>
-            <span class="category-results">Score: <strong>{{ getScore $summary }}%</strong></span>
-          </div>
+        <div class="resource-info">
           <div class="status-bar">
             <div class="status">
               <div class="failing">
-                <div class="warning" style="width: {{ getWarningWidth $summary 840 }}px;">
-                    <div class="passing" style="width: {{ getSuccessWidth $summary 840 }}px;"></div>
+                <div class="warning" style="width: {{ getWarningWidth $summary 200 }}px;">
+                  <div class="passing" style="width: {{ getSuccessWidth $summary 200 }}px;"></div>
                 </div>
               </div>
             </div>
           </div>
-          <p class="category-info">Properly configured health checks can ensure the long term availability and reliability of your application running in Kubernetes. Polaris validates that health checks are configured for each pod running in your cluster. Refer to the <a href="#">Polaris Docs</a> for more information</p>
-        </li>
-      {{ end }}
-    </ul>
+          <div class="name"><span class="caret-expander"></span>{{ $category }}<span class="category-score">Score: <strong>{{ getScore $summary }}%</strong></span></div>
+            <div class="result-messages expandable-content">
+            <p class="category-info">Properly configured health checks can ensure the long term availability and reliability of your application running in Kubernetes. Polaris validates that health checks are configured for each pod running in your cluster. Refer to the <a href="#">Polaris Docs</a> for more information.</p>
+          </div>
+        </div>
+      {{ end }} {{/* end range categories */}}
+    </div>
   </div>
 
   {{ range $namespace, $nsResult := .AuditData.NamespacedResults }}
     <div class="card namespace">
       <h3>Namespace: <strong>{{ $namespace }}</strong></h3>
-      <table class="expandable-table" cellspacing="0">
+      <div class="expandable-table">
         {{ range .DeploymentResults }}
-          <tr>
-            <td class="resource-info">
-                <div class="name"><span class="caret-expander"></span>Deployment: <strong>{{ .Name }}</strong></div>
-                  <div class="result-messages expandable-content">
-                    <h4>Pod Spec:</h4>
-                    <ul class="message-list">
-                      {{ range $message := .PodResult.Messages}}
-                        <li class="{{ .Type }}">
-                          <i class="message-icon {{ getIcon $message }}"></i>
-                          <a class="more-info" href="/details/{{ getCategoryLink .Category }}">
-                            <i class="far fa-question-circle"></i>
-                          </a>
-                          <span class="message">{{ .Message }}</span>
-                        </li>
-                      {{ end }}
-                    </ul>
-                  </div>
-                  {{ range .PodResult.ContainerResults}}
-                    <div class="result-messages expandable-content">
-                      <h4>Container: {{ .Name }}</h4>
-                      <ul class="message-list">
-                        {{ range $message := .Messages}}
-                          <li class="{{ .Type }}">
-                            <i class="message-icon {{ getIcon $message }}"></i>
-                            <a class="more-info" href="/details/{{ getCategoryLink .Category }}">
-                              <i class="far fa-question-circle"></i>
-                            </a>
-                            <span class="message">{{ .Message }}</span>
-                          </li>
-                        {{ end }}
-                      </ul>
-                    </div>
-                  {{ end }} {{/* end range .PodResult.ContainerResults */}}
-                </div>
-            </td>
-            <td class="status-bar">
+          <div class="resource-info">
+            <div class="status-bar">
               <div class="status">
                 <div class="failing">
                   <div class="warning" style="width: {{ getWarningWidth .PodResult.Summary.Totals 200 }}px;">
@@ -111,10 +76,42 @@
                   </div>
                 </div>
               </div>
-            </td>
-          </tr>
+            </div>
+
+            <div class="name"><span class="caret-expander"></span>Deployment: <strong>{{ .Name }}</strong></div>
+              <div class="result-messages expandable-content">
+                <h4>Pod Spec:</h4>
+                <ul class="message-list">
+                  {{ range $message := .PodResult.Messages}}
+                    <li class="{{ .Type }}">
+                      <i class="message-icon {{ getIcon $message }}"></i>
+                      <a class="more-info" href="/details/{{ getCategoryLink .Category }}">
+                        <i class="far fa-question-circle"></i>
+                      </a>
+                      <span class="message">{{ .Message }}</span>
+                    </li>
+                  {{ end }}
+                </ul>
+              </div>
+              {{ range .PodResult.ContainerResults}}
+                <div class="result-messages expandable-content">
+                  <h4>Container: {{ .Name }}</h4>
+                  <ul class="message-list">
+                    {{ range $message := .Messages}}
+                      <li class="{{ .Type }}">
+                        <i class="message-icon {{ getIcon $message }}"></i>
+                        <a class="more-info" href="/details/{{ getCategoryLink .Category }}">
+                          <i class="far fa-question-circle"></i>
+                        </a>
+                        <span class="message">{{ .Message }}</span>
+                      </li>
+                    {{ end }}
+                  </ul>
+                </div>
+              {{ end }} {{/* end range .PodResult.ContainerResults */}}
+            </div>
         {{ end }} {{/* end range .DeploymentResults */}}
-      </table>
+      </div>
     </div>
   {{ end }} {{/* end range .AuditData.NamespacedResults */}}
   <script src="/static/js/charts.js">