Madeorsk/PollVerlaine
1
0
Fork 0
mirror of https://git.cant.at/Madeorsk/PollVerlaine synced 2024-12-22 07:07:54 +01:00
Code Issues Releases Wiki Activity

Poll visualisation.

Browse Source 
Finished poll visualisation. TODO: Buttons now need to do things.
This commit is contained in:
Madeorsk 2018-08-12 22:18:31 +02:00
parent 5ac9b5d0e4
commit 9c4add0217
2 changed files with 66 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
static/css/main.css
View File

@ -69,7 +69,8 @@ main button,
main a.button
{ cursor: pointer; }
main input[type="submit"]
main input[type="submit"],
a.button.margin
{ margin-top: 1em; }
main input:focus,
@ -122,6 +123,59 @@ h1.poll
font-size: 2.5rem;
}
.option
{
display: flex;
align-items: center;
margin: auto;
width: 25rem;
box-sizing: border-box;
background: #141414;
}
.option > input
{
position: absolute;
float: left;
width: 0;
opacity: 0;
cursor: pointer;
}
.option > .check
{
flex: none;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1em;
padding: 0;
width: 1.25em;
height: 1.25em;
background: #202020;
}
.option > .check::before
{
content: "";
transition: transform 0.1s linear, border-radius 0.4s ease-out;
display: block;
background: #0088E5;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
transform: scale(0);
}
.option input:checked ~ .check::before
{ border-radius: 0; transform: scale(1); }
.option > label
{
flex: 1;
display: block;
padding: 1em;
font-family: "PT Serif", serif;
font-size: 1.2em;
cursor: pointer;
}
footer
{
display: block;

14
views/poll.php
View File

@ -1,6 +1,14 @@
<h1 class="poll"><?= $poll->title ?></h1>
<main>
<pre>
<?= var_dump($poll) ?>
</pre>
<form action="#" id="poll">
<?php foreach ($poll->options as $option): ?>
<div class="option">
<input type="radio" name="options" value="<?= $option->id ?>" id="option-<?= $option->id ?>" />
<label for="option-<?= $option->id ?>" class="check"></label>
<label for="option-<?= $option->id ?>"><?= $option->label ?></label>
</div>
<?php endforeach; ?>
<input type="submit" value="Vote" />
</form>
<a class="button margin">Jump to results</a>
</main>