🎨 Fixed few UI glitches

assets/css/styles.scss

@@ -58,18 +58,6 @@ footer {
   justify-content: space-between;
 }
 
-@media(max-width: $responsiveWidth) {
-  header {
-    display: block;
-    text-align: center;
-
-    nav {
-      display: inline-flex;
-      margin-top: 20px;
-    }
-  }
-}
-
 nav {
   a:not(:last-of-type) {
     margin-right: 15px;
@@ -182,8 +170,8 @@ textarea,
 pre {
   margin: 4px;
   padding: 8px 16px;
-  width: calc(100% - 8px);
   border-radius: 4px;
+  width: calc(100% - 8px);
   background-color: var(--bg-dark-color);
   color: var(--fg-color);
   font-weight: 700;
@@ -195,7 +183,7 @@ pre {
 select,
 input,
 option {
-  height: 38px;
+  height: 41px;
 }
 
 input[type="checkbox"] {
@@ -242,6 +230,15 @@ ol li {
 }
 
 @media (max-width: $responsiveWidth) {
+  header {
+    display: block;
+    text-align: center;
+
+    nav {
+      display: inline-flex;
+      margin-top: 20px;
+    }
+  }
 
   ul,
   ol {
@@ -252,6 +249,10 @@ ol li {
   ol li {
     display: flex;
   }
+
+  .hide-on-small-screen {
+    display: none;
+  }
 }
 
 #installPWA {
@@ -295,8 +296,13 @@ fieldset#history {
   }
 }
 
-.align-left { text-align: left; }
+.align-left {
-.align-right { text-align: right; }
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
 
 #response-details-wrapper {
   position: relative;
@@ -304,6 +310,10 @@ fieldset#history {
   border-radius: 4px;
   margin: 4px;
 
+  textarea {
+    width: 100%;
+  }
+
   #response-details {
     margin: 0;
   }
@@ -315,7 +325,6 @@ fieldset#history {
     right: 0;
     bottom: 0;
     background-color: white;
-
     height: 100%;
     width: 100%;
   }

layouts/default.vue

@@ -3,11 +3,11 @@
     <header>
       <div class="slide-in">
         <nuxt-link to="/">
-          <h1 class="logo"><logo alt="" style="height: 24px; margin-right: 16px"/>Postwoman</h1>
+          <h1 class="logo">
+            <logo alt="" style="height: 24px; margin-right: 16px" />Postwoman</h1>
         </nuxt-link>
         <h3>API request builder</h3>
       </div>
-
       <nav>
         <nuxt-link to="/">HTTP</nuxt-link>
         <nuxt-link to="/websocket">WebSocket</nuxt-link>
@@ -19,39 +19,38 @@
         </nuxt-link>
       </nav>
     </header>
-
     <nuxt id="main" />
-
     <footer>
       <div>
         <a href="https://github.com/liyasthomas/postwoman" target="_blank"><img src="~static/icons/github.svg" alt="" style="margin-right: 16px">GitHub</a>
       </div>
-
       <button id="installPWA" @click.prevent="showInstallPrompt()">
         Install PWA
       </button>
     </footer>
   </div>
 </template>
-
 <style lang="scss">
   .slide-in {
     position: relative;
-    animation: slideIn 0.4s forwards ease-in-out;
+    animation: slideIn 0.2s forwards ease-in-out;
   }
 
   @keyframes slideIn {
     0% {
       opacity: 0;
-      left: -30px;
+      left: -16px;
     }
+
     100% {
       opacity: 1;
       left: 0px;
     }
   }
 
-  header, #main, footer {
+  header,
+  #main,
+  footer {
     margin: 0 auto;
     max-width: 1200px;
   }
@@ -71,7 +70,11 @@
       &.nuxt-link-exact-active {
         color: var(--act-color);
         fill: var(--act-color);
-        &:before { width: 100%; height: 100% }
+
+        &:before {
+          width: 100%;
+          height: 100%
+        }
       }
 
       &:before {
@@ -81,7 +84,6 @@
         left: 0;
         right: 0;
         z-index: -1;
-
         background-color: var(--ac-color);
         border-radius: 4px;
         margin: auto;
@@ -92,22 +94,27 @@
       }
 
       @keyframes linkHover {
-        0% { width: 0; height: 2px; }
+        0% {
-        100% { width: 100%; height: 2px; }
+          width: 0;
+          height: 2px;
         }
-    }
-  }
-</style>
 
+        100% {
+          width: 100%;
+          height: 2px;
+        }
+      }
+    }
+  }
+
+</style>
 <script>
   import intializePwa from '../assets/js/pwa';
   import logo from "../components/logo";
-
   export default {
     components: {
       logo
     },
-
     data() {
       return {
         // Once the PWA code is initialized, this holds a method
@@ -116,23 +123,19 @@
         showInstallPrompt: null
       }
     },
-
     beforeMount() {
       // Load theme settings
       (() => {
         // Apply theme from settings.
         document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || '';
-
         // Load theme color data from settings, or use default color.
         let color = this.$store.state.postwoman.settings.THEME_COLOR || '#51FF0D';
         let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT;
         if (vibrant == null) vibrant = true;
-
         document.documentElement.style.setProperty('--ac-color', color);
         document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
       })();
     },
-
     mounted() {
       // Initializes the PWA code - checks if the app is installed,
       // etc.
@@ -141,4 +144,5 @@
       })();
     }
   }
+
 </script>

pages/index.vue

@@ -21,7 +21,7 @@
           <input id="path" v-model="path" v-on:keyup.enter="sendRequest">
         </li>
         <li>
-          <label for="action">&nbsp;</label>
+          <label for="action" class="hide-on-small-screen">&nbsp;</label>
           <button id="action" name="action" @click="sendRequest" :disabled="!isValidURL">Send</button>
         </li>
       </ul>
@@ -51,7 +51,7 @@
             <input :name="'bvalue'+index" v-model="param.value">
           </li>
           <li>
-            <label for="request">&nbsp;</label>
+            <label for="request" class="hide-on-small-screen">&nbsp;</label>
             <button name="request" @click="removeRequestBodyParam(index)">Remove</button>
           </li>
         </ol>
@@ -111,7 +111,7 @@
           <input :name="'value'+index" v-model="header.value">
         </li>
         <li>
-          <label for="header">&nbsp;</label>
+          <label for="header" class="hide-on-small-screen">&nbsp;</label>
           <button name="header" @click="removeRequestHeader(index)">Remove</button>
         </li>
       </ol>
@@ -139,7 +139,7 @@
           <input :name="'value'+index" v-model="param.value">
         </li>
         <li>
-          <label for="param">&nbsp;</label>
+          <label for="param" class="hide-on-small-screen">&nbsp;</label>
           <button name="param" @click="removeRequestParam(index)">Remove</button>
         </li>
       </ol>
@@ -175,12 +175,10 @@
             <label for="body">response</label>
             <button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
           </div>
-
           <div id="response-details-wrapper">
             <textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
             <iframe src="about:blank" class="covers-response" ref="previewFrame" :class="{hidden: !previewEnabled}"></iframe>
           </div>
-
           <div v-if="response.body && responseType === 'text/html'" class="align-right">
             <button @click.prevent="togglePreview">{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</button>
           </div>
@@ -212,11 +210,11 @@
           <input name="path" type="text" readonly :value="entry.path">
         </li>
         <li>
-          <label for="delete">&nbsp;</label>
+          <label for="delete" class="hide-on-small-screen">&nbsp;</label>
           <button name="delete" @click="deleteHistory(entry)">Delete</button>
         </li>
         <li>
-          <label for="use">&nbsp;</label>
+          <label for="use" class="hide-on-small-screen">&nbsp;</label>
           <button name="use" @click="useHistory(entry)">Use</button>
         </li>
       </ul>
@@ -255,7 +253,6 @@
       statusCodeRegex: new RegExp(/.*/),
       className: 'missing-data-response'
     }
-
   ];
   const parseHeaders = xhr => {
     const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
@@ -357,7 +354,6 @@
           }) => `${key}=${encodeURIComponent(value)}`).join('&')
         return result == '' ? '' : `?${result}`
       },
-
       responseType() {
         return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
       }
@@ -391,35 +387,28 @@
           alert('Please check the formatting of the URL');
           return
         }
-
         if (this.$refs.response.$el.classList.contains('hidden')) {
           this.$refs.response.$el.classList.toggle('hidden')
         }
-
         this.$refs.response.$el.scrollIntoView({
           behavior: 'smooth'
         });
-
         this.previewEnabled = false;
         this.response.status = 'Fetching...';
         this.response.body = 'Loading...';
-
         const xhr = new XMLHttpRequest();
         const user = this.auth === 'Basic' ? this.httpUser : null;
         const password = this.auth === 'Basic' ? this.httpPassword : null;
         xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
-
         if (this.auth === 'Bearer Token') xhr.setRequestHeader(
           'Authorization',
           'Bearer ' + this.bearerToken
         );
-
         if (this.headers) {
           this.headers.forEach(function(element) {
             xhr.setRequestHeader(element.key, element.value)
           })
         }
-
         if (this.method === 'POST' || this.method === 'PUT') {
           const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
           xhr.setRequestHeader('Content-Length', requestBody.length);
@@ -428,16 +417,13 @@
         } else {
           xhr.send();
         }
-
         xhr.onload = e => {
           this.response.status = xhr.status;
           const headers = this.response.headers = parseHeaders(xhr);
-
           this.response.body = xhr.responseText;
           if ((headers['content-type'] || '').startsWith('application/json')) {
             this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
           }
-
           const n = new Date().toLocaleTimeString();
           this.history = [{
             status: xhr.status,
@@ -448,7 +434,6 @@
           }, ...this.history];
           window.localStorage.setItem('history', JSON.stringify(this.history));
         };
-
         xhr.onerror = e => {
           this.response.status = xhr.status;
           this.response.body = xhr.statusText;
@@ -459,7 +444,6 @@
           key: '',
           value: ''
         });
-
         return false
       },
       removeRequestHeader(index) {
@@ -507,16 +491,13 @@
           return false;
         }
       },
-
       copyResponse() {
         var copyText = document.getElementById("response-details");
         copyText.select();
         document.execCommand("copy");
       },
-
       togglePreview() {
         this.previewEnabled = !this.previewEnabled;
-
         if (this.previewEnabled) {
           // If you want to add 'preview' support for other response types,
           // just add them here.
@@ -524,7 +505,6 @@
             // If the preview already has that URL loaded, let's not bother re-loading it all.
             if (this.$refs.previewFrame.getAttribute('data-previewing-url') === this.url)
               return;
-
             // Use DOMParser to parse document HTML.
             const previewDocument = new DOMParser().parseFromString(this.response.body, this.responseType);
             // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
@@ -537,4 +517,5 @@
       }
     }
   }
+
 </script>

pages/websocket.vue

@@ -7,7 +7,7 @@
           <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="toggleConnection">
         </li>
         <li>
-          <label>&nbsp;</label>
+          <label for="action" class="hide-on-small-screen">&nbsp;</label>
           <button :class="{ disabled: !urlValid }" name="action" @click="toggleConnection">{{ toggleConnectionVerb }}</button>
         </li>
       </ul>
@@ -30,7 +30,7 @@
           <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="sendMessage">
         </li>
         <li>
-          <label>&nbsp;</label>
+          <label for="send" class="hide-on-small-screen">&nbsp;</label>
           <button name="send" :class="{ disabled: !connectionState }" @click="sendMessage">Send</button>
         </li>
       </ul>