From 894fc63835b9a939851678e7f0ba988a89fe59b4 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Sun, 28 Jan 2024 21:17:47 -0800 Subject: [PATCH] Refactor data table to use `btrix-table` component (#1474) - Refactors `btrix-data-table` to use `btrix-table` - Prevent tables from breaking layout at smaller screen size --- frontend/src/components/ui/data-table.ts | 139 ++++++------------ frontend/src/components/ui/tab-list.ts | 17 +-- .../src/components/ui/table/table-head.ts | 1 - frontend/src/pages/org/crawl-detail.ts | 6 +- frontend/src/pages/org/dashboard.ts | 10 +- frontend/src/pages/org/settings.ts | 38 +++-- frontend/src/pages/org/workflow-detail.ts | 2 +- frontend/tailwind.config.js | 6 +- 8 files changed, 88 insertions(+), 131 deletions(-) diff --git a/frontend/src/components/ui/data-table.ts b/frontend/src/components/ui/data-table.ts index 7a3ff066..69499f8d 100644 --- a/frontend/src/components/ui/data-table.ts +++ b/frontend/src/components/ui/data-table.ts @@ -1,7 +1,8 @@ -import type { TemplateResult } from "lit"; -import { LitElement, html, css } from "lit"; +import { html, css, type TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; +import { TailwindElement } from "@/classes/TailwindElement"; + type CellContent = string | TemplateResult<1>; /** @@ -21,60 +22,15 @@ type CellContent = string | TemplateResult<1>; * ``` */ @customElement("btrix-data-table") -export class DataTable extends LitElement { +export class DataTable extends TailwindElement { // postcss-lit-disable-next-line static styles = css` - :host { - display: contents; - } - - .table { - display: table; - table-layout: fixed; - font-family: var(--font-monostyle-family); - font-variation-settings: var(--font-monostyle-variation); - width: 100%; - } - - .thead { - display: table-header-group; - } - - .tbody { - display: table-row-group; - } - - .row { - display: table-row; - } - - .cell { - display: table-cell; - vertical-align: middle; - } - - .cell:nth-of-type(n + 2) { - border-left: 1px solid var(--sl-panel-border-color); - } - - .cell[role="cell"] { - border-top: 1px solid var(--sl-panel-border-color); - } - - .cell.padSmall { - padding: var(--sl-spacing-2x-small); - } - - .cell.padded { - padding: var(--sl-spacing-x-small); - } - - .thead .row { - background-color: var(--sl-color-neutral-50); - color: var(--sl-color-neutral-700); - font-size: var(--sl-font-size-x-small); - line-height: 1rem; - text-transform: uppercase; + btrix-table { + --btrix-cell-gap: var(--sl-spacing-x-small); + --btrix-cell-padding-top: var(--sl-spacing-x-small); + --btrix-cell-padding-bottom: var(--sl-spacing-x-small); + --btrix-cell-padding-left: var(--sl-spacing-x-small); + --btrix-cell-padding-right: var(--sl-spacing-x-small); } `; @@ -84,51 +40,46 @@ export class DataTable extends LitElement { @property({ type: Array }) rows: Array = []; - // Array of CSS widths + // Array of CSS grid track widths + // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns#values @property({ type: Array }) columnWidths: string[] = []; render() { + const gridAutoColumnsStyle = `--btrix-table-grid-auto-columns: ${ + this.columnWidths.length + ? this.columnWidths.join(" ") + : "minmax(max-content, auto)" + }`; return html` -
-
-
- ${this.columns.map(this.renderColumnHeader)} -
-
-
- ${this.rows.map(this.renderRow)} -
-
+ + + ${this.columns.map( + (content, i) => html` + 0 ? "border-l" : ""}> + ${content} + + ` + )} + + + ${this.rows.map( + (cells, i) => html` + 0 ? "border-t" : ""}> + ${cells.map( + (content, ii) => + html` 0 ? "border-l" : ""} + >${content}` + )} + + ` + )} + + `; } - - private renderColumnHeader = (cell: CellContent, index: number) => html` -
- ${cell} -
- `; - - private renderRow = (cells: CellContent[]) => html` -
${cells.map(this.renderCell)}
- `; - - private renderCell = (cell: CellContent) => { - const shouldPadSmall = - typeof cell === "string" - ? false - : // TODO better logic to check template component - cell.strings[0].startsWith(" - ${cell} - - `; - }; } diff --git a/frontend/src/components/ui/tab-list.ts b/frontend/src/components/ui/tab-list.ts index 6713b0c7..220a8fe5 100644 --- a/frontend/src/components/ui/tab-list.ts +++ b/frontend/src/components/ui/tab-list.ts @@ -4,9 +4,8 @@ import { property, queryAsync, customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; const DEFAULT_PANEL_ID = "default-panel"; -// Match witch tailwind 4xl max width -// https://tailwindcss.com/docs/max-width -const SCREEN_LG_PX = 896; +// Breakpoint in pixels for 2-column layout +const TWO_COL_SCREEN_MIN = 1032; /** * Tab list @@ -90,15 +89,15 @@ export class TabList extends LitElement { "header" "main"; grid-template-columns: 1fr; - grid-gap: 1rem; + grid-gap: 1.5rem; } - @media only screen and (min-width: ${SCREEN_LG_PX}px) { + @media only screen and (min-width: ${TWO_COL_SCREEN_MIN}px) { .container { grid-template-areas: ". header" "menu main"; - grid-template-columns: auto minmax(auto, 70rem); + grid-template-columns: 16.5rem 1fr; } } @@ -106,7 +105,7 @@ export class TabList extends LitElement { grid-area: menu; } - @media only screen and (min-width: ${SCREEN_LG_PX}px) { + @media only screen and (min-width: ${TWO_COL_SCREEN_MIN}px) { .navWrapper { overflow: initial; } @@ -141,7 +140,7 @@ export class TabList extends LitElement { margin-left: var(--track-width); } - @media only screen and (min-width: ${SCREEN_LG_PX}px) { + @media only screen and (min-width: ${TWO_COL_SCREEN_MIN}px) { .tablist { display: block; } @@ -166,7 +165,7 @@ export class TabList extends LitElement { background-color: var(--sl-color-blue-500); } - @media only screen and (min-width: ${SCREEN_LG_PX}px) { + @media only screen and (min-width: ${TWO_COL_SCREEN_MIN}px) { .tablist, .show-indicator .track, .show-indicator .indicator { diff --git a/frontend/src/components/ui/table/table-head.ts b/frontend/src/components/ui/table/table-head.ts index 15b3791b..6b962711 100644 --- a/frontend/src/components/ui/table/table-head.ts +++ b/frontend/src/components/ui/table/table-head.ts @@ -21,7 +21,6 @@ export class TableHead extends LitElement { color: var(--sl-color-neutral-700); font-size: var(--sl-font-size-x-small); line-height: 1; - white-space: nowrap; } `; diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts index f5170565..605e5eae 100644 --- a/frontend/src/pages/org/crawl-detail.ts +++ b/frontend/src/pages/org/crawl-detail.ts @@ -259,9 +259,9 @@ export class CrawlDetail extends LiteElement {
${this.renderHeader()}
-
-
${this.renderNav()}
-
${sectionContent}
+
+
${this.renderNav()}
+
${sectionContent}
diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index f3f88620..003a46d9 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/frontend/src/pages/org/dashboard.ts @@ -812,12 +812,10 @@ export class Dashboard extends LiteElement { return html` ${msg("Usage History")} -
- -
+ `; } diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts index 816d1051..19267a0b 100644 --- a/frontend/src/pages/org/settings.ts +++ b/frontend/src/pages/org/settings.ts @@ -159,7 +159,7 @@ export class OrgSettings extends LiteElement { [ user.name, this.renderUserRoleSelect(user), this.renderRemoveMemberButton(user), ]); return html` -
+
${msg("Delete")}`, + ]} .rows=${rows} .columnWidths=${columnWidths} > @@ -293,18 +297,20 @@ export class OrgSettings extends LiteElement { ${msg("Pending Invites")} -
- [ - user.email, - this.renderUserRole(user), - this.renderRemoveInviteButton(user), - ])} - .columnWidths=${columnWidths} - > - -
+ ${msg("Remove")}`, + ]} + .rows=${this.pendingInvites.map((user) => [ + user.email, + this.renderUserRole(user), + this.renderRemoveInviteButton(user), + ])} + .columnWidths=${columnWidths} + > +
` )} diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts index 01469760..0b96c3fe 100644 --- a/frontend/src/pages/org/workflow-detail.ts +++ b/frontend/src/pages/org/workflow-detail.ts @@ -538,7 +538,7 @@ export class WorkflowDetail extends LiteElement { { diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index feba66e2..c0dc4d7c 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -105,8 +105,12 @@ function makeTheme() { aspectRatio: { "4/3": "4 / 3", // For Browsertrix watch/replay }, + gridTemplateColumns: { + 13: "repeat(13, minmax(0, 1fr))", + 14: "repeat(14, minmax(0, 1fr))", + }, screens: { - desktop: "82.5rem", + desktop: "82.5rem", // 14 4.5rem columns with 1.5rem gutter // Override default of: // => @media (min-width: 1024px) { ... } },