From ae2d99675455dbf3dd71a976d1ab0eb9b48cff9b Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Wed, 28 Aug 2019 10:02:40 +0530 Subject: [PATCH] :art: Fixed few UI glitches --- assets/css/styles.scss | 45 +++++++++++++++++++++-------------- layouts/default.vue | 54 +++++++++++++++++++++++------------------- pages/index.vue | 47 +++++++++++------------------------- pages/websocket.vue | 4 ++-- 4 files changed, 72 insertions(+), 78 deletions(-) diff --git a/assets/css/styles.scss b/assets/css/styles.scss index ec5240a09..bb0e3b2cb 100644 --- a/assets/css/styles.scss +++ b/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-right { text-align: right; } +.align-left { + 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,8 +325,7 @@ fieldset#history { right: 0; bottom: 0; background-color: white; - height: 100%; width: 100%; } -} \ No newline at end of file +} diff --git a/layouts/default.vue b/layouts/default.vue index 7f439597a..aa5f2f463 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -3,55 +3,54 @@
-

Postwoman

+

+ Postwoman

API request builder

-
- - - + diff --git a/pages/index.vue b/pages/index.vue index 495f28c7d..95fd0c97c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -21,7 +21,7 @@
  • - +
    • @@ -51,7 +51,7 @@
  • - +
    • @@ -111,7 +111,7 @@
  • - +
    • @@ -139,7 +139,7 @@
  • - +
    • @@ -175,12 +175,10 @@ -
    -
    @@ -212,11 +210,11 @@
  • - +
  • - +
    • @@ -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', - 'Bearer ' + this.bearerToken + '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,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 tag to head, to fix relative CSS/HTML paths. @@ -537,4 +517,5 @@ } } } + diff --git a/pages/websocket.vue b/pages/websocket.vue index d7334b479..1d0d8d1da 100644 --- a/pages/websocket.vue +++ b/pages/websocket.vue @@ -7,7 +7,7 @@
  • - +
    • @@ -30,7 +30,7 @@
  • - +