From 64ba9b8d9602cdfd318605a527880cc828f93ced Mon Sep 17 00:00:00 2001 From: Niko Lindroos Date: Fri, 24 Oct 2025 15:52:06 +0300 Subject: [PATCH 1/3] feat: switch event details content order when using small screen LIIKUNTA-759. Take advantage of grid styles to reorder content when a small screen breakpoint is window size reached. When using bigger than mobile sized screen, the content order would be: 1. event description 2. share buttons, 3. map, 4. sidebar 5. other events, footer, etc... When using mobile sized screen, switch the sidebar with secondary data (location / map, share buttons...) in main content, so in mobile the order would be: 1. event description 2. sidebar 3. share buttons, 4. map, 5. other events, footer, etc... This commit also contains a small trivial style change: Use aside element for event details sidebar --- .../event/eventContent/EventContent.tsx | 10 ++-- .../eventContent/eventContent.module.scss | 54 ++++++++++++++++--- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/packages/components/src/components/domain/event/eventContent/EventContent.tsx b/packages/components/src/components/domain/event/eventContent/EventContent.tsx index b08819883..a8d43b147 100644 --- a/packages/components/src/components/domain/event/eventContent/EventContent.tsx +++ b/packages/components/src/components/domain/event/eventContent/EventContent.tsx @@ -50,7 +50,7 @@ const EventContent: React.FC = ({ )} >
-
+
{description && ( <>

@@ -84,11 +84,13 @@ const EventContent: React.FC = ({ )} )} - - {!isInternetEvent && }

-
+ +
+ + {!isInternetEvent && }
diff --git a/packages/components/src/components/domain/event/eventContent/eventContent.module.scss b/packages/components/src/components/domain/event/eventContent/eventContent.module.scss index 5090fd77d..082789059 100644 --- a/packages/components/src/components/domain/event/eventContent/eventContent.module.scss +++ b/packages/components/src/components/domain/event/eventContent/eventContent.module.scss @@ -3,19 +3,12 @@ .eventContent { --description-font-size: var(--fontsize-body-l); background-color: var(--color-white); - // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used .contentWrapper { display: grid; grid-template-columns: unset; position: relative; - @include breakpoints.respond-above(m) { - display: grid; - grid-template-columns: auto 2fr 1fr; - grid-template-rows: unset; - } - &.noSimilarEvents { margin-bottom: 120px; } @@ -23,11 +16,56 @@ .leftEmpty { padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px) var(--spacing-m) 0; + } - @include breakpoints.respond-below(m) { + /* + When using bigger than mobile sized screen, the content order would be: + 1. event description + 2. share buttons, + 3. map, + 4. sidebar + 5. other events, footer, etc... + */ + @include breakpoints.respond-below(m) { + .leftEmpty { position: absolute; padding: 0; } + .sidebar { + padding-top: var(--spacing-xl); + } + } + /* + When using mobile sized screen, switch the sidebar with + secondary data (location / map, share buttons...) in main content, + so in mobile the order would be: + 1. event description + 2. sidebar + 3. share buttons, + 4. map, + 5. other events, footer, etc... + */ + @include breakpoints.respond-above(m) { + grid-template-columns: auto 2fr 1fr; + grid-template-rows: auto 1fr; + + .mainContent  { + grid-column: 2; + } + + .sidebar { + grid-column: 3; + grid-row: 1 / span 2; + } + + .secondaryContent { + grid-column: 2; + } + + .leftEmpty { + grid-column: 1; + grid-row: 1 / span 2; + } } } } From 7703d9cf42467c633a0d0d61b160192213bddc7f Mon Sep 17 00:00:00 2001 From: Niko Lindroos Date: Fri, 24 Oct 2025 16:22:25 +0300 Subject: [PATCH 2/3] feat: switch venue details content order when using small screen LIIKUNTA-759. Take advantage of grid styles to reorder content when a small screen breakpoint is window size reached. When using bigger than mobile sized screen, the content order would be: 1. venue description 2. share buttons, 3. map, 4. sidebar 5. venue events, footer, etc... When using mobile sized screen, switch the sidebar with secondary data (location / map, share buttons...) in main content, so in mobile the order would be: 1. venue description 2. sidebar 3. share buttons, 4. map, 5. venue events, footer, etc... --- .../venue/venueContent/VenueContent.tsx | 10 ++-- .../venueContent/venueContent.module.scss | 60 +++++++++++++++---- 2 files changed, 55 insertions(+), 15 deletions(-) diff --git a/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx b/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx index b32db4e6e..5551c4f90 100644 --- a/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx +++ b/apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx @@ -28,7 +28,7 @@ const VenueContent: React.FC = ({ venue, className }) => { const { description } = venue; const shortDescription = null; return ( - +
@@ -54,12 +54,14 @@ const VenueContent: React.FC = ({ venue, className }) => {
)} - -
-
diff --git a/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss b/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss index 1fca69de8..193d4ab74 100644 --- a/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss +++ b/apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss @@ -1,29 +1,67 @@ @use '../../../styles/breakpoints' as breakpoints; -.eventContent { +.venueContent { --description-font-size: var(--fontsize-body-l); background-color: var(--color-white); - // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used .contentWrapper { display: grid; grid-template-columns: unset; position: relative; - @include breakpoints.respond-above(m) { - display: grid; - grid-template-columns: auto 2fr 1fr; - grid-template-rows: unset; - } - .leftEmpty { padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px) var(--spacing-m) 0; + } - @include breakpoints.respond-below(m) { + /* + When using bigger than mobile sized screen, the content order would be: + 1. venue description + 2. share buttons, + 3. map, + 4. sidebar + 5. venue events, footer, etc... + */ + @include breakpoints.respond-below(m) { + .leftEmpty { position: absolute; padding: 0; } + .sidebar { + padding-top: var(--spacing-xl); + } + } + /* + When using mobile sized screen, switch the sidebar with + secondary data (location / map, share buttons...) in main content, + so in mobile the order would be: + 1. venue description + 2. sidebar + 3. share buttons, + 4. map, + 5. venue events, footer, etc... + */ + @include breakpoints.respond-above(m) { + grid-template-columns: auto 2fr 1fr; + grid-template-rows: auto 1fr; + + .mainContent  { + grid-column: 2; + } + + .sidebar { + grid-column: 3; + grid-row: 1 / span 2; + } + + .secondaryContent { + grid-column: 2; + } + + .leftEmpty { + grid-column: 1; + grid-row: 1 / span 2; + } } } } @@ -35,9 +73,9 @@ .description { line-height: 1.5; - white-space: pre-line; - font-size: var(--description-font-size); + p { + font-size: var(--description-font-size); margin: 1rem 0; } From 5afbeaf740bb41dbc21cb0cf283ab9eb8af38298 Mon Sep 17 00:00:00 2001 From: Niko Lindroos Date: Mon, 27 Oct 2025 14:06:47 +0200 Subject: [PATCH 3/3] feat: switch page content order when using small screen Upgrade HCRC-lib to get new grid style changes on article and dynamic CMS pages. Also fix event details remainingAttendeeCapacity field. LIIKUNTA-759. Take advantage of grid styles to reorder content when a small screen breakpoint is window size reached. When using bigger than mobile sized screen, the content order would be: 1. page main (text) content 2. share buttons, 3. sidebar 4. modules, footer, etc... When using mobile sized screen, switch the sidebar with secondary data (share buttons...) in main content, so in mobile the order would be: 1. page main (text) content 2. sidebar 3. share buttons, 5. modules, footer, etc... --- apps/events-helsinki/package.json | 2 +- apps/hobbies-helsinki/package.json | 2 +- apps/sports-helsinki/package.json | 2 +- packages/components/package.json | 2 +- yarn.lock | 16 ++++++++-------- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json index 5c80e7087..259eb569b 100644 --- a/apps/events-helsinki/package.json +++ b/apps/events-helsinki/package.json @@ -79,7 +79,7 @@ "react-datepicker": "^8.4.0", "react-dom": "18.3.1", "react-error-boundary": "4.0.10", - "react-helsinki-headless-cms": "1.1.5", + "react-helsinki-headless-cms": "1.2.0", "react-i18next": "15.6.0", "react-scroll": "^1.9.3", "react-toastify": "^11.0.5", diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json index b08e2166a..b2844684b 100644 --- a/apps/hobbies-helsinki/package.json +++ b/apps/hobbies-helsinki/package.json @@ -79,7 +79,7 @@ "react-datepicker": "^8.4.0", "react-dom": "18.3.1", "react-error-boundary": "4.0.10", - "react-helsinki-headless-cms": "1.1.5", + "react-helsinki-headless-cms": "1.2.0", "react-i18next": "15.6.0", "react-scroll": "^1.9.3", "react-toastify": "^11.0.5", diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json index 8420708b3..06674c904 100644 --- a/apps/sports-helsinki/package.json +++ b/apps/sports-helsinki/package.json @@ -85,7 +85,7 @@ "react-datepicker": "^8.4.0", "react-dom": "18.3.1", "react-error-boundary": "4.0.10", - "react-helsinki-headless-cms": "1.1.5", + "react-helsinki-headless-cms": "1.2.0", "react-i18next": "15.6.0", "react-leaflet": "4.2.1", "react-scroll": "^1.9.3", diff --git a/packages/components/package.json b/packages/components/package.json index 7a67d02d5..66752ebf3 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -79,7 +79,7 @@ "react-datepicker": "^8.4.0", "react-dom": "18.3.1", "react-error-boundary": "4.0.10", - "react-helsinki-headless-cms": "1.1.5", + "react-helsinki-headless-cms": "1.2.0", "react-i18next": "15.6.0", "react-leaflet": "4.2.1", "react-toastify": "^11.0.5", diff --git a/yarn.lock b/yarn.lock index 702521cde..0c9a10b02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3171,7 +3171,7 @@ __metadata: react-datepicker: "npm:^8.4.0" react-dom: "npm:18.3.1" react-error-boundary: "npm:4.0.10" - react-helsinki-headless-cms: "npm:1.1.5" + react-helsinki-headless-cms: "npm:1.2.0" react-i18next: "npm:15.6.0" react-leaflet: "npm:4.2.1" react-toastify: "npm:^11.0.5" @@ -13434,7 +13434,7 @@ __metadata: react-datepicker: "npm:^8.4.0" react-dom: "npm:18.3.1" react-error-boundary: "npm:4.0.10" - react-helsinki-headless-cms: "npm:1.1.5" + react-helsinki-headless-cms: "npm:1.2.0" react-i18next: "npm:15.6.0" react-scroll: "npm:^1.9.3" react-toastify: "npm:^11.0.5" @@ -15176,7 +15176,7 @@ __metadata: react-datepicker: "npm:^8.4.0" react-dom: "npm:18.3.1" react-error-boundary: "npm:4.0.10" - react-helsinki-headless-cms: "npm:1.1.5" + react-helsinki-headless-cms: "npm:1.2.0" react-i18next: "npm:15.6.0" react-scroll: "npm:^1.9.3" react-toastify: "npm:^11.0.5" @@ -21367,9 +21367,9 @@ __metadata: languageName: node linkType: hard -"react-helsinki-headless-cms@npm:1.1.5": - version: 1.1.5 - resolution: "react-helsinki-headless-cms@npm:1.1.5" +"react-helsinki-headless-cms@npm:1.2.0": + version: 1.2.0 + resolution: "react-helsinki-headless-cms@npm:1.2.0" dependencies: classnames: "npm:^2.5.1" hds-design-tokens: "npm:^3.11.0" @@ -21387,7 +21387,7 @@ __metadata: peerDependenciesMeta: "@apollo/client": optional: true - checksum: 70d44bab0690f888df83f7b090ad9d34880056390cf62a292e182bb568b568b5d91815eb74aa2e3dd6f14096fdbcc07b2e4861ec8ae8da51301023359993f7f5 + checksum: 74218b20fd08be6a435600798fa1adb63785eadca28d7e68e483ddbea00b31678700b1481afaa574066393c1d3a29c923d84e25bfe14e0d9e3e29e7ce48f5d41 languageName: node linkType: hard @@ -23512,7 +23512,7 @@ __metadata: react-datepicker: "npm:^8.4.0" react-dom: "npm:18.3.1" react-error-boundary: "npm:4.0.10" - react-helsinki-headless-cms: "npm:1.1.5" + react-helsinki-headless-cms: "npm:1.2.0" react-i18next: "npm:15.6.0" react-leaflet: "npm:4.2.1" react-scroll: "npm:^1.9.3"