PonyMirrors/poll.horse
1
0
Fork 0
mirror of https://github.com/Wolvan/poll.horse.git synced 2024-11-21 20:47:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add QR Code to poll pages

Browse source 
This way, people can easily just use their QR readers to reach the
voting page. The QR is constructed via Google Charts API and the URL is
based on the HOST header of the request.
This commit is contained in:
Wolvan 2022-01-29 23:48:00 +01:00
parent 19606025e2
commit 26a42333fe
5 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/html/poll.html
View file

@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/vote.css">
<script type="text/javascript" src="/static/vendor/js/textfit.js" defer="true"></script>
<script type="text/javascript">
const textFitOptions = {
@ -48,6 +49,7 @@
<a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
</section>
</form>
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
</section>
</main>
<footer>

1
frontend/html/result.html
View file

@ -37,6 +37,7 @@
<a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
</section>
<aside id="chart"></aside>
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
</section>
</main>
<footer>

11
frontend/static/css/result.css
View file

@ -67,8 +67,19 @@ aside#chart {
visibility: hidden;
}
aside#qrcode {
position: absolute;
top: 210px;
right: -210px;
width: 200px;
height: 200px;
}
@media screen and (max-width: 750px) {
aside#chart {
visibility: hidden !important;
}
aside#qrcode {
visibility: hidden !important;
}
}

7
frontend/static/css/vote.css Normal file
View file

@ -0,0 +1,7 @@
aside#qrcode {
position: absolute;
top: 0px;
right: -210px;
width: 200px;
height: 200px;
}

4
src/frontend.ts
View file

@ -143,7 +143,8 @@ export default function init(router: Router): void {
"POLL_OPTION_DIVS": pollOptionsDivs,
"POLL_VOTES_TOTAL": totalVotes,
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
"POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64")
"POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64"),
"QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
});
} catch (error) {
console.log(error);
@ -180,6 +181,7 @@ export default function init(router: Router): void {
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
"FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
"FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
"QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
});
} catch (error) {
console.log(error);