From abfaf246272059ac1c27679b7df1e366e7a24862 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 27 Sep 2019 14:44:15 +0530
Subject: [PATCH] :zap: 100/100 Lighthouse score

---
 assets/css/styles.scss |  8 --------
 pages/index.vue        | 32 +++++++++++++++-----------------
 pages/websocket.vue    | 42 +++++++++++++++++++-----------------------
 3 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 37a687fc5..07a748c3d 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -306,10 +306,6 @@ ol li {
   justify-content: space-between;
 }
 
-.show-on-small-screen {
-  display: flex;
-}
-
 @media (max-width: $responsiveWidth) {
   header div {
     display: flex;
@@ -335,10 +331,6 @@ ol li {
   .hide-on-small-screen {
     display: none;
   }
-
-  .show-on-small-screen {
-    display: inline-flex;
-  }
 }
 
 #installPWA {
diff --git a/pages/index.vue b/pages/index.vue
index 56a4439fe..37f0a992d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -65,23 +65,21 @@
           <label for="path">Path</label>
           <input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler">
         </li>
-        <div class="show-on-small-screen">
-          <li>
-            <label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
-            <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL">
-              <i class="material-icons">share</i>
-              <span>Permalink</span>
-            </button>
-          </li>
-          <li>
-            <label class="hide-on-small-screen" for="code">&nbsp;</label>
-            <button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
-              <i class="material-icons" v-if="isHidden">visibility</i>
-              <i class="material-icons" v-if="!isHidden">visibility_off</i>
-              <span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
-            </button>
-          </li>
-        </div>
+        <li>
+          <label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
+          <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL">
+            <i class="material-icons">share</i>
+            <span>Permalink</span>
+          </button>
+        </li>
+        <li>
+          <label class="hide-on-small-screen" for="code">&nbsp;</label>
+          <button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
+            <i class="material-icons" v-if="isHidden">visibility</i>
+            <i class="material-icons" v-if="!isHidden">visibility_off</i>
+            <span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
+          </button>
+        </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
           <button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 4e9c5e404..a23e380ba 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -6,18 +6,16 @@
           <label for="url">URL</label>
           <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
         </li>
-        <div>
-          <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
-              {{ toggleConnectionVerb }}
-              <span>
-                <i class="material-icons" v-if="!connectionState">sync</i>
-                <i class="material-icons" v-if="connectionState">sync_disabled</i>
-              </span>
-            </button>
-          </li>
-        </div>
+        <li>
+          <label for="connect" class="hide-on-small-screen">&nbsp;</label>
+          <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            {{ toggleConnectionVerb }}
+            <span>
+              <i class="material-icons" v-if="!connectionState">sync</i>
+              <i class="material-icons" v-if="connectionState">sync_disabled</i>
+            </span>
+          </button>
+        </li>
       </ul>
     </pw-section>
     <pw-section class="purple" label="Communication" id="response" ref="response">
@@ -37,17 +35,15 @@
           <label for="message">Message</label>
           <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
         </li>
-        <div>
-          <li>
-            <label for="send" class="hide-on-small-screen">&nbsp;</label>
-            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
-              Send
-              <span>
-                <i class="material-icons">send</i>
-              </span>
-            </button>
-          </li>
-        </div>
+        <li>
+          <label for="send" class="hide-on-small-screen">&nbsp;</label>
+          <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+            Send
+            <span>
+              <i class="material-icons">send</i>
+            </span>
+          </button>
+        </li>
       </ul>
     </pw-section>
   </div>