mirror of
https://github.com/Wolvan/poll.horse.git
synced 2024-11-22 04:58:00 +01:00
Add QR Code to poll pages
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:
parent
19606025e2
commit
26a42333fe
5 changed files with 24 additions and 1 deletions
|
@ -8,6 +8,7 @@
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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/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" src="/static/vendor/js/textfit.js" defer="true"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
const textFitOptions = {
|
const textFitOptions = {
|
||||||
|
@ -48,6 +49,7 @@
|
||||||
<a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
|
<a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
|
||||||
</section>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
|
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
@ -37,6 +37,7 @@
|
||||||
<a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
|
<a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
|
||||||
</section>
|
</section>
|
||||||
<aside id="chart"></aside>
|
<aside id="chart"></aside>
|
||||||
|
<aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
@ -67,8 +67,19 @@ aside#chart {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
aside#qrcode {
|
||||||
|
position: absolute;
|
||||||
|
top: 210px;
|
||||||
|
right: -210px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 750px) {
|
@media screen and (max-width: 750px) {
|
||||||
aside#chart {
|
aside#chart {
|
||||||
visibility: hidden !important;
|
visibility: hidden !important;
|
||||||
}
|
}
|
||||||
|
aside#qrcode {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
7
frontend/static/css/vote.css
Normal file
7
frontend/static/css/vote.css
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
aside#qrcode {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: -210px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
|
@ -143,7 +143,8 @@ export default function init(router: Router): void {
|
||||||
"POLL_OPTION_DIVS": pollOptionsDivs,
|
"POLL_OPTION_DIVS": pollOptionsDivs,
|
||||||
"POLL_VOTES_TOTAL": totalVotes,
|
"POLL_VOTES_TOTAL": totalVotes,
|
||||||
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
|
"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) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
@ -180,6 +181,7 @@ export default function init(router: Router): void {
|
||||||
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
|
"BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
|
||||||
"FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
|
"FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
|
||||||
"FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
|
"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) {
|
} catch (error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|
Loading…
Reference in a new issue