refactor(static-html): Re-arrange the CSS file

Group related styles together and add comments to the resulting sections. This intends to give a better overview as a basis for re-designing the project table. Signed-off-by: Frank Viernau <[email protected]>
oss-review-toolkit · May 15, 2024 · ddd4497 · ddd4497
1 parent d4c16a5
commit ddd4497
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 108 deletions.
diff --git a/...s/reporters/static-html/src/funTest/assets/static-html-reporter-test-expected-output.html b/...s/reporters/static-html/src/funTest/assets/static-html-reporter-test-expected-output.html
@@ -32,6 +32,10 @@
     padding: 0;
 }
 
+/*
+ * The root tag which contains everything.
+ */
+
 #report-container {
     background-color: #fff;
     border: 1px solid rgba(34, 36, 38, .15);
@@ -85,29 +89,9 @@
     border-top: 1px solid rgba(34, 36, 38, .15);
 }
 
-.excluded {
-    filter: opacity(50%);
-}
-
-.reason {
-    border-radius: 3px;
-    background: #EEE;
-    padding: 2px;
-    font-size: 12px;
-    display: inline;
-}
-
-table.excluded tr.excluded {
-    filter: opacity(100%);
-}
-
-table tr.excluded td li.excluded {
-    filter: opacity(100%);
-}
-
-table.excluded tr.excluded td li.excluded {
-    filter: opacity(100%);
-}
+/*
+ * The base class for the main top level tables for violations, issues and projects.
+ */
 
 .report-table {
     border-spacing: 0;
@@ -117,33 +101,6 @@
     width: 100%;
 }
 
-.report-table tr.error {
-    background: #fff6f6;
-    color: #9f3a38;
-}
-
-.report-table tr.warning {
-    background: #fffaf3;
-    color: #573a08;
-}
-
-.report-table tr.hint {
-    background: #f7f5ff;
-    color: #1c0859;
-}
-
-.report-table tr:last-child td {
-    border-bottom: 1px solid rgba(34, 36, 38, .15);
-}
-
-.report-table tr:last-child td:first-child {
-    border-bottom-left-radius: .28rem;
-}
-
-.report-table tr:last-child td:last-child {
-    border-bottom-right-radius: .28rem;
-}
-
 .report-table th {
     background-color: #f9fafb;
     border-left: 1px solid rgba(34, 36, 38, .15);
@@ -169,6 +126,18 @@
     border-top: 1px solid rgba(34, 36, 38, .15);
 }
 
+.report-table tr:last-child td {
+    border-bottom: 1px solid rgba(34, 36, 38, .15);
+}
+
+.report-table tr:last-child td:first-child {
+    border-bottom-left-radius: .28rem;
+}
+
+.report-table tr:last-child td:last-child {
+    border-bottom-right-radius: .28rem;
+}
+
 .report-table td {
     border-left: 1px solid rgba(34, 36, 38, .15);
     border-top: 1px solid rgba(34, 36, 38, .15);
@@ -183,11 +152,42 @@
     border-right: 1px solid rgba(34, 36, 38, .15);
 }
 
+.report-table li.resolved {
+    color: #2c662d;
+}
+
+.report-table details {
+    overflow: scroll;
+}
+
+.report-table tr.error {
+    background: #fff6f6;
+    color: #9f3a38;
+}
+
+.report-table tr.warning {
+    background: #fffaf3;
+    color: #573a08;
+}
+
+.report-table tr.hint {
+    background: #f7f5ff;
+    color: #1c0859;
+}
+
+/**
+ * Rule violation table, which specializes .report-table.
+ */
+
 .report-rule-violation-table tr.resolved {
     background: #fcfff5;
     color: #2c662d;
 }
 
+/**
+ * Project table, which specializes .report-table.
+ */
+
 .report-project-table tr.error {
     color: black;
 }
@@ -197,14 +197,38 @@
     color: #9f3a38;
 }
 
-.report-table li.resolved {
-    color: #2c662d;
+/*
+ * Excluded state.
+ */
+
+.excluded {
+    filter: opacity(50%);
 }
 
-.report-table details {
-    overflow: scroll;
+.reason {
+    border-radius: 3px;
+    background: #EEE;
+    padding: 2px;
+    font-size: 12px;
+    display: inline;
 }
 
+table.excluded tr.excluded {
+    filter: opacity(100%);
+}
+
+table tr.excluded td li.excluded {
+    filter: opacity(100%);
+}
+
+table.excluded tr.excluded td li.excluded {
+    filter: opacity(100%);
+}
+
+/**
+ * Report table media specific styling.
+ */
+
 @media all and (max-width: 1000px) {
     .report-table th:nth-child(2), .report-table td:nth-child(2) {
         display: none;

diff --git a/plugins/reporters/static-html/src/main/resources/static-html-reporter.css b/plugins/reporters/static-html/src/main/resources/static-html-reporter.css
@@ -24,6 +24,10 @@ ul {
     padding: 0;
 }
 
+/*
+ * The root tag which contains everything.
+ */
+
 #report-container {
     background-color: #fff;
     border: 1px solid rgba(34, 36, 38, .15);
@@ -77,29 +81,9 @@ ul {
     border-top: 1px solid rgba(34, 36, 38, .15);
 }
 
-.excluded {
-    filter: opacity(50%);
-}
-
-.reason {
-    border-radius: 3px;
-    background: #EEE;
-    padding: 2px;
-    font-size: 12px;
-    display: inline;
-}
-
-table.excluded tr.excluded {
-    filter: opacity(100%);
-}
-
-table tr.excluded td li.excluded {
-    filter: opacity(100%);
-}
-
-table.excluded tr.excluded td li.excluded {
-    filter: opacity(100%);
-}
+/*
+ * The base class for the main top level tables for violations, issues and projects.
+ */
 
 .report-table {
     border-spacing: 0;
@@ -109,33 +93,6 @@ table.excluded tr.excluded td li.excluded {
     width: 100%;
 }
 
-.report-table tr.error {
-    background: #fff6f6;
-    color: #9f3a38;
-}
-
-.report-table tr.warning {
-    background: #fffaf3;
-    color: #573a08;
-}
-
-.report-table tr.hint {
-    background: #f7f5ff;
-    color: #1c0859;
-}
-
-.report-table tr:last-child td {
-    border-bottom: 1px solid rgba(34, 36, 38, .15);
-}
-
-.report-table tr:last-child td:first-child {
-    border-bottom-left-radius: .28rem;
-}
-
-.report-table tr:last-child td:last-child {
-    border-bottom-right-radius: .28rem;
-}
-
 .report-table th {
     background-color: #f9fafb;
     border-left: 1px solid rgba(34, 36, 38, .15);
@@ -161,6 +118,18 @@ table.excluded tr.excluded td li.excluded {
     border-top: 1px solid rgba(34, 36, 38, .15);
 }
 
+.report-table tr:last-child td {
+    border-bottom: 1px solid rgba(34, 36, 38, .15);
+}
+
+.report-table tr:last-child td:first-child {
+    border-bottom-left-radius: .28rem;
+}
+
+.report-table tr:last-child td:last-child {
+    border-bottom-right-radius: .28rem;
+}
+
 .report-table td {
     border-left: 1px solid rgba(34, 36, 38, .15);
     border-top: 1px solid rgba(34, 36, 38, .15);
@@ -175,11 +144,42 @@ table.excluded tr.excluded td li.excluded {
     border-right: 1px solid rgba(34, 36, 38, .15);
 }
 
+.report-table li.resolved {
+    color: #2c662d;
+}
+
+.report-table details {
+    overflow: scroll;
+}
+
+.report-table tr.error {
+    background: #fff6f6;
+    color: #9f3a38;
+}
+
+.report-table tr.warning {
+    background: #fffaf3;
+    color: #573a08;
+}
+
+.report-table tr.hint {
+    background: #f7f5ff;
+    color: #1c0859;
+}
+
+/**
+ * Rule violation table, which specializes .report-table.
+ */
+
 .report-rule-violation-table tr.resolved {
     background: #fcfff5;
     color: #2c662d;
 }
 
+/**
+ * Project table, which specializes .report-table.
+ */
+
 .report-project-table tr.error {
     color: black;
 }
@@ -189,14 +189,38 @@ table.excluded tr.excluded td li.excluded {
     color: #9f3a38;
 }
 
-.report-table li.resolved {
-    color: #2c662d;
+/*
+ * Excluded state.
+ */
+
+.excluded {
+    filter: opacity(50%);
 }
 
-.report-table details {
-    overflow: scroll;
+.reason {
+    border-radius: 3px;
+    background: #EEE;
+    padding: 2px;
+    font-size: 12px;
+    display: inline;
+}
+
+table.excluded tr.excluded {
+    filter: opacity(100%);
 }
 
+table tr.excluded td li.excluded {
+    filter: opacity(100%);
+}
+
+table.excluded tr.excluded td li.excluded {
+    filter: opacity(100%);
+}
+
+/**
+ * Report table media specific styling.
+ */
+
 @media all and (max-width: 1000px) {
     .report-table th:nth-child(2), .report-table td:nth-child(2) {
         display: none;