veto

Simple Sinatra voting website.
git clone git://git.knutsen.co/veto
Log | Files | Refs | README | LICENSE

commit 16782c6ef8e52f2a2ff789789ca2fe237cf6beaf
parent f5538a2fa24aad8b99d7f1870d4b09d4c9205be8
Author: Fredrik <moi@knutsen.co>
Date:   Sun, 18 Nov 2018 15:39:10 +0000

Merge pull request #22 from Demonstrandum/devel

Add footer to poll.erb
Diffstat:
Mpublic/styles.css | 16++++++++++++++++
Mserver.rb | 10++++++++++
Mviews/index.erb | 10++++++++++
Mviews/poll.erb | 242+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
4 files changed, 187 insertions(+), 91 deletions(-)

diff --git a/public/styles.css b/public/styles.css @@ -22,6 +22,21 @@ ul { margin: 10px 0; } +.github { + opacity: 0.6; + transition: all .15s ease; + margin: 0 1em; +} +.github:hover { + opacity: 1; +} +.github img { + cursor: pointer; + display: inline-block; + height: 1.2em; + vertical-align: middle; + vertical-align: -webkit-baseline-middle; +} #options { margin: 20px 0; } @@ -119,6 +134,7 @@ input[type=button], button { } input[type=text] { + background: transparent; font-size: 1em; padding: 0; border: none; diff --git a/server.rb b/server.rb @@ -35,6 +35,16 @@ end HEAD_TAGS = <<-HTML <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <!-- Global site tag (gtag.js) - Google Analytics --> + <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129403871-1"></script> + <script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', 'UA-129403871-1'); + </script> <!-- Search Engine --> <meta name="description" content="Create a real time straw poll with veto.vote. Easy to use, completely free with graphs and statistics already provided."> diff --git a/views/index.erb b/views/index.erb @@ -60,6 +60,16 @@ </form> </div> + <style> + .github { + position: fixed; + bottom: 20px; + right: 20px; + } + </style> + <a class="github" href="https://github.com/Demonstrandum/Veto"> + <img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg" alt="GitHub" /> + </a> <script src="/main.js"></script> <script src="/new.js"></script> diff --git a/views/poll.erb b/views/poll.erb @@ -146,107 +146,167 @@ </div> </div> <br /> + </div> - <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" charset="utf-8"></script> - <script type="text/javascript"> - Chart.defaults.global.elements.arc.borderColor = '#ddd'; - const ALPHA_RANGE = { - min: 0.08, - max: 1 - } + <style> + footer { + margin-top: 2em; + border-top: 1px solid #eee; + display: flex; + align-items: center; + height: 4em; + user-select: none; + } + footer .container { + padding-top: 0; + margin-top: 0; + } + footer .row { + display: flex; + align-items: center; + justify-content: unset; + } + footer .row .left { + margin-right: auto; + } + footer span { + font-weight: bold; + font-size: 2em; + vertical-align: middle; + margin-right: 1em; + } + .home { + padding: 10px 20px; + cursor: pointer; + color: #fff; + text-transform: uppercase; + font-size: 11px; + background: #000; + border-radius: 4px; + float: right + } + </style> + + <footer> + <div class="container"> + <div class="row"> + <div class="left"> + <span>V</span> Straw Polls + </div> + <div class="right"> + <a class="github" href="https://github.com/Demonstrandum/Veto"> + <img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg" alt="GitHub" /> + </a> + <div class="home"> + Make new poll + </div> + </div> + </div> + </div> + </footer> - const chart_colors = chart => { - const range = ALPHA_RANGE; - const N = chart.data.datasets[0].data.length; - backgrounds = Array(N); - for (let mono = range.min; mono <= range.max; mono += range.max / (N + 1)) - backgrounds[Math.round((mono - range.min) * N / range.max)] = `rgba(0,0,0,${mono})`; - chart.data.datasets[0].backgroundColor = backgrounds; - return backgrounds; - }; - - const chart_empty = chart => { - chart.data.labels = []; - chart.data.datasets[0].data = []; - }; - - const push_data = (chart, label, data) => { - chart.data.labels.push(label); - chart.data.datasets.forEach((dataset) => { - dataset.data.push(data); - }); + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" charset="utf-8"></script> + <script type="text/javascript"> + Chart.defaults.global.elements.arc.borderColor = '#ddd'; + const ALPHA_RANGE = { + min: 0.08, + max: 1 + } + + const chart_colors = chart => { + const range = ALPHA_RANGE; + const N = chart.data.datasets[0].data.length; + backgrounds = Array(N); + for (let mono = range.min; mono <= range.max; mono += range.max / (N + 1)) + backgrounds[Math.round((mono - range.min) * N / range.max)] = `rgba(0,0,0,${mono})`; + chart.data.datasets[0].backgroundColor = backgrounds; + return backgrounds; + }; + + const chart_empty = chart => { + chart.data.labels = []; + chart.data.datasets[0].data = []; + }; + + const push_data = (chart, label, data) => { + chart.data.labels.push(label); + chart.data.datasets.forEach((dataset) => { + dataset.data.push(data); + }); + } + + $(document).ready(() => { + $('.home').click(() => { + window.location.href = '/'; + }) + for (const canvas of ['#pie', '#bar']) { + const context = $(canvas)[0]; + const dimension = $(canvas).closest('div').innerWidth() - 22; + context.height = dimension; + context.width = dimension; } + }); + </script> + <script type="text/javascript"> + // CHARTS: + let pie; + let bar; // Make sure they're global. + $(document).ready(() => { + const pie_context = $('#pie'); - $(document).ready(() => { - for (const canvas of ['#pie', '#bar']) { - const context = $(canvas)[0]; - const dimension = $(canvas).closest('div').innerWidth() - 22; - context.height = dimension; - context.width = dimension; - } + pie = new Chart(pie_context[0], { + type: 'pie', + data: { + labels: [], + datasets: [{ + label: '№ of Votes', + data: [], + backgroundColor: [], + }] + }, + options: {} }); - </script> - <script type="text/javascript"> - // CHARTS: - let pie; - let bar; // Make sure they're global. - $(document).ready(() => { - const pie_context = $('#pie'); - - pie = new Chart(pie_context[0], { - type: 'pie', - data: { - labels: [], - datasets: [{ - label: '№ of Votes', - data: [], - backgroundColor: [], - }] + + const bar_context = $('#bar') + bar = new Chart(bar_context[0], { + type: 'horizontalBar', + data: { + labels: [], + datasets: [{ + label: '№ of Votes', + data: [], + backgroundColor: [], + }] + }, + options: { + title: { + display: true, + text: 'Distribution of alternative/other votes.' }, - options: {} - }); - - const bar_context = $('#bar') - bar = new Chart(bar_context[0], { - type: 'horizontalBar', - data: { - labels: [], - datasets: [{ - label: '№ of Votes', - data: [], - backgroundColor: [], + scales: { + yAxes: [{ + categoryPercentage: 0.9, + barPercentage: 1.0, + ticks: { + mirror: true, + padding: -10, + } + }], + xAxes: [{ + ticks: { + stepSize: 1 + } }] }, - options: { - title: { - display: true, - text: 'Distribution of alternative/other votes.' - }, - scales: { - yAxes: [{ - categoryPercentage: 0.9, - barPercentage: 1.0, - ticks: { - mirror: true, - padding: -10, - } - }], - xAxes: [{ - ticks: { - stepSize: 1 - } - }] - }, - legend: { - display: false, - } + legend: { + display: false, } - }); + } }); - </script> + }); + </script> - <script src="/main.js"></script> - <script src="/poller.js"></script> - </div> + <script src="/main.js"></script> + <script src="/poller.js"></script> </body> </html>