diff --git a/.github/workflows/compile_and_build.yml b/.github/workflows/compile_and_build.yml index 205e44b67..10682e52d 100644 --- a/.github/workflows/compile_and_build.yml +++ b/.github/workflows/compile_and_build.yml @@ -9,7 +9,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: 21 + node-version: 22 - name: Install dependencies run: npm install diff --git a/package-lock.json b/package-lock.json index d78b16d61..16dc1cd51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5111,13 +5111,13 @@ } }, "node_modules/axios": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.3.tgz", - "integrity": "sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.0.tgz", + "integrity": "sha512-oXTDccv8PcfjZmPGlWsPSwtOJCZ/b6W5jAMCNcfwJbCzDckwG0jrYJFaWH1yvivfCXjVzV/SPDEhMB3Q+DSurg==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", - "form-data": "^4.0.0", + "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, diff --git a/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss b/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss index eb9cecc49..5d2d4910e 100644 --- a/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss +++ b/react/assets/forus-platform/scss/_common/blocks/block-export-options.scss @@ -1,4 +1,4 @@ -&.block-export-options { +.block.block-export-options { .export-section { margin-bottom: 25px; display: flex; diff --git a/react/assets/forus-platform/scss/_common/components/modals.scss b/react/assets/forus-platform/scss/_common/components/modals.scss index 2a36c7af8..142b0a74c 100644 --- a/react/assets/forus-platform/scss/_common/components/modals.scss +++ b/react/assets/forus-platform/scss/_common/components/modals.scss @@ -67,11 +67,15 @@ .modal-header { background: #fff; - padding: 20px 25px; + padding: 15px 25px; font: 600 16px/25px var(--base-font); border-bottom: 1px solid #d4d9dd; position: relative; border-radius: 3px 3px 0 0; + + &.modal-header-compact { + padding: 10px 25px; + } } .modal-body { @@ -173,6 +177,10 @@ } } + &.modal-section-compact { + padding: 10px 20px; + } + &.modal-section-collapse { padding: 0; } diff --git a/react/assets/forus-platform/scss/_common/components/tables.scss b/react/assets/forus-platform/scss/_common/components/tables.scss index 700e0e25a..bdcd56b85 100644 --- a/react/assets/forus-platform/scss/_common/components/tables.scss +++ b/react/assets/forus-platform/scss/_common/components/tables.scss @@ -587,6 +587,13 @@ } } + &.tr-collapsed { + td { + padding-top: 0px; + padding-bottom: 0px; + } + } + &.light { background: #fff; } diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss index ec8fea1e8..aa62ac8dd 100644 --- a/react/assets/forus-platform/scss/_common/dashboard.scss +++ b/react/assets/forus-platform/scss/_common/dashboard.scss @@ -54,7 +54,6 @@ @import 'blocks/block-system-notification-editor.scss'; @import 'blocks/block-mail_preview.scss'; @import 'blocks/block-photo-selector-notifications.scss'; - @import 'blocks/block-export-options.scss'; @import 'blocks/block-feedback-result.scss'; @import 'blocks/block-permissions-list.scss'; @import 'blocks/block-announcements.scss'; @@ -99,6 +98,7 @@ @import 'blocks/block-label-tabs.scss'; @import 'blocks/block-translation-stats.scss'; @import 'blocks/block-provider-product-overview.scss'; +@import 'blocks/block-export-options.scss'; @import 'blocks/block-attachments-list.scss'; @import 'blocks/block-request-clarification.scss'; diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss b/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss index b5f438871..2a5e83860 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss @@ -2,9 +2,11 @@ width: 100%; padding: 32px; background: #fff; - box-shadow: var(--box-shadow); margin-bottom: 40px; - border-radius: var(--border-radius); + background: var(--showcase-item-background); + border-radius: var(--showcase-item-border-radius); + box-shadow: var(--showcase-item-shadow); + border: var(--showcase-item-border); .block-accessibility-header { font: 400 18px/27px var(--base-font); @@ -39,9 +41,13 @@ } } + &:first-child { + padding-top: 0; + } + &:last-child { border-bottom: none; padding-bottom: 0; } } -} \ No newline at end of file +} diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss index e3e719d6e..7bc9760f6 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss @@ -9,6 +9,7 @@ display: flex; padding: 0 0 40px; border-bottom: 1px solid var(--border-color); + transition: box-shadow 0.4s; .fund-media { width: 52%; @@ -28,8 +29,7 @@ display: flex; flex-direction: column; align-self: center; - cursor: default; - + .fund-label { margin: 0 0 5px; line-height: 20px; @@ -81,6 +81,10 @@ } } + a.fund-item:hover { + box-shadow: var(--showcase-item-hover-shadow); + } + @media screen and (min-width: 1000px) { &.block-cms-funds-compact { --gap: 25px; diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss index b2959800c..1310e94db 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss @@ -3,7 +3,34 @@ flex-direction: column; max-width: 100%; align-items: center; - gap: 8px; + gap: 30px; + + .block-faq-group { + display: flex; + flex-direction: column; + gap: 8px; + } + + .block-faq-header { + max-width: 100%; + width: 1080px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + gap: 8px; + + .block-faq-title { + color: #222; + font: 700 22px/30px var(--base-font); + margin: 0 0; + } + + .block-faq-subtitle { + color: #353535; + font: 400 18px/24px var(--base-font); + margin: 0 0; + } + } .faq-item { background: #fff; @@ -89,6 +116,20 @@ } @media screen and (max-width: 1000px) { + gap: 20px; + + .block-faq-header { + margin-bottom: 5px; + + .block-faq-title { + font: 700 16px/24px var(--base-font); + } + + .block-faq-subtitle { + font: 400 12px/20px var(--base-font); + } + } + .faq-item { .faq-item-header { padding: 15px 14px 15px 15px; diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss index 3d04e4f3e..34a7dc749 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss @@ -239,5 +239,9 @@ font: 500 1.3em var(--heading-font-family); margin-bottom: 1em; } + + &.block-markdown-large { + padding-right: 0; + } } } diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss index bd0103e3c..d66a7d0e0 100644 --- a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss +++ b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss @@ -35,11 +35,10 @@ min-width: 0; flex-direction: column; background: #ffffff; - @include cf(); .product-photo { display: flex; - flex: 1 1 100%; + flex: 0 1 auto; border-bottom: 1px solid var(--border-color); img { @@ -63,20 +62,24 @@ flex: 0 1 auto; margin: 0 0; word-wrap: break-word; + color: var(--products-text-color); + } + + .product-subtitle, + .product-price { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: var(--products-text-color); } .product-title { - font: 700 17px/24px var(--base-font); + font: 700 16px/24px var(--base-font); color: var(--products-title-color); transition: 0.4s color; } .product-subtitle { - font: 400 14px/20px var(--base-font); + font: 400 13px/20px var(--base-font); } } diff --git a/react/assets/forus-webshop/scss/includes/layout/_header.scss b/react/assets/forus-webshop/scss/includes/layout/_header.scss index 5d5f38a53..63b3dd21d 100644 --- a/react/assets/forus-webshop/scss/includes/layout/_header.scss +++ b/react/assets/forus-webshop/scss/includes/layout/_header.scss @@ -2,7 +2,7 @@ .section-title { font: var(--heading-font); color: var(--heading-color); - margin: 0 0 20px; + margin: 0 0 30px; text-align: center; } diff --git a/react/assets/forus-webshop/scss/includes/sections/_section.scss b/react/assets/forus-webshop/scss/includes/sections/_section.scss index b8578276b..7b2d0bfd7 100644 --- a/react/assets/forus-webshop/scss/includes/sections/_section.scss +++ b/react/assets/forus-webshop/scss/includes/sections/_section.scss @@ -3,7 +3,7 @@ color: var(--heading-color); font: var(--section-title-font); text-align: var(--section-title-align); - margin: 0 0 20px; + margin: 0 0 30px; a { font: inherit !important; diff --git a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx index fd9203879..ac5970592 100644 --- a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx +++ b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx @@ -23,13 +23,13 @@ import { useOrganizationService } from '../../../services/OrganizationService'; import TableTopScroller from '../tables/TableTopScroller'; export default function BlockCardNotes({ - isAssigned, + showCreate, fetchNotes, deleteNote, storeNote, fetchNotesRef, }: { - isAssigned: boolean; + showCreate: boolean; fetchNotes: (value: FilterModel) => Promise>; deleteNote: (note: Note) => Promise>; storeNote: (values: FormValuesModel) => Promise>; @@ -131,7 +131,7 @@ export default function BlockCardNotes({ {translate('notes.header.title')}({notes.meta.total})
- {isAssigned && ( + {showCreate && (
{translate('notes.buttons.add_new')} @@ -146,7 +146,7 @@ export default function BlockCardNotes({ {configsElement} - +
{headElement} @@ -167,11 +167,14 @@ export default function BlockCardNotes({ {note.employee.identity_address === identity.address && ( ( + content={(e) => (
onDeleteNote(note)} + onClick={() => { + e?.close(); + onDeleteNote(note); + }} data-dusk="deleteNoteBtn"> Verwijderen diff --git a/react/src/dashboard/components/elements/card/Card.tsx b/react/src/dashboard/components/elements/card/Card.tsx index 5c510bdb9..52304d059 100644 --- a/react/src/dashboard/components/elements/card/Card.tsx +++ b/react/src/dashboard/components/elements/card/Card.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react'; import { Button, ButtonType } from '../button/Button'; +import classNames from 'classnames'; export default function Card({ title, @@ -9,6 +10,7 @@ export default function Card({ footer, footerHidden = false, dusk = null, + className = '', }: { title: string; section?: boolean; @@ -17,9 +19,10 @@ export default function Card({ footer?: ReactNode | ReactNode[]; footerHidden?: boolean; dusk?: string; + className?: string; }) { return ( -
+
{title}
diff --git a/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx b/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx index 3bba1b9a2..a5d1f9358 100644 --- a/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx +++ b/react/src/dashboard/components/elements/card/blocks/CardBlockKeyValue.tsx @@ -20,7 +20,7 @@ export default function CardBlockKeyValue({ {items?.map((item, index) => (
{item.label}
-
{item.value || }
+
{item.value ?? }
))}
diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx index aa916cccb..198140a4e 100644 --- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx +++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditor.tsx @@ -7,7 +7,15 @@ import { } from '@dnd-kit/sortable'; import { uniq, uniqueId } from 'lodash'; import { ResponseError, ResponseErrorData } from '../../../props/ApiResponses'; -import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'; +import { + closestCenter, + DndContext, + DragEndEvent, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, +} from '@dnd-kit/core'; import Faq from '../../../props/models/Faq'; import FaqEditorItem from './FaqEditorItem'; import { useFaqService } from '../../../services/FaqService'; @@ -42,21 +50,24 @@ export default function FaqEditor({ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); - const addQuestion = useCallback(() => { - const uid = uniqueId(); + const addQuestion = useCallback( + (type: 'question' | 'title') => { + const uid = uniqueId(); - setFaq([...faq, { uid, title: '', description: '' }]); - setUnCollapsedList((list) => [...list, uid]); - }, [faq, setFaq]); + setFaq([...faq, { uid, title: '', subtitle: '', description: '', type }]); + setUnCollapsedList((list) => [...list, uid]); + }, + [faq, setFaq], + ); const handleDragEnd = useCallback( - (event) => { + (event: DragEndEvent) => { const { active, over } = event; if (active.id !== over.id) { const items = faq.map((preCheck) => preCheck.uid); - const oldIndex = items.indexOf(active.id); - const newIndex = items.indexOf(over.id); + const oldIndex = items.indexOf(active.id.toString()); + const newIndex = items.indexOf(over.id.toString()); setFaq(arrayMove(faq, oldIndex, newIndex)); } @@ -65,7 +76,7 @@ export default function FaqEditor({ ); const askConfirmation = useCallback( - (onConfirm): void => { + (onConfirm: () => void): void => { openModal((modal) => (
-
+
addQuestion('question')}> {translate('components.faq_editor.buttons.add_question')}
+ +
addQuestion('title')}> + + {translate('components.faq_editor.buttons.add_title')} +
); diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx index 8c18662a5..9bd2cc899 100644 --- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx +++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx @@ -41,18 +41,32 @@ export default function FaqEditorItem({
-
- -
+ {faqItem.type === 'question' ? ( +
+ +
+ ) : ( +
+ +
+ )}
{!isCollapsed ? ( - {!faqItem.id ? 'Nieuwe vraag' : 'Vraag aanpassen'} + + {!faqItem.id + ? faqItem.type === 'question' + ? 'Nieuwe vraag' + : 'Nieuwe titel' + : faqItem.type === 'question' + ? 'Vraag aanpassen' + : 'Titel aanpassen'} + ) : ( - {faqItem.title || 'Geen vraag'} + {faqItem.title || (faqItem.type === 'question' ? 'Geen vraag' : 'Geen titel')} )}
@@ -96,17 +110,31 @@ export default function FaqEditorItem({
-
- - onChange({ description: description })} - extendedOptions={true} - placeholder={translate('organization_edit.labels.description')} - /> -
Max. 5000 tekens
- -
+ {faqItem.type === 'question' ? ( +
+ + onChange({ description: description })} + extendedOptions={true} + placeholder={translate('organization_edit.labels.description')} + /> +
Max. 5000 tekens
+ +
+ ) : ( +
+ +