copyleftie
/
pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix: tweak poll results style and fix a11y (#1220)

This commit is contained in:
Nolan Lawson 2019-05-25 13:20:45 -07:00 committed by GitHub
parent af955492e8
commit c18168d913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/routes/_components/status/StatusPoll.html
View File

@ -1,31 +1,50 @@
<div class="poll" > <div class="poll" >
{#each options as option} <ul class="options" aria-label="Poll results">
<div class="option"> {#each options as option}
<div>{option.title} ({option.share}%)</div> <li class="option">
<svg height="2px" width="100%"> <div class="option-text">{option.title} ({option.share}%)</div>
<line x1="0" y1="0" x2="{option.share}%" y2="0" /> <svg aria-hidden="true">
</svg> <line x1="0" y1="0" x2="{option.share}%" y2="0" />
</div> </svg>
{/each} </li>
{/each}
</ul>
</div> </div>
<style> <style>
.poll { .poll {
grid-area: poll; grid-area: poll;
margin: 10px 10px 10px 5px; margin: 10px 10px 10px 5px;
word-wrap: break-word;
white-space: pre-wrap;
} }
.option { ul.options {
list-style: none;
margin: 0;
padding: 0;
}
li.option {
margin: 0 0 10px 0;
padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
stroke: var(--svg-fill); stroke: var(--svg-fill);
stroke-width:2; stroke-width: 5px;
} }
.option:not(:last-child) { li.option:last-child {
margin-bottom: 3px; margin: 0;
}
.option-text {
word-wrap: break-word;
white-space: pre-wrap;
font-size: 1.1em;
}
svg {
height: 2px;
width: 100%;
margin-top: 5px;
} }
</style> </style>