fix(SW-813): More content page fixes
This commit is contained in:
@@ -29,6 +29,7 @@ export default function TableBlock({ data }: TableBlockProps) {
|
|||||||
header: col.header,
|
header: col.header,
|
||||||
size: col.width,
|
size: col.width,
|
||||||
}))
|
}))
|
||||||
|
const hasHeader = columns.some((col) => col.header)
|
||||||
|
|
||||||
const table = useReactTable({
|
const table = useReactTable({
|
||||||
columns: columnDefs,
|
columns: columnDefs,
|
||||||
@@ -49,9 +50,7 @@ export default function TableBlock({ data }: TableBlockProps) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SectionContainer>
|
<SectionContainer>
|
||||||
{heading ? (
|
{heading ? <SectionHeader preamble={preamble} title={heading} /> : null}
|
||||||
<SectionHeader preamble={data.preamble} title={heading} />
|
|
||||||
) : null}
|
|
||||||
<div className={styles.tableWrapper}>
|
<div className={styles.tableWrapper}>
|
||||||
<ScrollWrapper>
|
<ScrollWrapper>
|
||||||
<Table
|
<Table
|
||||||
@@ -61,6 +60,7 @@ export default function TableBlock({ data }: TableBlockProps) {
|
|||||||
layout="fixed"
|
layout="fixed"
|
||||||
borderRadius="none"
|
borderRadius="none"
|
||||||
>
|
>
|
||||||
|
{hasHeader ? (
|
||||||
<Table.THead>
|
<Table.THead>
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
<Table.TR key={headerGroup.id}>
|
<Table.TR key={headerGroup.id}>
|
||||||
@@ -78,6 +78,8 @@ export default function TableBlock({ data }: TableBlockProps) {
|
|||||||
</Table.TR>
|
</Table.TR>
|
||||||
))}
|
))}
|
||||||
</Table.THead>
|
</Table.THead>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<Table.TBody>
|
<Table.TBody>
|
||||||
{table.getRowModel().rows.map((row) => (
|
{table.getRowModel().rows.map((row) => (
|
||||||
<Table.TR key={row.id}>
|
<Table.TR key={row.id}>
|
||||||
|
|||||||
@@ -33,6 +33,8 @@
|
|||||||
|
|
||||||
.contentContainer {
|
.contentContainer {
|
||||||
padding: var(--Spacing-x4) var(--Spacing-x2) 0;
|
padding: var(--Spacing-x4) var(--Spacing-x2) 0;
|
||||||
|
max-width: var(--max-width-content);
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .contentContainer {
|
.content .contentContainer {
|
||||||
@@ -67,9 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contentContainer {
|
.contentContainer {
|
||||||
max-width: var(--max-width-content);
|
|
||||||
padding: var(--Spacing-x4) 0 0;
|
padding: var(--Spacing-x4) 0 0;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .contentContainer {
|
.content .contentContainer {
|
||||||
|
|||||||
@@ -65,7 +65,6 @@ export const renderOptions: RenderOptions = {
|
|||||||
next: RTENext,
|
next: RTENext,
|
||||||
fullRenderOptions: RenderOptions
|
fullRenderOptions: RenderOptions
|
||||||
) => {
|
) => {
|
||||||
console.log({ RTE_A_NODE: node })
|
|
||||||
if (node.attrs.url) {
|
if (node.attrs.url) {
|
||||||
const props = extractPossibleAttributes(node.attrs)
|
const props = extractPossibleAttributes(node.attrs)
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -10,10 +10,6 @@
|
|||||||
padding-top: var(--Spacing-x4);
|
padding-top: var(--Spacing-x4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: var(--Spacing-x0) var(--Spacing-x2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1367px) {
|
@media screen and (min-width: 1367px) {
|
||||||
.aside {
|
.aside {
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--Spacing-x1);
|
gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--Base-Text-High-contrast);
|
color: var(--Base-Text-High-contrast);
|
||||||
font-family: var(--typography-Body-Bold-fontFamily);
|
font-family: var(--typography-Body-Bold-fontFamily);
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.accordionItem.card .summary {
|
.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);
|
border-radius: var(--Corner-radius-Medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.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;
|
overflow: hidden;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
transition: max-height 0.3s;
|
transition: max-height 0.3s;
|
||||||
@@ -46,6 +46,7 @@
|
|||||||
|
|
||||||
.chevron {
|
.chevron {
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
details[open] .chevron {
|
details[open] .chevron {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
|
|||||||
@@ -19,9 +19,7 @@
|
|||||||
|
|
||||||
.th {
|
.th {
|
||||||
padding: var(--Spacing-x2);
|
padding: var(--Spacing-x2);
|
||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-wrap: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.td {
|
.td {
|
||||||
|
|||||||
Reference in New Issue
Block a user