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 @@
-
-
-
+
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 @@
-
+