From 1a8de05083d4c1ef6a8d59ab404f03c1e671ccbd Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 15 Sep 2019 16:33:44 -0700
Subject: [PATCH] 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
---
 src/routes/_components/search/Search.html     |  1 +
 src/routes/_components/status/StatusPoll.html | 83 ++++++++++++-------
 tests/utils.js                                |  2 +-
 3 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/src/routes/_components/search/Search.html b/src/routes/_components/search/Search.html
index 7192602b..36fc4165 100644
--- a/src/routes/_components/search/Search.html
+++ b/src/routes/_components/search/Search.html
@@ -36,6 +36,7 @@
     padding: 10px 15px;
     border-radius: 10px;
     flex: 1;
+    width: 0;
   }
   :global(.search-button-svg) {
     fill: var(--button-primary-text);
diff --git a/src/routes/_components/status/StatusPoll.html b/src/routes/_components/status/StatusPoll.html
index 88ef378e..549c56ae 100644
--- a/src/routes/_components/status/StatusPoll.html
+++ b/src/routes/_components/status/StatusPoll.html
@@ -1,8 +1,8 @@
 <div class={computedClass} aria-busy={loading} >
   {#if voted || expired }
-    <ul aria-label="Poll results">
+    <ul class="poll-choices" aria-label="Poll results">
       {#each options as option}
-        <li class="option">
+        <li class="poll-choice option">
           <div class="option-text">
             <strong>{option.share}%</strong> {option.title}
           </div>
@@ -14,9 +14,9 @@
     </ul>
   {:else}
     <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}
-          <li class="poll-form-option">
+          <li class="poll-choice poll-form-option">
             <input type="{multiple ? 'checkbox' : 'radio'}"
                    id="poll-choice-{uuid}-{i}"
                    name="poll-choice-{uuid}"
@@ -32,12 +32,12 @@
       <button disabled={formDisabled} type="submit">Vote</button>
     </form>
   {/if}
-  <div class="poll-details">
-    <div class="poll-stat {notification ? 'is-notification' : ''}">
+  <ul class="poll-details" aria-label="Poll details">
+    <li class="poll-stat {notification ? 'is-notification' : ''}">
       <SvgIcon className="poll-icon" href="#fa-bar-chart" />
-      <span class="poll-stat-text">{votesCount} {votesCount === 1 ? 'vote' : 'votes'}</span>
-    </div>
-    <div class="poll-stat {notification ? 'is-notification' : ''}">
+      <span class="poll-stat-text">{votesText}</span>
+    </li>
+    <li class="poll-stat {notification ? 'is-notification' : ''}">
       <SvgIcon className="poll-icon" href="#fa-clock" />
       <span class="poll-stat-text poll-stat-expiry">
         <span class="{useNarrowSize ? 'sr-only' : ''}">{expiryText}</span>
@@ -45,15 +45,17 @@
           {expiresAtTimeagoFormatted}
         </time>
       </span>
-    </div>
-    <button class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}"
-            id={refreshElementId}>
-      <SvgIcon className="poll-icon" href="#fa-refresh" />
-      <span class="poll-stat-text">
-        Refresh
-      </span>
-    </button>
-  </div>
+    </li>
+    <li class="poll-stat {notification ? 'is-notification' : ''} {expired ? 'poll-expired' : ''}">
+      <button id={refreshElementId}
+              aria-label="Refresh">
+        <SvgIcon className="poll-icon" href="#fa-refresh" />
+        <span class="poll-stat-text poll-stat-text-refresh" aria-hidden="true">
+          Refresh
+        </span>
+      </button>
+    </li>
+  </ul>
 </div>
 <style>
   .poll {
@@ -74,13 +76,13 @@
     pointer-events: none;
   }
 
-  ul {
+  ul.poll-choices {
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
-  li {
+  li.poll-choice {
     margin: 0;
     padding: 0;
   }
@@ -118,16 +120,18 @@
     font-size: 1.2em;
   }
 
-  .poll-details {
+  ul.poll-details {
     display: grid;
     grid-template-columns: max-content minmax(0, max-content) max-content;
     grid-gap: 20px;
     align-items: center;
     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 */
     background: none;
     box-shadow: none;
@@ -140,20 +144,24 @@
     text-align: left;
     text-decoration: none;
     text-indent: 0;
+    display: flex;
+    align-items: center;
   }
 
-  button.poll-stat:hover {
+  .poll-stat button:hover {
     text-decoration: underline;
   }
 
-  .poll-stat {
+  li.poll-stat {
     display: flex;
     flex-direction: row;
     align-items: center;
     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);
   }
 
@@ -167,6 +175,7 @@
 
   .poll-stat-text {
     margin-left: 5px;
+    color: var(--deemphasized-text-color);
   }
 
   .poll-stat-expiry {
@@ -187,9 +196,6 @@
     padding-bottom: 10px;
   }
 
-  .poll-form button {
-  }
-
   .poll-form label {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -205,12 +211,24 @@
     .poll.status-in-own-thread {
       padding: 10px;
     }
-    .poll-details {
+    ul.poll-details {
       grid-gap: 5px;
       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>
 <script>
   import SvgIcon from '../SvgIcon.html'
@@ -275,8 +293,11 @@
       expiresAtAbsoluteFormatted: ({ expiresAtTS }) => absoluteDateFormatter.format(expiresAtTS),
       expiryText: ({ expired }) => expired ? 'Ended' : 'Ends',
       refreshElementId: ({ uuid }) => `poll-refresh-${uuid}`,
-      useNarrowSize: ({ $isMobileSize, expired }) => $isMobileSize && !expired,
+      useNarrowSize: ({ $isMobileSize, expired, isStatusInOwnThread }) => (
+        !isStatusInOwnThread && $isMobileSize && !expired
+      ),
       formDisabled: ({ choices }) => !choices.length,
+      votesText: ({ votesCount }) => `${votesCount} ${votesCount === 1 ? 'vote' : 'votes'}`,
       computedClass: ({ isStatusInNotification, isStatusInOwnThread, loading }) => (
         classname(
           'poll',
diff --git a/tests/utils.js b/tests/utils.js
index 8e06f0aa..b4b744b6 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -259,7 +259,7 @@ export function getNthStatusPollResult (n, i) {
 }
 
 export function getNthStatusPollRefreshButton (n) {
-  return $(`${getNthStatusSelector(n)} button.poll-stat`)
+  return $(`${getNthStatusSelector(n)} .poll-stat button`)
 }
 
 export function getNthStatusPollVoteCount (n) {