search

MOVACT / voteswiper-web

VoteSwiper helps citizens to find a political party that matches their own views in a playful way.
https://www.voteswiper.org
Other
21 stars 2 forks source link

Result saving | UI improvements #37

Open SlowMoschen opened 3 months ago

SlowMoschen commented 3 months ago

Hello,

here is my PR with all issues worked out.

UI Changes

Mobile navbar animation speed: I have reduced the speed of the animations a bit. Have a look at the preview and tell me if you like it.

#35 I fixed the overflow bug and made some UI changes to the explainer card/modal.

I repositioned the back button below the text, indicating to the user that the text has ended and implemented a close button in the top right corner, should the user have miss clicked for easy exiting the modal.

See the Video for these changes:

https://github.com/MOVACT/voteswiper-web/assets/122015710/6833c95d-8dd8-43d2-8cb3-c88c009b9ca6

Result / State saving

29

A state for each election will now be stored in the session storage. The state will be updated after every answered question, ending or finishing the election.

Users will be asked if they like to continue the state or start over. If the election was already completely finished, we redirect the user directly to the result page.

Currently, I am using the browser confirm API to get the user's confirmation, but maybe we could implement our own modal for a better user experience.

vercel[bot] commented 3 months ago

@SlowMoschen is attempting to deploy a commit to the MOVACT Team on Vercel.

A member of the Team first needs to authorize it.

mxmtsk commented 3 months ago

@SlowMoschen Thank you! I think the browser confirm is, as you say, not ideal. I think a good alternative good just already entering the full screen VoteSwiper experience and then this message in the center of the screen, instead of showing the swipeable cards, because the user will end up in this experience anyway, no matter what option he chooses. That way we don't need to introduce any other dependencies (eg. for a proper confirm dialog) and also have a good user experience. Would you be able to make this change or should I take over?

SlowMoschen commented 3 months ago

Good Morning!

Yeah exactly, I am currently gathering information about how we could implement such a feature.

I stumbled upon this Blog post, and I quite like it. https://medium.com/@kch062522/useconfirm-a-custom-react-hook-to-prompt-confirmation-before-action-f4cb746ebd4e

We can create our own modal without any dependencies and use it anywhere we need it. I will have a look at the implementation tonight as soon as I am at home.

Edit: The implementation should be quite simple. The toughest part will be creating an appealing Dialog modal 😁

  1. create the hook
  2. use the hook in the component where its needed
  3. await the result (for ex. while starting the swiper or exiting it)
mxmtsk commented 3 months ago

@SlowMoschen The issue with these very simple solutions is often, that they are not very accessible, which is why I suggested the alternative of just having it in the swiper screen directly. Creating a accessible custom dialog is much more effort (or we resort to something like this which uses Tailwind already so the overhead is relatively small)

SlowMoschen commented 3 months ago

@mxmtsk Okay, if we want to implement the feature directly in the swiper, we need to move some of the logic into the swiper directly. To be able to set the saved state data or fetch it from the server.

I never worked with shadcn, can we just install the dependencies for the alert dialog? If so, this might be the solution. So we can use it where ever we need to on the app.

SlowMoschen commented 3 months ago

@mxmtsk Which method do you want me to implement, you are the lead 😁. Just tell me and I try to work on a solution.

SlowMoschen commented 3 months ago

Okay, so I have seen that we already got headleass ui installed. This means we actually don't need any other dependencies for a dialog.

The only issue is, I've already played around a bit and could not implement it. My tested dialog is in the DOM, because the onClose log is getting logged, but I don't see any content.

We are currently using the v1.2 of the library, so maybe we could bump up to the newest version of 2.0. This will take a little effort, refactoring some of the Menu and Disclosure components we are currently using in some places of the app. Or maybe you can try it out to implement on your machine.

So to close and merge this PR I will work on a solution directly in the swiper. And after this we can discuss further.

mxmtsk commented 3 months ago

@SlowMoschen totally forgot about headless ui! we have already some completely new features on the way that include some code maintenance such as upgrading packages, so let's keep it simple for now and do it in the swiper, as you suggested! thanks

SlowMoschen commented 3 months ago

Hi there, as promised here, my implementation of the resuming feature.

Briefly summarized what I changed:

Swiper Component

here is an image of the dialog image

Election Context

Translations