btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

💄 Minor UI update

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-27 10:18:41 +05:30
parent 0377013d47
commit 66268b194c
2 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/styles.scss
View File

@@ -65,8 +65,7 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
@media(max-width: $responsiveWidth) {
@media(max-width: $responsiveWidth){
header { header {
display: block; display: block;
text-align: center; text-align: center;
@@ -78,7 +77,6 @@ footer {
} }
} }
nav { nav {
a:not(:last-of-type) { a:not(:last-of-type) {
margin-right: 15px; margin-right: 15px;
@@ -173,11 +171,11 @@ fieldset.purple legend {
} }
fieldset.orange { fieldset.orange {
border-color: #FF9800; border-color: #F5A623;
} }
fieldset.orange legend { fieldset.orange legend {
color: #FF9800; color: #F5A623;
} }
.collapsible.hidden { .collapsible.hidden {
@@ -210,7 +208,8 @@ option {
input[type="checkbox"] { input[type="checkbox"] {
width: initial; width: initial;
&, & + label { &,
& + label {
vertical-align: middle; vertical-align: middle;
} }
} }
@@ -242,18 +241,15 @@ ol li {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.flex-wrap{
.flex-wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} align-items: center;
.btn-copy{
padding: 6px 14px;
font-size: 11px;
margin-right: 15px;
} }
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
ul, ul,
ol { ol {
flex-direction: column; flex-direction: column;

19
pages/index.vue
View File

@@ -69,7 +69,8 @@
<textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea> <textarea name="request" rows="1" readonly>{{rawRequestBody || '(add at least one parameter)'}}</textarea>
</li> </li>
</ul> </ul>
</div><div v-else> </div>
<div v-else>
<textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea> <textarea v-model="rawParams" style="font-family: monospace;" rows="16" @keydown="formatRawParams"></textarea>
</div> </div>
</pw-section> </pw-section>
@@ -103,7 +104,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="cyan" label="Headers" collapsed> <pw-section class="orange" label="Headers" collapsed>
<ol v-for="(header, index) in headers"> <ol v-for="(header, index) in headers">
<li> <li>
<label :for="'header'+index">Key {{index + 1}}</label> <label :for="'header'+index">Key {{index + 1}}</label>
@@ -132,7 +133,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Parameters" collapsed> <pw-section class="cyan" label="Parameters" collapsed>
<ol v-for="(param, index) in params"> <ol v-for="(param, index) in params">
<li> <li>
<label :for="'param'+index">Key {{index + 1}}</label> <label :for="'param'+index">Key {{index + 1}}</label>
@@ -161,7 +162,7 @@
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="orange" label="Response" id="response" ref="response"> <pw-section class="purple" label="Response" id="response" ref="response">
<ul> <ul>
<li> <li>
<label for="status">status</label> <label for="status">status</label>
@@ -176,11 +177,11 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
<label for="body">response</label> <label for="body">response</label>
<button v-if="response.body" name="action" class="btn-copy" @click="copyResponse">Copy Response</button> <button v-if="response.body" name="action" @click="copyResponse">Copy Response</button>
</div> </div>
<textarea name="body" rows="10" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea> <textarea name="body" rows="16" id="response-details" readonly>{{response.body || '(waiting to send request)'}}</textarea>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>