From 6d74950495d7ebaa7683f1afe30c91476c3f8161 Mon Sep 17 00:00:00 2001 From: Chris Kruining Date: Wed, 11 Dec 2024 14:51:08 +0100 Subject: [PATCH] fix table style issues --- src/app.css | 12 +++-- src/components/table/table.module.css | 64 +++++++++++++++------------ src/components/table/table.tsx | 2 +- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/src/app.css b/src/app.css index d8311b9..7a72a54 100644 --- a/src/app.css +++ b/src/app.css @@ -22,14 +22,20 @@ --surface-600: oklch(from var(--surface-500) calc(l + .025) c h); --surface-700: oklch(from var(--surface-600) calc(l + .025) c h); - --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h)); - --text-2: oklch(from var(--text-1) calc(l + .1) c h); - --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249)); --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3)); --warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9)); --succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150)); + --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h)); + --text-2: oklch(from var(--text-1) calc(l + .1) c h); + + --weight-lighter: 100; + --weight-light: 300; + --weight-normal: 500; + --weight-bold: 700; + --weight-bolder: 900; + --radii-s: .125em; --radii-m: .25em; --radii-l: .5em; diff --git a/src/components/table/table.module.css b/src/components/table/table.module.css index 66c46ba..05867b6 100644 --- a/src/components/table/table.module.css +++ b/src/components/table/table.module.css @@ -1,5 +1,6 @@ .table { - --shadow: hsla(0 0% 0% / .1) 0 .5em 2em; + --shadow-color: oklch(0 0 0 / .05); + --shadow: var(--shadow-color) 0 .5em 2em; position: relative; display: block grid; @@ -25,18 +26,10 @@ background: inherit; white-space: nowrap; - &:has(textarea:focus) { - border-color: var(--info); - } - - & > span { - align-self: center; - } - &:first-of-type { position: sticky; - inset-inline-start: calc(var(--padding-m) * var(--depth)); - padding-inline-start: calc(var(--padding-m) * (1 + var(--depth))); + inset-inline-start: 1px; + padding-inline-start: calc(var(--depth) * 1em + var(--padding-m)); z-index: 1; &::after { @@ -47,29 +40,30 @@ display: block; inline-size: 2em; block-size: calc(3px + 100%); - background: linear-gradient(90deg, hsla(0 0% 0% / .05), transparent); animation: column-scroll-shadow linear both; animation-timeline: scroll(inline); animation-range: 0 2em; + pointer-events: none; } } } & :is(.header, .main, .footer) { - grid-column: span calc(2 + var(--columns)); + grid-column: 1 / -1; display: block grid; grid-template-columns: subgrid; + background-color: inherit; } & .header { position: sticky; inset-block-start: 0; border-block-end: 1px solid var(--surface-300); - background-color: inherit; z-index: 2; animation: header-scroll-shadow linear both; animation-timeline: scroll(); animation-range: 0 2em; + font-weight: var(--weight-bold); & > aside { position: sticky; @@ -91,7 +85,6 @@ opacity: 0; } } - } & .main { @@ -100,13 +93,17 @@ & .row { --alpha: 0; - grid-column: span calc(2 + var(--columns)); + grid-column: 1 / -1; display: block grid; grid-template-columns: subgrid; border: 1px solid transparent; background-color: inherit; background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha))); + /* & > :is(.cell, aside) { + background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha))); + } */ + &:has(> aside > :checked) { --alpha: .1; border-color: var(--info); @@ -132,7 +129,7 @@ & > aside { position: sticky; - inset-inline-start: 0; + inset-inline-start: 1px; background: inherit; padding: var(--padding-m); z-index: 1; @@ -144,7 +141,7 @@ background-color: inherit; &::details-content { - grid-column: span calc(2 + var(--columns)); + grid-column: 1 / -1; display: block grid; grid-template-columns: subgrid; background-color: inherit; @@ -156,22 +153,33 @@ & > summary { position: sticky; - inset-inline-start: 0; + inset-inline-start: 1px; grid-column: 1; - padding: .5em; - padding-inline-start: calc(var(--depth) * 1em + .5em); - } - - & > .row > .cell { + padding: var(--padding-m); padding-inline-start: calc(var(--depth) * 1em + var(--padding-m)); + + &::after { + content: ''; + position: absolute; + inset-inline-start: calc(100% - 1px); + inset-block-start: -.5px; + display: block; + inline-size: 2em; + block-size: 100%; + animation: column-scroll-shadow linear both; + animation-timeline: scroll(inline); + animation-range: 0 2em; + pointer-events: none; + } } } &.selectable { - grid-template-columns: 2em repeat(calc(var(--columns) - 1), minmax(max-content, auto)); + grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto)); & .cell:first-of-type { - inset-inline-start: calc(2em + var(--padding-m) * var(--depth)); + inset-inline-start: 2em; + /* inset-inline-start: calc(2em + var(--padding-m) * var(--depth)); */ } & details > summary { @@ -183,7 +191,7 @@ @property --depth { syntax: ""; - inherits: false; + inherits: true; initial-value: 0; } @@ -203,6 +211,6 @@ } to { - background: linear-gradient(90deg, hsla(0 0% 0% / .05), transparent); + background: linear-gradient(90deg, var(--shadow-color), transparent); } } \ No newline at end of file diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index ab13e30..8d52f07 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -90,7 +90,7 @@ function InnerTable>(props: InnerTableProps) { const table = useTable(); const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None); - const columnCount = createMemo(() => table.columns().length + (selectable() ? 0 : -1)); + const columnCount = createMemo(() => table.columns().length); const nodes = createMemo[]>(() => { const columns = table.columns(); const groupBy = table.groupBy();