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 8, 2024 · 811a177 · 811a177
1 parent be7911e
commit 811a177
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;