From 48e917115320d45ae89b1a4378fcd1573a49e4c0 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sat, 23 Nov 2019 15:25:30 +0530
Subject: [PATCH 1/2] :wheelchair: Improving accessibility

---
 components/collections/index.vue |   4 +-
 components/history.vue           | 144 +++++++++++++++----------------
 pages/index.vue                  |  32 ++++---
 3 files changed, 87 insertions(+), 93 deletions(-)

diff --git a/components/collections/index.vue b/components/collections/index.vue
index 6602f1c0d..c8323e372 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -57,7 +57,7 @@ TODO:
         >
           <i class="material-icons">import_export</i>
         </button>
-        <a
+        <!-- <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
           target="_blank"
           rel="noopener"
@@ -65,7 +65,7 @@ TODO:
           <button class="icon" v-tooltip="'Wiki'">
             <i class="material-icons">help</i>
           </button>
-        </a>
+        </a> -->
       </div>
     </div>
 
diff --git a/components/history.vue b/components/history.vue
index fe1e2c3f4..f6762c6af 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,70 +1,14 @@
 <template>
   <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
-      <div class="show-on-large-screen">
-        <li id="filter-history">
-          <input
-            aria-label="Search"
-            type="text"
-            placeholder="search history"
-            v-model="filterText"
-          />
-        </li>
-        <v-popover>
-          <button class="tooltip-target icon" v-tooltip="'Sort'">
-            <i class="material-icons">sort</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button class="icon" @click="sort_by_label()" v-close-popover>
-                <i class="material-icons">sort_by_alpha</i>
-                <span>Label</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_time()" v-close-popover>
-                <i class="material-icons">access_time</i>
-                <span>Time</span>
-              </button>
-            </div>
-            <div>
-              <button
-                class="icon"
-                @click="sort_by_status_code()"
-                v-close-popover
-              >
-                <i class="material-icons">assistant</i>
-                <span>Status</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_url()" v-close-popover>
-                <i class="material-icons">language</i>
-                <span>URL</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_path()" v-close-popover>
-                <i class="material-icons">timeline</i>
-                <span>Path</span>
-              </button>
-            </div>
-            <div v-if="showMore">
-              <button class="icon" @click="sort_by_duration()" v-close-popover>
-                <i class="material-icons">timer</i>
-                <span>Duration</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="toggleCollapse()">
-                <i class="material-icons" v-if="!showMore">first_page</i>
-                <i class="material-icons" v-else>last_page</i>
-                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
-      </div>
+      <li id="filter-history">
+        <input
+          aria-label="Search"
+          type="text"
+          placeholder="search history"
+          v-model="filterText"
+        />
+      </li>
     </ul>
     <virtual-list
       class="virtual-list"
@@ -223,8 +167,8 @@
         <label>History is empty</label>
       </li>
     </ul>
-    <ul v-if="history.length !== 0">
-      <li v-if="!isClearingHistory">
+    <div v-if="history.length !== 0">
+      <div class="flex-wrap" v-if="!isClearingHistory">
         <button
           class="icon"
           id="clear-history-button"
@@ -234,11 +178,64 @@
           <i class="material-icons">clear_all</i>
           <span>Clear All</span>
         </button>
-      </li>
-      <li v-else>
-        <div class="flex-wrap">
-          <label for="clear-history-button">Are you sure?</label>
-          <div>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip="'Sort'">
+            <i class="material-icons">sort</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="sort_by_label()" v-close-popover>
+                <i class="material-icons">sort_by_alpha</i>
+                <span>Label</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_time()" v-close-popover>
+                <i class="material-icons">access_time</i>
+                <span>Time</span>
+              </button>
+            </div>
+            <div>
+              <button
+                class="icon"
+                @click="sort_by_status_code()"
+                v-close-popover
+              >
+                <i class="material-icons">assistant</i>
+                <span>Status</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_url()" v-close-popover>
+                <i class="material-icons">language</i>
+                <span>URL</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_path()" v-close-popover>
+                <i class="material-icons">timeline</i>
+                <span>Path</span>
+              </button>
+            </div>
+            <div v-if="showMore">
+              <button class="icon" @click="sort_by_duration()" v-close-popover>
+                <i class="material-icons">timer</i>
+                <span>Duration</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="toggleCollapse()">
+                <i class="material-icons" v-if="!showMore">first_page</i>
+                <i class="material-icons" v-else>last_page</i>
+                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+      </div>
+      <div class="flex-wrap" v-else>
+        <label for="clear-history-button">Are you sure?</label>
+        <div>
             <button
               class="icon"
               id="confirm-clear-history-button"
@@ -256,9 +253,8 @@
               <i class="material-icons">close</i>
             </button>
           </div>
-        </div>
-      </li>
-    </ul>
+      </div>
+    </div>
   </pw-section>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index ffaa5de7a..d80de8047 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -88,23 +88,21 @@
                 <option value="Users"></option>
               </datalist>
             </li>
-            <div>
-              <li>
-                <label class="hide-on-small-screen" for="send">&nbsp;</label>
-                <button
-                  :disabled="!isValidURL"
-                  @click="sendRequest"
-                  id="send"
-                  ref="sendButton"
-                >
-                  Send
-                  <span id="hidden-message">Again</span>
-                  <span>
-                    <i class="material-icons">send</i>
-                  </span>
-                </button>
-              </li>
-            </div>
+            <li>
+              <label class="hide-on-small-screen" for="send">&nbsp;</label>
+              <button
+                :disabled="!isValidURL"
+                @click="sendRequest"
+                id="send"
+                ref="sendButton"
+              >
+                Send
+                <span id="hidden-message">Again</span>
+                <span>
+                  <i class="material-icons">send</i>
+                </span>
+              </button>
+            </li>
           </ul>
           <div
             class="blue"

From 7a25f4c13cc6c19e6abc476adb2668ec32e8f178 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sat, 23 Nov 2019 18:15:15 +0530
Subject: [PATCH 2/2] :dizzy: Updated Support us section

---
 layouts/default.vue | 73 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 10 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index b1bd0ff12..fc15fd766 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -51,17 +51,14 @@
                 </button>
               </div>
               <div>
-                <a
-                  href="https://opencollective.com/postwoman"
-                  target="_blank"
-                  rel="noopener"
+                <button
+                  class="icon"
+                  @click="showSupport = true"
                   v-close-popover
                 >
-                  <button class="icon">
-                    <i class="material-icons">favorite</i>
-                    <span>Donate</span>
-                  </button>
-                </a>
+                  <i class="material-icons">favorite</i>
+                  <span>Support us</span>
+                </button>
               </div>
               <div>
                 <button
@@ -273,6 +270,61 @@
       </div>
       <div slot="footer"></div>
     </modal>
+    <modal v-if="showSupport" @close="showSupport = false">
+      <div slot="header">
+        <ul>
+          <li>
+            <div class="flex-wrap">
+              <h3 class="title">Support us on</h3>
+              <div>
+                <button class="icon" @click="showSupport = false">
+                  <i class="material-icons">close</i>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div slot="body">
+        <div>
+          <a
+            href="https://opencollective.com/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <i class="material-icons">favorite</i>
+              <span>Open Collective</span>
+            </button>
+          </a>
+        </div>
+        <div>
+          <a
+            href="https://www.paypal.me/liyascthomas"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <i class="material-icons">favorite</i>
+              <span>PayPal</span>
+            </button>
+          </a>
+        </div>
+        <div>
+          <a
+            href="https://www.patreon.com/liyasthomas"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon">
+              <i class="material-icons">favorite</i>
+              <span>Patreon</span>
+            </button>
+          </a>
+        </div>
+      </div>
+      <div slot="footer"></div>
+    </modal>
   </div>
 </template>
 
@@ -304,7 +356,8 @@ export default {
       // prompt.
       showInstallPrompt: null,
       version: {},
-      showShortcuts: false
+      showShortcuts: false,
+      showSupport: false
     };
   },