Fix table styling (#1381)

levkk · web-flow · commit 85c078dd5135 · 2024-03-21T13:17:34.000-07:00
diff --git a/pgml-dashboard/.env.development b/pgml-dashboard/.env.development
@@ -1,3 +1,4 @@
 DATABASE_URL=postgres:///pgml_dashboard_development
 DEV_MODE=true
 RUST_LOG=debug,tantivy=error,rocket=info
+SITE_SEARCH_DATABASE_URL=postgres:///pgml_dashboard_development
diff --git a/pgml-dashboard/src/components/tables/large/row/mod.rs b/pgml-dashboard/src/components/tables/large/row/mod.rs
@@ -14,7 +14,7 @@ impl Row {
     pub fn new(columns: &[Component]) -> Row {
         Row {
             columns: columns.to_vec(),
-            action: "click->tables-large-table#selectRow".to_string(),
+            action: "".to_string(),
             data: vec![],
         }
     }
@@ -28,6 +28,10 @@ impl Row {
         self.data.push((name.to_owned(), value.to_owned()));
         self
     }
+
+    pub fn selectable(self) -> Self {
+        self.action("click->tables-large-table#selectRow")
+    }
 }
 
 component!(Row);
diff --git a/pgml-dashboard/src/components/tables/large/table/mod.rs b/pgml-dashboard/src/components/tables/large/table/mod.rs
@@ -21,6 +21,7 @@ impl Table {
 
     pub fn selectable(mut self) -> Self {
         self.classes.push_str(" selectable");
+        self.rows = self.rows.into_iter().map(|r| r.selectable()).collect();
         self
     }
 }
diff --git a/pgml-dashboard/src/components/tables/large/table/table.scss b/pgml-dashboard/src/components/tables/large/table/table.scss
@@ -1,54 +1,81 @@
 table.table.table-lg {
-    td, tr, th {
-        border-width: 0;
-    }
+  td,
+  tr,
+  th {
+    border-width: 0;
+  }
 
-    border-collapse: separate;
-    border-spacing: 0 16px;
+  border-collapse: separate;
+  border-spacing: 0 16px;
 
-    thead {
-        th {
-            color: #{$slate-shade-100};
-            background: #{$gray-800};
-            text-transform: uppercase;
-            font-size: 0.75rem;
-            padding: 16px 0;
+  thead {
+    th {
+      color: #{$slate-shade-100};
+      background: #{$gray-800};
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      padding: 16px 0;
 
-            &:first-of-type {
-                padding-left: 67px;
-            }
-        }
+      &:first-of-type {
+        padding-left: 67px;
+      }
     }
 
-    tbody {
-         tr {
-            &:hover, &.active {
-                td {
-                    background: #{$gray-800};
-                }
-            }
-
-            td {
-                background: #{$gray-600};
-                vertical-align: middle;
-                padding: 20px 0;
-
-                &:first-of-type {
-                    padding-left: 67px;
-                }
-            }
-        }
+    tr {
+      th:first-child {
+        border-top-left-radius: $border-radius;
+      }
+      th:last-child {
+        border-top-right-radius: $border-radius;
+      }
     }
+  }
+
+  tbody {
+    tr {
+      &.active {
+        td {
+          background: #{$gray-800};
+        }
+      }
 
-    &.selectable {
-        tbody {
-            tr:hover {
-                cursor: pointer;
-            }
+      td {
+        background: #{$gray-600};
+        vertical-align: middle;
+        padding: 20px 0;
+
+        &:first-of-type {
+          padding-left: 67px;
         }
+      }
+
+      td:first-child {
+        border-top-left-radius: $border-radius;
+        border-bottom-left-radius: $border-radius;
+      }
+      td:last-child {
+        border-top-right-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
     }
+  }
+
+  &.selectable {
+    --bs-table-hover-bg: #{$gray-700};
 
-    .table-cell-content {
-        height: 100%;
+    tbody {
+      tr:hover {
+        cursor: pointer;
+        background: #{$gray-800};
+      }
     }
+  }
+
+  & {
+    --bs-table-hover-bg: #{$gray-600};
+  }
+
+  .table-cell-content {
+    height: 100%;
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ impl Row {`
`14`	`14`	`pub fn new(columns: &[Component]) -> Row {`
`15`	`15`	`Row {`
`16`	`16`	`columns: columns.to_vec(),`
`17`		`- action: "click->tables-large-table#selectRow".to_string(),`
	`17`	`+ action: "".to_string(),`
`18`	`18`	`data: vec![],`
`19`	`19`	`}`
`20`	`20`	`}`
`@@ -28,6 +28,10 @@ impl Row {`
`28`	`28`	`self.data.push((name.to_owned(), value.to_owned()));`
`29`	`29`	`self`
`30`	`30`	`}`
	`31`	`+`
	`32`	`+ pub fn selectable(self) -> Self {`
	`33`	`+ self.action("click->tables-large-table#selectRow")`
	`34`	`+ }`
`31`	`35`	`}`
`32`	`36`
`33`	`37`	`component!(Row);`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ impl Table {`
`21`	`21`
`22`	`22`	`pub fn selectable(mut self) -> Self {`
`23`	`23`	`self.classes.push_str(" selectable");`
	`24`	`+ self.rows = self.rows.into_iter().map(\|r\| r.selectable()).collect();`
`24`	`25`	`self`
`25`	`26`	`}`
`26`	`27`	`}`