Switch event and venue details content order when using small screen#885
Conversation
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
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...
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr885.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr885.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr885.dev.hel.ninja 🚀🚀🚀 |
|
TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr885.dev.hel.ninja 🚀🚀🚀 |
|
EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr885.dev.hel.ninja 🚀🚀🚀 |
|
VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr885.dev.hel.ninja 🚀🚀🚀 |
|
LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr885.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://tapahtumat-pr885.dev.hel.ninja 😆🎉🎉🎉 |
|
HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr885.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is success for https://liikunta-pr885.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://harrastukset-pr885.dev.hel.ninja 😆🎉🎉🎉 |
|
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...
|
|
|
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr885.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr885.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr885.dev.hel.ninja 🚀🚀🚀 |
|
EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr885.dev.hel.ninja 🚀🚀🚀 |
|
LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr885.dev.hel.ninja 🚀🚀🚀 |
|
HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr885.dev.hel.ninja 🚀🚀🚀 |
|
VENUE-GRAPHQL-PROXY branch is deployed to platta: https://venue-graphql-proxy-pr885.dev.hel.ninja 🚀🚀🚀 |
|
TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr885.dev.hel.ninja 🚀🚀🚀 |
|
TestCafe result is success for https://liikunta-pr885.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://tapahtumat-pr885.dev.hel.ninja 😆🎉🎉🎉 |
TestCafe result is success for https://harrastukset-pr885.dev.hel.ninja 😆🎉🎉🎉 |
3 participants
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:
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:
This commit also contains a small trivial style change: Use aside element for event details sidebar.
HCRC-lib pull request about same matter: City-of-Helsinki/react-helsinki-headless-cms#212