Result saving and UI improvement

[SlowMoschen]

The Issues I will address in here:

• Issue Card details not scrollable and cut off. #35 - Explainer text cut-off
• Issue Save the result in the cookies #29 - Saving result
• No Issue opened - Mobile navbar animation speed

---

fix for #35

To fix this bug, I would put the scroll behaviour into the container which holds the content and not for the whole modal which contains the explainer card.

This means the explainer card will get an overflow-auto with a h-full and max-h, so the scroll behaviour will be in the card itself and not for the whole page.

---

Mobile navbar

This may be just personal preference, but I find that the animation of opening and closing the mobile navbar is a bit too slow and feels bit clunky.

---

feature suggestions for #29

Query params Method:

@mxmtsk suggestion would be to save the results in the query params of the url. Which would be cool, but we need a way to make the params persistent while we redirect the user to other pages.

So this means either we refactor the button and link components to set the params simultaneous with the redirect or save the params in the session/local storage and set it if params were stored.

Other than that, we need to make sure to strip the params from the url for the page view tracking via Matomo.

Context Method:

I played a bit with a solution that used another react context. This only stores the data in memory, so if the user refreshes the whole page, every result would be gone again.

But with this solution, we would be saved from the hassle with refactoring components and stripping the params for view tracking.

SessionStorage Method:

Save the results in the SessionStorage, which will hold the results until the user closes the tab.

UI Suggestion for this feature:
I would but another box on the landing page if an election was already made.

Something like this(not final)

Data privacy:

I know we want to keep the data as safe as possible, so one of my solutions for that would be to create an endpoint to encode and decode results with a chosen algorithm and only save the encoded string in the storage.

[mxmtsk]

@SlowMoschen I think session storage might be the best actually. Using just a context might lead to failure once the website performs a hard refresh for whatever reason, leading to bad user experience.

With session storage I'm also not sure if we need the "Last Results" overview - maybe it's less confusing that, if you start a swiper it will simply ask you "You already started this election. Do you want to continue or start again?" What do you think?

[SlowMoschen]

Okay yeah, that's sounds like a plan. I'll look at it today.

[mxmtsk]

@SlowMoschen Thank you! That's also one of the most requested features in our App (where we could actually store results on device), so if you wanna look at this too, it would be much appreciated, don't worry if not though, I'll eventually work on it there.

[SlowMoschen]

PR is made for the Web app ✅

Yeah, I will have a look at this in the App. I never worked with React Native or Expo before, but that's not a hindrance.
I wanted to have a look at the app nonetheless, to implement the feature if a user skips all questions.

[SlowMoschen]

@SlowMoschen Thank you! That's also one of the most requested features in our App (where we could actually store results on device), so if you wanna look at this too, it would be much appreciated, don't worry if not though, I'll eventually work on it there.

I think I need permission in your expo project to build a dev sim. When I try to run the command, I'll get an error: You don't have the required permissions to perform this operation.