[UI/UX] Storymap View UI Changes

[balagurova]

Description

References Some visual articles with maps from the New York Times which I would like to use as references for GeoHub Storymaps:

• https://www.nytimes.com/interactive/2023/06/22/business/india-russia-oil.html?unlocked_article_code=1.H00.lIIB.RVnGwt5UR_d-
• https://www.nytimes.com/interactive/2023/07/16/world/world-demographics.html?unlocked_article_code=1.H00.vsnm.UFburme5RnBn
• https://www.nytimes.com/interactive/2023/07/21/nyregion/nyc-developers-private-owned-public-spaces.html?unlocked_article_code=1.H00.PyYr.ZxwiwYN31054

UI Suggestions for Cards

• On the first screen, only the header card should be visible. Then, on scroll one card occupies one screen.

  

• A card max-width: 520px;

• Card paddings: 24px;

• Card background: white with 0.9 transparency

• Card border: solid .25px var(--gray-400);

• Card description should be similar to a paragraph style from the design system

• Card title should be similar to H6 from the design system

UI Suggestions for Header

Screenshots

No response

Mockup URL/file

https://www.figma.com/design/xPemdxTmvPi2homUZ2dyw0/UNDP-GeoHub-UI?node-id=3318-6229

[balagurova]

Regarding the header and footer elements, there's an important consideration: we discussed that in the future, we might want to embed the storymap on other platforms (such as DFx or a country office website). When embedding the storymap elsewhere, it should not include its own headers and footers, as the hosting page will have its own.

So, I propose:

• When viewed on GeoHub (e.g., by clicking the 'Open' button on the storymap meta page), the storymap should be displayed between the existing header and footer sections of GeoHub.
• The storymap itself should be designed without any headers or footers.

Let me know what you think about it.

[JinIgarashi]

I added a query param of embed in the storymap viewer page like /storymaps/{id}/viewer?embed=true

as default, it shows footer, but it will hide footer if embed =true is in URL.