Result saving | UI improvements #37
Conversation
* removed overflow attribute for main container * added height and overflow attributes for card itself * repositioned back button to bottom of card * implemented a close button in top right corner
* implemented an interface for a savedState * implemented a function which stores the states in storage * states will be saved on every new question, when finishing an election * when starting an election, the storage will be checked if an existing state is available * the starting function now takes an callback function to get user confirmation in thier corresponding language
|
@SlowMoschen is attempting to deploy a commit to the MOVACT Team on Vercel. A member of the Team first needs to authorize it. |
|
@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? |
|
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. 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:
|
|
@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) |
|
@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. |
|
@mxmtsk Which method do you want me to implement, you are the lead 😁. Just tell me and I try to work on a solution. |
|
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 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 So to close and merge this PR I will work on a solution directly in the swiper. And after this we can discuss further. |
|
@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 |
* refactored startSwiper to take a savedState optionally and start the swiper accordingly * implemented new method to get saved SwiperState
* splitted the Swiper components into two child components - Dialog and SwiperDeck * When rendering the Swiper, we check for a saved State and ask the user if he would like to continue or start over
|
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 Election Context
Translations
|
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:
Europawahl.2024.-.WahlSwiper.-.Google.Chrome.2024-06-10.11-41-04.mp4
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.