Merge pull request #88 from synyx/clickable-row

Clickable status with highlighting on hover
synyx · Jun 26, 2023 · db3e433 · db3e433
2 parents 756e6af + 1856b52
commit db3e433
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 41 deletions.
diff --git a/pkg/web/static/css/main.css b/pkg/web/static/css/main.css
@@ -17,8 +17,8 @@ h3 {
 
 table, td {
     border: none;
-    padding: 2px;
-    border-spacing: 2px;
+    border-collapse: collapse;
+    padding: 3px;
     font-size: 1.1em;
 }
 
@@ -91,40 +91,41 @@ th {
 
 .status {
     font-weight: bold;
+    padding: 0;
 }
 
-.status.green {
+.status.green, .status.green summary, .status.green details {
     background-color: #269926;
     color: white;
-    padding: 3px;
     opacity: 0.75;
 }
 
-.status.red {
+.status.red, .status.red summary, .status.red details {
     background-color: #FF4040;
     color: white;
-    padding: 3px;
     opacity: 0.75;
 }
 
-.status.yellow {
-    background-color: #FFDE40;
+.status.yellow, .status.yellow summary, .status.yellow details {
+    background-color: #C8AF38;
     color: black;
-    padding: 3px;
-    opacity: 0.75;
 }
 
-.status.grey {
+.status.grey, .status.grey summary, .status.grey details {
     background-color: #444444;
     color: white;
-    padding: 3px;
-    opacity: 0.90;
 }
 
 summary {
     list-style: none;
-    float: right;
+    padding: 3px;
+    cursor: pointer;
+}
+
+summary:hover {
+    filter: brightness(110%) !important;
 }
+
 summary::-webkit-details-marker {
     display: none;
 }
@@ -134,28 +135,12 @@ details summary::after {
 details[open] summary::after {
     content: "⮾";
 }
-.status details summary {
-    cursor: pointer;
-    float: right;
-}
-.status details[open] summary {
-    float: right;
-    text-align: right;
-}
 
-.status > details {
-    display: inline;
-    position: relative;
-    float: right;
-    max-width: inherit;
-}
-.status > details[open] {
-    display: inline;
-    position: relative;
-    float: left;
-    width: 100%;
+details .content {
+    padding: 3px;
 }
-.status details div, .status details pre  {
+
+.status details .content  {
     font-size: 0.75em;
     opacity: 0.8;
     width: 95%;

diff --git a/pkg/web/templates/alerts.gohtml b/pkg/web/templates/alerts.gohtml
@@ -20,15 +20,17 @@
             {{.Where}} <span class="tag {{.Tag}}">{{.Tag}}</span>
         </td>
         <td class="status {{.Status}}">
-            {{.What}}
             <details>
                 <summary>
+                    {{.What}}
                     {{range .Links}}
                         {{.}}
                     {{end}}
                 </summary>
-                <div>{{.Details}}</div>
-                <pre>{{json .Labels}}</pre>
+                <div class="content">
+                    <div>{{.Details}}</div>
+                    <pre>{{json .Labels}}</pre>
+                </div>
             </details>
         </td>
         <td align="right"><time datetime="{{.When.Seconds}}S">{{niceDuration .When}}</time></td>
@@ -54,16 +56,18 @@
                 {{.Where}} <span class="tag {{.Tag}}">{{.Tag}}</span>
             </td>
             <td class="status {{.Status}}">
-                {{.What}}
-                <span><i>({{.Reason}})</i></span>
                 <details>
                     <summary>
+                        {{.What}}
+                        <span><i>({{.Reason}})</i></span>
                         {{range .Links}}
                             {{.}}
                         {{end}}
                     </summary>
-                    <div>{{.Details}}</div>
-                    <pre>{{json .Labels}}</pre>
+                    <div class="content">
+                        <div>{{.Details}}</div>
+                        <pre>{{json .Labels}}</pre>
+                    </div>
                 </details>
             </td>
             <td align="right"><time datetime="{{.When.Seconds}}S">{{niceDuration .When}}</time></td>