Introduces Objects Grid content block and block repetition mechanism migration - #362
Introduces Objects Grid content block and block repetition mechanism migration#362bertyhell wants to merge 9 commits into
Conversation
| const componentState = Array.isArray(rawComponentState) | ||
| ? rawComponentState | ||
| ? configExpectsArray | ||
| ? rawComponentState // block not yet migrated -> keep shape A untouched | ||
| : { ...cleanConfig.components.state, elements: rawComponentState } // legacy A data, config is now B -> migrate | ||
| : { ...cleanConfig.components.state, ...rawComponentState }; |
There was a problem hiding this comment.
Ik moet toegeven dat ik dit behoorlijk onleesbaar vind 😅
| const configExpectsArray = Array.isArray(cleanConfig.components.state); | ||
| const componentState = Array.isArray(rawComponentState) | ||
| ? configExpectsArray | ||
| ? rawComponentState // block still on A → untouched | ||
| : { ...cleanConfig.components.state, elements: rawComponentState } // legacy A data, config now B → migrate | ||
| : { ...cleanConfig.components.state, ...rawComponentState }; | ||
| ``` |
There was a problem hiding this comment.
Wat gebeurd er met blokken die gemigreerd werden omdat we dit lokaal hebben draaien, maar de logica om dit te renderen nog niet op QAS? ZIjn er dan blokken die hierdoor corrupt worden?
| display: grid; | ||
| grid-template-columns: repeat(var(--c-objects-grid-columns), minmax(0, 1fr)); | ||
| grid-auto-rows: var(--c-objects-grid-row-height); | ||
| gap: 1.6rem; |
There was a problem hiding this comment.
Veelvouden van variables.$g-spacer-unit
| color: colors.$color-gray-1000; | ||
| font-family: SofiaPro, sans-serif; | ||
| font-size: 2.4rem; | ||
| font-weight: 800; |
There was a problem hiding this comment.
We gaan dit in mixins moeten steken voor consistentie
| .c-block-objects-grid__tile-image { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; |
There was a problem hiding this comment.
Dit is correct? Ik vraag het vooral omdat sommige video's zoals die van het Vlaams parlement wat vreemd ogen 🙈
| &:focus-visible { | ||
| outline: 2px solid colors.$color-ocean-green; | ||
| outline-offset: 2px; | ||
| } |
There was a problem hiding this comment.
Mixin enerzijds. Anderzijds lijkt deze ook absoluut in je voorbeeld niet door te komen 🙈
| display: flex; | ||
| align-items: flex-start; | ||
| gap: 0.8rem; | ||
| height: 9.6rem; |
There was a problem hiding this comment.
Is een vaste hoogte hier echt aan te raden? want dan heb je alsnog soms redelijk witruimte als de titel bv maar op 1 lijn komt. Kunnen we het niet doen zoals bij de carousel dat de afbeelding dan iets lager komt zodat het zinvol is?
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; |
There was a problem hiding this comment.
Dit gaan we best ook in een mixin steken
| const MAX_ROWS_FOR_COLUMNS: Record<number, number> = { | ||
| 4: 4, // desktop | ||
| 3: 3, // tablet | ||
| 2: 2, // mobile | ||
| }; |
There was a problem hiding this comment.
Klopt dit wel? Ik vind dit niet terug in de FA of het design
| {tText( | ||
| 'modules/content-page/components/blocks/block-objects-grid/block-objects-grid___toon-alle', | ||
| undefined, | ||
| [HET_ARCHIEF] | ||
| )} |
There was a problem hiding this comment.
Waarom is dit geen button? Nu wijkt dit enorm af van het design als rechthoek ipv de standaard knop 🤔
2 participants
jira ticket:
https://meemoo.atlassian.net/browse/ARC-3792
example page:
http://localhost:3200/admin/content-paginas/af27aac8-40e9-4503-bf91-34892f49fc12
Adds the new
ObjectsGridcontent block, allowing users to display a dynamic grid of media objects:clientSearchUrlToApiSearchUrlconfiguration service.This pull request also initiates the migration of content blocks to a new, more robust repetition mechanism (from A to B):
BlockButtonscomponent is refactored to use afieldGroupfor its repeatable elements, improving the content editor's configuration flexibility.elementsformat on load, ensuring backward compatibility.