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:
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>
