movact / voteswiper-web Goto Github PK

Hey
I just finished the wahlswiper, tabt out of the webpage on the smartphone and the result is gone, would be really cool if this gets saved in the cookies.

When clicking to show more details on a card, the opened text pane is not scrollable and the text is cut off when the text is too long (see screenshot). Tested on iOS - Safari

GERMAN:
Auf der Seite "Dein Ergebnis" (https://www.voteswiper.org/de/deutschland/europawahl-2024) steht rechts unten "Weitere Zahlungsmöglichkeiten findest du auf unserer Spendenseite". Der Link öffnet sich aber auf derselben Seite, wodurch das Wahlswiper-Ergebnis verloren geht, und auch durch "Seite zurück" nicht wiederhergestellt werden kann! Bitte den Link in "open in new window" umkonfigurieren (ähnlich wie für den Paypal Link darüber).

ENGLISH:
On the results page (https://www.voteswiper.org/de/deutschland/europawahl-2024), there's on the lower right a text/link like "Additional payment/donation methods are on the donations page". But that links opens on the same page, which will destroy all Wahlswiper-results. Also a "browser page back" action will not get back the results. => Please change the link config to "open in new window" (similar as the Paypal link directly above).

Hey there, I looked through the current open issues and wanted to help. If you like I can work on the following Issues.

• Issue #31 - Adding a QR Code for bank transfer donations
• Issue #25 - "NAN%" Bug
• Issue #30 - Open donate page in new tab

Issue #25 and #30 can be fixed by editing only one file
(./components/swiper/screen-result/index.tsx)

Feature #31

A QR code for an easier bank transfer can be quickly made with the following tool:
https://www.qrcode-generator.de/solutions/epc-qr-code/

I would put the QR code right under bank credentials you already have. This means the user can decide for themselves which option they want to make a donation

Fix for #25

The current implementation for the result percentage looks like this:

<span>
{Intl.NumberFormat(locale).format(
parseFloat(score.percentage.toFixed(1))
)}
%
</span>

But if a user skips all questions, the score.percentage is NULL.

So my suggestion to fix this problem would be to check if the value is a number by calling the isNaN() with a bang operator in front.

<span>
{
!isNaN(score.percentage) && Intl.NumberFormat(locale).format(
parseFloat(score.percentage.toFixed(1))
)
}
%
</span>

Fix for #30

As the Issues suggests when clicking on the "Spendenseite" anchor tag the page links directly to the corresponding page. This discards the result.

This can easily be fixed with adding the target attribute with _blank on the anchor tag

The Issues I will address in here:

• Issue #35 - Explainer text cut-off
• Issue #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.

Would be nice if you encode the bank details also within a QR code, which can be recognized by many phone apps and therefore could simplify the transaction (e.g. N26 supports this):

https://www.voteswiper.org/page/verein/spenden

VoteSwiper
Comdirect
IBAN: DE96 2004 1144 0806 4677 00
BIC: COBADEHD044

It would be helpful if it is allowed to fork, modify or distribute this project. Even if it's not allowed, it would be helpful to have a LICENCE file that says so.

Steps to reproduce:

1. Open Voteswiper
2. Select Germany > State election Mecklenburg-Vorpommern 2021
3. Skip all 37 questions
4. Select all parties for comparison