movact / voteswiper-web Goto Github PK
View Code? Open in Web Editor NEWVoteSwiper helps citizens to find a political party that matches their own views in a playful way.
Home Page: https://www.voteswiper.org
License: Other
VoteSwiper helps citizens to find a political party that matches their own views in a playful way.
Home Page: https://www.voteswiper.org
License: Other
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.
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 #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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.