fix: fix style/a11y of search/toots on small devices (#1489)

* fix: fix style/a11y of search/toots on small devices

fixes #3

* fixup

* fixup

* fixup

* fix test
This commit is contained in:
Nolan Lawson 2019-09-15 16:33:44 -07:00 committed by GitHub
parent d5fb6c568c
commit 1a8de05083
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 32 deletions

View file

@ -36,6 +36,7 @@
padding: 10px 15px; padding: 10px 15px;
border-radius: 10px; border-radius: 10px;
flex: 1; flex: 1;
width: 0;
} }
:global(.search-button-svg) { :global(.search-button-svg) {
fill: var(--button-primary-text); fill: var(--button-primary-text);

View file

@ -1,8 +1,8 @@
<div class={computedClass} aria-busy={loading} > <div class={computedClass} aria-busy={loading} >
{#if voted || expired } {#if voted || expired }
<ul aria-label="Poll results"> <ul class="poll-choices" aria-label="Poll results">
{#each options as option} {#each options as option}
<li class="option"> <li class="poll-choice option">
<div class="option-text"> <div class="option-text">
<strong>{option.share}%</strong> {option.title} <strong>{option.share}%</strong> {option.title}
</div> </div>
@ -14,9 +14,9 @@
</ul> </ul>
{:else} {:else}
<form class="poll-form" aria-label="Vote on poll" on:submit="onSubmit(event)" ref:form> <form class="poll-form" aria-label="Vote on poll" on:submit="onSubmit(event)" ref:form>
<ul aria-label="Poll choices"> <ul class="poll-choices" aria-label="Poll choices">
{#each options as option, i} {#each options as option, i}
<li class="poll-form-option"> <li class="poll-choice poll-form-option">
<input type="{multiple ? 'checkbox' : 'radio'}" <input type="{multiple ? 'checkbox' : 'radio'}"
id="poll-choice-{uuid}-{i}" id="poll-choice-{uuid}-{i}"
name="poll-choice-{uuid}" name="poll-choice-{uuid}"
@ -32,12 +32,12 @@
<button disabled={formDisabled} type="submit">Vote</button> <button disabled={formDisabled} type="submit">Vote</button>
</form> </form>
{/if} {/if}
<div class="poll-details"> <ul class="poll-details" aria-label="Poll details">
<div class="poll-stat {notification ? 'is-notification' : ''}"> <li class="poll-stat {notification ? 'is-notification' : ''}">
<SvgIcon className="poll-icon" href="#fa-bar-chart" /> <SvgIcon className="poll-icon" href="#fa-bar-chart" />
<span class="poll-stat-text">{votesCount} {votesCount === 1 ? 'vote' : 'votes'}</span> <span class="poll-stat-text">{votesText}</span>
</div> </li>
<div class="poll-stat {notification ? 'is-notification' : ''}"> <li class="poll-stat {notification ? 'is-notification' : ''}">
<SvgIcon className="poll-icon" href="#fa-clock" /> <SvgIcon className="poll-icon" href="#fa-clock" />
<span class="poll-stat-text poll-stat-expiry"> <span class="poll-stat-text poll-stat-expiry">
<span class="{useNarrowSize ? 'sr-only' : ''}">{expiryText}</span> <span class="{useNarrowSize ? 'sr-only' : ''}">{expiryText}</span>
@ -45,15 +45,17 @@
{expiresAtTimeagoFormatted} {expiresAtTimeagoFormatted}
</time> </time>
</span> </span>
</div> </li>
<button class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}" <li class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}">
id={refreshElementId}> <button id={refreshElementId}
<SvgIcon className="poll-icon" href="#fa-refresh" /> aria-label="Refresh">
<span class="poll-stat-text"> <SvgIcon className="poll-icon" href="#fa-refresh" />
Refresh <span class="poll-stat-text poll-stat-text-refresh" aria-hidden="true">
</span> Refresh
</button> </span>
</div> </button>
</li>
</ul>
</div> </div>
<style> <style>
.poll { .poll {
@ -74,13 +76,13 @@
pointer-events: none; pointer-events: none;
} }
ul { ul.poll-choices {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li.poll-choice {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -118,16 +120,18 @@
font-size: 1.2em; font-size: 1.2em;
} }
.poll-details { ul.poll-details {
display: grid; display: grid;
grid-template-columns: max-content minmax(0, max-content) max-content; grid-template-columns: max-content minmax(0, max-content) max-content;
grid-gap: 20px; grid-gap: 20px;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
margin-top: 10px; margin: 10px 0 0 0;
padding: 0;
list-style: none;
} }
button.poll-stat { .poll-stat button {
/* reset button styles */ /* reset button styles */
background: none; background: none;
box-shadow: none; box-shadow: none;
@ -140,20 +144,24 @@
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
text-indent: 0; text-indent: 0;
display: flex;
align-items: center;
} }
button.poll-stat:hover { .poll-stat button:hover {
text-decoration: underline; text-decoration: underline;
} }
.poll-stat { li.poll-stat {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
padding: 0;
margin: 0;
} }
.poll-stat.is-notification { .poll-stat.is-notification, .poll-stat.is-notification .poll-stat-text {
color: var(--very-deemphasized-text-color); color: var(--very-deemphasized-text-color);
} }
@ -167,6 +175,7 @@
.poll-stat-text { .poll-stat-text {
margin-left: 5px; margin-left: 5px;
color: var(--deemphasized-text-color);
} }
.poll-stat-expiry { .poll-stat-expiry {
@ -187,9 +196,6 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
.poll-form button {
}
.poll-form label { .poll-form label {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -205,12 +211,24 @@
.poll.status-in-own-thread { .poll.status-in-own-thread {
padding: 10px; padding: 10px;
} }
.poll-details { ul.poll-details {
grid-gap: 5px; grid-gap: 5px;
justify-content: space-between; justify-content: space-between;
} }
} }
@media (max-width: 320px) {
.poll-stat-text-refresh {
display: none; /* takes up too much space on small devices */
}
ul.poll-details {
grid-gap: 2px;
}
.poll-stat-text {
margin-left: 2px;
}
}
</style> </style>
<script> <script>
import SvgIcon from '../SvgIcon.html' import SvgIcon from '../SvgIcon.html'
@ -275,8 +293,11 @@
expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS), expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS),
expiryText: ({ expired }) => expired ? 'Ended' : 'Ends', expiryText: ({ expired }) => expired ? 'Ended' : 'Ends',
refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`, refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`,
useNarrowSize: ({ $isMobileSize, expired }) => $isMobileSize && !expired, useNarrowSize: ({ $isMobileSize, expired, isStatusInOwnThread }) => (
!isStatusInOwnThread && $isMobileSize && !expired
),
formDisabled: ({ choices }) => !choices.length, formDisabled: ({ choices }) => !choices.length,
votesText: ({ votesCount }) => `${votesCount} ${votesCount === 1 ? 'vote' : 'votes'}`,
computedClass: ({ isStatusInNotification, isStatusInOwnThread, loading }) => ( computedClass: ({ isStatusInNotification, isStatusInOwnThread, loading }) => (
classname( classname(
'poll', 'poll',

View file

@ -259,7 +259,7 @@ export function getNthStatusPollResult (n, i) {
} }
export function getNthStatusPollRefreshButton (n) { export function getNthStatusPollRefreshButton (n) {
return $(`${getNthStatusSelector(n)} button.poll-stat`) return $(`${getNthStatusSelector(n)} .poll-stat button`)
} }
export function getNthStatusPollVoteCount (n) { export function getNthStatusPollVoteCount (n) {