fix(SW-813): More content page fixes

This commit is contained in:
Erik Tiekstra
2024-11-07 08:57:25 +01:00
parent edad4047ac
commit 76444d6fe9
6 changed files with 28 additions and 32 deletions

View File

@@ -29,6 +29,7 @@ export default function TableBlock({ data }: TableBlockProps) {
header: col.header,
size: col.width,
}))
const hasHeader = columns.some((col) => col.header)
const table = useReactTable({
columns: columnDefs,
@@ -49,9 +50,7 @@ export default function TableBlock({ data }: TableBlockProps) {
return (
<SectionContainer>
{heading ? (
<SectionHeader preamble={data.preamble} title={heading} />
) : null}
{heading ? <SectionHeader preamble={preamble} title={heading} /> : null}
<div className={styles.tableWrapper}>
<ScrollWrapper>
<Table
@@ -61,23 +60,26 @@ export default function TableBlock({ data }: TableBlockProps) {
layout="fixed"
borderRadius="none"
>
<Table.THead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.TR key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.TH
key={header.id}
width={`${header.column.columnDef.size}%`}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Table.TH>
))}
</Table.TR>
))}
</Table.THead>
{hasHeader ? (
<Table.THead>
{table.getHeaderGroups().map((headerGroup) => (
<Table.TR key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<Table.TH
key={header.id}
width={`${header.column.columnDef.size}%`}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</Table.TH>
))}
</Table.TR>
))}
</Table.THead>
) : null}
<Table.TBody>
{table.getRowModel().rows.map((row) => (
<Table.TR key={row.id}>

View File

@@ -33,6 +33,8 @@
.contentContainer {
padding: var(--Spacing-x4) var(--Spacing-x2) 0;
max-width: var(--max-width-content);
margin: 0 auto;
}
.content .contentContainer {
@@ -67,9 +69,7 @@
}
.contentContainer {
max-width: var(--max-width-content);
padding: var(--Spacing-x4) 0 0;
margin: 0 auto;
}
.content .contentContainer {

View File

@@ -65,7 +65,6 @@ export const renderOptions: RenderOptions = {
next: RTENext,
fullRenderOptions: RenderOptions
) => {
console.log({ RTE_A_NODE: node })
if (node.attrs.url) {
const props = extractPossibleAttributes(node.attrs)
return (

View File

@@ -10,10 +10,6 @@
padding-top: var(--Spacing-x4);
}
.content {
padding: var(--Spacing-x0) var(--Spacing-x2);
}
@media screen and (min-width: 1367px) {
.aside {
align-content: flex-start;

View File

@@ -10,7 +10,7 @@
position: relative;
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
cursor: pointer;
color: var(--Base-Text-High-contrast);
font-family: var(--typography-Body-Bold-fontFamily);
@@ -29,7 +29,7 @@
}
.accordionItem.card .summary {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
border-radius: var(--Corner-radius-Medium);
}
@@ -38,7 +38,7 @@
}
.content {
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x1);
overflow: hidden;
max-height: 0;
transition: max-height 0.3s;
@@ -46,6 +46,7 @@
.chevron {
transition: transform 0.3s;
flex-shrink: 0;
}
details[open] .chevron {
transform: rotate(180deg);

View File

@@ -19,9 +19,7 @@
.th {
padding: var(--Spacing-x2);
text-align: left;
text-wrap: nowrap;
}
.td {