From 28448ecfde945c82ae225e67b20cdcc97499a3c6 Mon Sep 17 00:00:00 2001 From: scar055 Date: Thu, 21 Mar 2024 11:56:19 +0100 Subject: [PATCH 1/9] feat: side scroll for accordion table added --- apps/vth-frontend/src/styles/globals.css | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index b35ce0f6..5496136b 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -129,6 +129,31 @@ a { margin-inline: 1rem; } +.utrecht-accordion__panel { + overflow: auto; + background-image: + /* Shadows */ + linear-gradient(to right, white, white), + linear-gradient(to right, white, white), + /* Shadow covers */ linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); + + background-position: + left center, + right center, + left center, + right center; + background-repeat: no-repeat; + background-size: + /* left */ + 20px 100%, + /* right */ 20px 100%, + /* left */ 10px 100%, + /* right */ 10px 100%; + + background-attachment: local, local, scroll, scroll; +} + @media print { .utrecht-accordion__panel { display: block; From 642b9e467ee4dddf22df0e89137bc92a580d2c04 Mon Sep 17 00:00:00 2001 From: scar055 Date: Thu, 21 Mar 2024 12:16:36 +0100 Subject: [PATCH 2/9] fix: linting --- apps/vth-frontend/src/styles/globals.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index 5496136b..a2d1933a 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -130,14 +130,13 @@ a { } .utrecht-accordion__panel { - overflow: auto; + background-attachment: local, local, scroll, scroll; background-image: /* Shadows */ linear-gradient(to right, white, white), linear-gradient(to right, white, white), - /* Shadow covers */ linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), - linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); - + /* Shadow covers */ linear-gradient(to right, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%)), + linear-gradient(to left, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%)); background-position: left center, right center, @@ -150,8 +149,7 @@ a { /* right */ 20px 100%, /* left */ 10px 100%, /* right */ 10px 100%; - - background-attachment: local, local, scroll, scroll; + overflow: auto; } @media print { From e871d783cff664f9f8d6a006e4f46592655b9031 Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 11:24:05 +0200 Subject: [PATCH 3/9] fix(vth-frontend): POC replace Accordion with Details --- .../app/[locale]/theme/[themeSlug]/page.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx index 2106d6cf..1f997638 100644 --- a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx @@ -107,14 +107,16 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => { ) : null; case 'ComponentComponentsUtrechtAccordion': return ( - ({ - id, - label, - headingLevel: 3, - body: {body}, - }))} - /> +
+ {component.item.map(({ id, label, body }: any) => ( +
+ {label} +
+ {body} +
+
+ ))} +
); default: return null; From 9c0f817c614722de3806364e887360fdc1c03e32 Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 13:08:13 +0200 Subject: [PATCH 4/9] fix(vth-frontend): POC details styling to resemble accordion --- .../app/[locale]/theme/[themeSlug]/page.tsx | 29 ++++++++++---- apps/vth-frontend/src/styles/globals.css | 38 ++++++++++++++++++- 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx index 1f997638..8b06a092 100644 --- a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx @@ -108,14 +108,27 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => { case 'ComponentComponentsUtrechtAccordion': return (
- {component.item.map(({ id, label, body }: any) => ( -
- {label} -
- {body} -
-
- ))} + {' '} +
+ {component.item.map(({ id, label, body }: any) => ( +
+ +

{label}

+ +
+ {body} +
+
+ ))} +
+ ({ + id, + label, + headingLevel: 3, + body: {body}, + }))} + />
); default: diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index a2d1933a..a2529bf6 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -131,7 +131,7 @@ a { .utrecht-accordion__panel { background-attachment: local, local, scroll, scroll; - background-image: + background-image: /* Shadows */ linear-gradient(to right, white, white), linear-gradient(to right, white, white), @@ -196,3 +196,39 @@ a { --utrecht-navigation-toggle-button-padding-end: 32px; } } + +/* Experiment */ +details summary::-webkit-details-marker, +details summary::marker { + display: none; + content: ""; +} + +h3.utrecht-accordion__button { + margin: 0px; +} + +h3.utrecht-accordion__button::after { + display: block; + --utrecht-accordion-button-icon-background-color: #ffcc00; + --utrecht-accordion-button-icon-size: 24px; + background-image: var( + --utrecht-accordion-icon-arrow-up, + url( + data:image/svg + xml;charset=utf-8, + %3Csvgxmlns="http://www.w3.org/2000/svg"width="21.39"height="14.39"%3E%3Cpathfill="none"stroke="%231D1D1D"stroke-width="3"stroke-miterlimit="10"d="m15.866 4.135-5.32 5.322-5.322-5.322"/%3E%3C/svg%3E + ) + ); + background-position: 50%; + background-repeat: no-repeat; + content: "v"; + text-align: center; + background-color: var(--utrecht-accordion-button-icon-background-color); + block-size: var(--utrecht-accordion-button-icon-size); + inline-size: var(--utrecht-accordion-button-icon-size); + inset-block-start: 0; + inset-inline-end: 0; + position: absolute; + top: 0; + right: 0; +} From 2c8774d512dcba3f6da073210b72a9572f7900f5 Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 13:47:30 +0200 Subject: [PATCH 5/9] fix(vth-frontend): POC improved details styling to resemble accordion --- apps/vth-frontend/src/styles/globals.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index a2529bf6..41ae262e 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -204,24 +204,21 @@ details summary::marker { content: ""; } -h3.utrecht-accordion__button { +summary h3 { margin: 0px; } -h3.utrecht-accordion__button::after { +summary h3::after { display: block; --utrecht-accordion-button-icon-background-color: #ffcc00; --utrecht-accordion-button-icon-size: 24px; background-image: var( - --utrecht-accordion-icon-arrow-up, - url( - data:image/svg + xml;charset=utf-8, - %3Csvgxmlns="http://www.w3.org/2000/svg"width="21.39"height="14.39"%3E%3Cpathfill="none"stroke="%231D1D1D"stroke-width="3"stroke-miterlimit="10"d="m15.866 4.135-5.32 5.322-5.322-5.322"/%3E%3C/svg%3E - ) + --utrecht-accordion-icon-arrow-down, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E") ); background-position: 50%; background-repeat: no-repeat; - content: "v"; + content: " "; text-align: center; background-color: var(--utrecht-accordion-button-icon-background-color); block-size: var(--utrecht-accordion-button-icon-size); @@ -232,3 +229,10 @@ h3.utrecht-accordion__button::after { top: 0; right: 0; } + +details[open] summary h3::after { + background-image: var( + --utrecht-accordion-icon-arrow-up, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E") + ); +} From 8973f14a44620eae9c4ee526d407d1e344421804 Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 13:54:37 +0200 Subject: [PATCH 6/9] fix(vth-frontend): POC make details summary easier to test --- .../[locale]/[navigationPageSlug]/page.tsx | 32 +++++++++++++----- .../[locale]/article/[articleSlug]/page.tsx | 32 +++++++++++++----- .../src/app/[locale]/print/page.tsx | 33 ++++++++++++++----- .../app/[locale]/theme/[themeSlug]/page.tsx | 3 +- 4 files changed, 74 insertions(+), 26 deletions(-) diff --git a/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx index b04f1c6b..9f137340 100644 --- a/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx @@ -70,14 +70,30 @@ const NavigationPage = async ({ params: { locale, navigationPageSlug } }: Params ) : null; case 'ComponentComponentsUtrechtAccordion': return ( - ({ - id, - label, - headingLevel: 3, - body: {body}, - }))} - /> +
+

Details/Summary

+
+ {component.item.map(({ id, label, body }: any) => ( +
+ +

{label}

+ +
+ {body} +
+
+ ))} +
+

Original AccordionProvider

+ ({ + id, + label, + headingLevel: 3, + body: {body}, + }))} + /> +
); default: return null; diff --git a/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx index 0ac07363..bfedcfca 100644 --- a/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx @@ -126,14 +126,30 @@ const ArticlePage = async ({ params: { locale, articleSlug } }: Params) => { ) : null; case 'ComponentComponentsUtrechtAccordion': return ( - ({ - id, - label, - headingLevel: 3, - body: {body}, - }))} - /> +
+

Details/Summary

+
+ {component.item.map(({ id, label, body }: any) => ( +
+ +

{label}

+ +
+ {body} +
+
+ ))} +
+

Original AccordionProvider

+ ({ + id, + label, + headingLevel: 3, + body: {body}, + }))} + /> +
); default: return null; diff --git a/apps/vth-frontend/src/app/[locale]/print/page.tsx b/apps/vth-frontend/src/app/[locale]/print/page.tsx index 0b569c0b..3c74f6a4 100644 --- a/apps/vth-frontend/src/app/[locale]/print/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/print/page.tsx @@ -180,15 +180,30 @@ const DynamicContent: React.FC<{ ) : null; case 'ComponentComponentsUtrechtAccordion': return ( - ({ - id, - label, - headingLevel: 3, - body: {body}, - }))} - /> +
+

Details/Summary

+
+ {component.item.map(({ id, label, body }: any) => ( +
+ +

{label}

+ +
+ {body} +
+
+ ))} +
+

Original AccordionProvider

+ ({ + id, + label, + headingLevel: 3, + body: {body}, + }))} + /> +
); default: return null; diff --git a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx index 8b06a092..89ebd3cc 100644 --- a/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx +++ b/apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx @@ -108,7 +108,7 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => { case 'ComponentComponentsUtrechtAccordion': return (
- {' '} +

Details/Summary

{component.item.map(({ id, label, body }: any) => (
@@ -121,6 +121,7 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => {
))}
+

Original AccordionProvider

({ id, From 8470e9f7cb15f03df35cfbd44dcc799f5856b61c Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:37:49 +0200 Subject: [PATCH 7/9] chore(vth-frontend): lint fixes --- apps/vth-frontend/src/styles/globals.css | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index 41ae262e..77d381fd 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -200,8 +200,8 @@ a { /* Experiment */ details summary::-webkit-details-marker, details summary::marker { - display: none; content: ""; + display: none; } summary h3 { @@ -209,25 +209,33 @@ summary h3 { } summary h3::after { - display: block; - --utrecht-accordion-button-icon-background-color: #ffcc00; - --utrecht-accordion-button-icon-size: 24px; + background-color: var(--utrecht-accordion-button-icon-background-color); + background-image: var( --utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E") ); + background-position: 50%; background-repeat: no-repeat; - content: " "; - text-align: center; - background-color: var(--utrecht-accordion-button-icon-background-color); + block-size: var(--utrecht-accordion-button-icon-size); + + content: " "; + display: block; + + --utrecht-accordion-button-icon-background-color: #fc0; + + --utrecht-accordion-button-icon-size: 24px; + inline-size: var(--utrecht-accordion-button-icon-size); + inset-block-start: 0; inset-inline-end: 0; position: absolute; - top: 0; right: 0; + text-align: center; + top: 0; } details[open] summary h3::after { From 073ebd2541b3637d0b9788e035863d600b73262e Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 15:47:58 +0200 Subject: [PATCH 8/9] chore(vth-frontend): lint fixes II --- apps/vth-frontend/src/styles/globals.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index 77d381fd..a13b2403 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -210,26 +210,20 @@ summary h3 { summary h3::after { background-color: var(--utrecht-accordion-button-icon-background-color); - background-image: var( --utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E") ); - background-position: 50%; background-repeat: no-repeat; - block-size: var(--utrecht-accordion-button-icon-size); - content: " "; display: block; --utrecht-accordion-button-icon-background-color: #fc0; - --utrecht-accordion-button-icon-size: 24px; inline-size: var(--utrecht-accordion-button-icon-size); - inset-block-start: 0; inset-inline-end: 0; position: absolute; From 78f2ecc253a446b9bdc9bea24977f6aab359462c Mon Sep 17 00:00:00 2001 From: savitris <11764984+savitris@users.noreply.github.com> Date: Thu, 4 Apr 2024 16:12:18 +0200 Subject: [PATCH 9/9] chore(vth-frontend): lint fixes III --- apps/vth-frontend/src/styles/globals.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css index a13b2403..c756a86d 100644 --- a/apps/vth-frontend/src/styles/globals.css +++ b/apps/vth-frontend/src/styles/globals.css @@ -204,11 +204,16 @@ details summary::marker { display: none; } +/* stylelint-disable property-disallowed-list */ +/* stylelint-disable length-zero-no-unit */ summary h3 { margin: 0px; } summary h3::after { + --utrecht-accordion-button-icon-background-color: #fc0; + --utrecht-accordion-button-icon-size: 24px; + background-color: var(--utrecht-accordion-button-icon-background-color); background-image: var( --utrecht-accordion-icon-arrow-down, @@ -219,10 +224,6 @@ summary h3::after { block-size: var(--utrecht-accordion-button-icon-size); content: " "; display: block; - - --utrecht-accordion-button-icon-background-color: #fc0; - --utrecht-accordion-button-icon-size: 24px; - inline-size: var(--utrecht-accordion-button-icon-size); inset-block-start: 0; inset-inline-end: 0;