Revert "Implemented a single columned list for the kubernetes metrics…

… reference page (#42823)" This reverts commit 71cd6ca.
kubernetes · Dec 9, 2023 · 7f8d4ac · 7f8d4ac
1 parent 82a9d87
commit 7f8d4ac
Show file tree

Hide file tree

Showing 2 changed files with 3,054 additions and 3,065 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -392,63 +392,52 @@ footer {
 }
 
 main {
-
-/* SCSS Related to the Metrics list */
-
-  div.metric:nth-of-type(odd) { // Look & Feel , Aesthetics
-    background-color: $light-grey;
+  .td-content table code,
+  .td-content>table td {
+    word-break: break-word;
   }
 
-  div.metrics {
+/* SCSS Related to the Metrics Table */
+
+    @media (max-width: 767px) { // for mobile devices, Display the names, Stability levels & types
 
-    .metric {
-      div:empty{
+     table.metrics { 
+      th:nth-child(n + 4),
+      td:nth-child(n + 4) {
         display: none;
       }
 
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      gap: .75em;
-      padding:.75em .75em .75em .75em;
-
-      .metric_name{
-        font-size: large;
-        font-weight: bold;
-        word-break: break-word;
+      td.metric_type{
+        min-width: 7em;
       }
-
-      label{
-        font-weight: bold;
-        margin-right: .5em;
+      td.metric_stability_level{
+        min-width: 6em;
       }
-      ul {
-        li:empty{
-          display: none;
+    }
+    }
+
+    table.metrics tbody{ // Tested dimensions to improve overall aesthetic of the table
+      tr {
+        td {
+          font-size: smaller;
         }
-        display: flex;
-        flex-direction: column;
-        gap: .75em;
-        flex-wrap: wrap;
-        li.metric_labels_varying{
-          span{
-                display: inline-block;
-                background-color: rgb(240, 239, 239);
-                padding: 0 0.5em;
-                margin-right: .35em;
-                font-family: monospace;
-                border: 1px solid rgb(230 , 230 , 230);
-                border-radius: 5%;
-                margin-bottom: .35em;
-          }
+        td.metric_labels_varying{
+          min-width: 9em;
         }
-
+        td.metric_type{
+          min-width: 9em;
+        }
+        td.metric_description{
+          min-width: 10em;
+        }
+
       }
-
     }
 
-
-  }
+  table.no-word-break td,
+  table.no-word-break code {
+    word-break: normal;
+}
 }
 
 // blockquotes and callouts