🎨 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,55 +3,54 @@
     <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>
         <nuxt-link to="/settings">
           <!-- Settings cog -->
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/>
+            <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z" />
           </svg>
         </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,23 +94,28 @@
       }
 
       @keyframes linkHover {
-        0% { width: 0; height: 2px; }
+        0% {
-        100% { width: 100%; height: 2px; }
+          width: 0;
+          height: 2px;
+        }
+
+        100% {
+          width: 100%;
+          height: 2px;
+        }
       }
     }
   }
-</style>
 
+</style>
 <script>
   import intializePwa from '../assets/js/pwa';
   import logo from "../components/logo";
-
   export default {
     components: {
       logo
     },
-
+    data() {
-    data () {
       return {
         // Once the PWA code is initialized, this holds a method
         // that can be called to show the user the installation
@@ -116,24 +123,20 @@
         showInstallPrompt: null
       }
     },
-
+    beforeMount() {
-    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;
+        if (vibrant == null) vibrant = true;
-
         document.documentElement.style.setProperty('--ac-color', color);
         document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
       })();
     },
-
+    mounted() {
-    mounted () {
       // Initializes the PWA code - checks if the app is installed,
       // etc.
       (async () => {
@@ -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,8 +354,7 @@
           }) => `${key}=${encodeURIComponent(value)}`).join('&')
         return result == '' ? '' : `?${result}`
       },
-
+      responseType() {
-      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',
+          'Authorization',
-                'Bearer ' + this.bearerToken
+          '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,24 +491,20 @@
           return false;
         }
       },
-
       copyResponse() {
         var copyText = document.getElementById("response-details");
         copyText.select();
         document.execCommand("copy");
       },
-
+      togglePreview() {
-      togglePreview () {
         this.previewEnabled = !this.previewEnabled;
-
+        if (this.previewEnabled) {
-        if(this.previewEnabled) {
           // If you want to add 'preview' support for other response types,
           // just add them here.
-          if(this.responseType === "text/html"){
+          if (this.responseType === "text/html") {
             // 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)
+            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>