Make headings only contain heading content (#531)

FairwindsOps · Oct 2, 2022 · f75b164 · f75b164
1 parent d0f9655
commit f75b164
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/pkg/dashboard/assets/css/main.css b/pkg/dashboard/assets/css/main.css
@@ -402,6 +402,18 @@ COMPONENTS
   color: var(--color-accent-2);
 }
 
+.layoutCluster {
+  align-items: center;
+  gap: var(--gap--2);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.layoutCluster.--start {
+  justify-content: start;
+}
+
 .layoutLineup {
   display: flex;
   flex-wrap: wrap;
@@ -855,7 +867,6 @@ input[type="number"] {
 
 .lower-number {
   font-size: 1.25rem;
-  font-weight: normal;
 }
 
 .lower-number--negative {

diff --git a/pkg/dashboard/templates/container.gohtml b/pkg/dashboard/templates/container.gohtml
@@ -17,16 +17,15 @@
 {{ $uuid := getUUID }}
 
 <section class="detailInfo --qos verticalRhythm">
-  <h5>
-    <a href="#guaranteed-qos"
-      >Guaranteed <abbr title="Quality of Service">QoS</abbr></a
-    >
+  <div class="layoutCluster --start">
+    <h5>Guaranteed QoS</h5>
+
     {{if lt $.GuaranteedCostInt 0}}
-      <span class="lower-number lower-number--negative">-${{$.GuaranteedCost}}/hour</span>
+      <p class="lower-number lower-number--negative">-${{$.GuaranteedCost}}/hour</p>
     {{else}}
-      <span class="lower-number lower-number--positive">+${{$.GuaranteedCost}}/hour</span>
+      <p class="lower-number lower-number--positive">+${{$.GuaranteedCost}}/hour</p>
     {{end}}
-  </h5>
+  </div>
 
   <table class="compTable callout">
     <caption class="visually-hidden">
@@ -110,16 +109,15 @@
 </section>
 
 <section class="detailInfo --qos verticalRhythm">
-  <h5>
-    <a href="#burstable-qos"
-      >Burstable <abbr title="Quality of Service">QoS</abbr></a
-    >
+  <div class="layoutCluster --start">
+    <h5>Burstable QoS</h5>
+
     {{if lt $.BurstableCostInt 0}}
-      <span class="lower-number lower-number--negative">-${{$.BurstableCost}}/hour</span>
+      <p class="lower-number lower-number--negative">-${{$.BurstableCost}}/hour</p>
     {{else}}
-      <span class="lower-number lower-number--positive">+${{$.BurstableCost}}/hour</span>
+      <p class="lower-number lower-number--positive">+${{$.BurstableCost}}/hour</p>
     {{end}}
-  </h5>
+  </div>
 
   <table class="compTable callout">
     <caption class="visually-hidden">