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

:liptick: Minor UI update

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-21 06:55:37 +05:30
parent 1ab2de9c69
commit 8d99d4aa99
15 changed files with 89 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/css/fonts.scss
View File

@@ -1,63 +1,2 @@
/* Material Design Icons */
@font-face {
font-family: "Material Icons";
font-display: swap;
font-style: normal;
font-weight: 400;
src: url(~@/assets/fonts/material-icons-v48.woff2) format("woff2");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
/* Roboto Mono 400 */
@font-face {
font-family: "Roboto Mono";
font-display: swap;
font-style: normal;
font-weight: 400;
src: local("Roboto Mono"), local("RobotoMono-Regular"),
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/roboto-mono-v7-latin-regular.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Poppins 500 */
@font-face {
font-family: "Poppins";
font-display: swap;
font-style: normal;
font-weight: 500;
src: local("Poppins Medium"), local("Poppins-Medium"),
url("~@/assets/fonts/poppins-v9-latin-500.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-500.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin */
@font-face {
font-family: "Poppins";
font-display: swap;
font-style: normal;
font-weight: 700;
src: local("Poppins Bold"), local("Poppins-Bold"),
url("~@/assets/fonts/poppins-v9-latin-700.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("~@/assets/fonts/poppins-v9-latin-700.woff") format("woff");
/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@import url("https://fonts.googleapis.com/css?family=Poppins:500,700|Roboto+Mono:400&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

32
assets/css/styles.scss
View File

@@ -46,7 +46,7 @@ body {
background-color: var(--bg-color);
color: var(--fg-color);
font-weight: 500;
font-size: 16px;
font-size: 14px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
line-height: 1.5;
-webkit-tap-highlight-color: transparent;
@@ -73,7 +73,6 @@ a {
display: inline-flex;
color: inherit;
text-decoration: none;
font-weight: 700;
}
header,
@@ -152,7 +151,7 @@ footer {
display: flex;
width: 10%;
order: 3;
// comment this to display
// comment below this to display
display: none;
}
@@ -254,6 +253,7 @@ h3 {
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
}
.tooltip-arrow {
@@ -366,16 +366,15 @@ button {
align-items: center;
justify-content: center;
margin: 4px;
padding: 0 16px;
padding: 6px 16px;
border-radius: 20px;
background-color: var(--ac-color);
color: var(--act-color);
font-weight: 700;
font-size: 16px;
font-family: "Poppins", "Roboto", "Noto", sans-serif;
font-weight: 700;
transition: all 0.2s ease-in-out;
fill: var(--act-color);
height: 40px;
cursor: pointer;
span {
@@ -485,11 +484,12 @@ pre {
background-color: var(--bg-dark-color);
color: var(--fg-color);
font-size: 16px;
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
line-height: 1;
transition: all 0.2s ease-in-out;
user-select: text;
width: calc(100% - 8px);
min-height: 40px;
resize: vertical;
text-overflow: ellipsis;
@@ -506,7 +506,8 @@ pre {
}
pre.ace_editor {
font-family: Roboto Mono, monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
z-index: 0;
}
@@ -517,7 +518,8 @@ code {
select,
option {
height: 40px;
height: 37px;
line-height: 37px;
cursor: pointer;
}
@@ -649,7 +651,8 @@ ol li {
}
.mono {
font-family: 'Roboto Mono', monospace;
font-family: "Roboto Mono", monospace;
font-weight: 400;
}
#response-details-wrapper {
@@ -660,6 +663,7 @@ ol li {
textarea {
margin: 0;
width: 100%;
line-height: 1;
}
.covers-response {
@@ -758,10 +762,14 @@ input[type="radio"]:checked + label + .tab {
.inner-right {
display: flex;
width: 25%;
width: 30%;
order: 2;
}
.bg-color {
background-color: var(--bg-color);
}
@media (max-width: $responsiveWidth) {
.content {
flex-flow: column;

BIN
assets/fonts/material-icons-v48.woff2
View File

Binary file not shown.

BIN
assets/fonts/poppins-v9-latin-500.woff
View File

Binary file not shown.

BIN
assets/fonts/poppins-v9-latin-500.woff2
View File

Binary file not shown.

BIN
assets/fonts/poppins-v9-latin-700.woff
View File

Binary file not shown.

BIN
assets/fonts/poppins-v9-latin-700.woff2
View File

Binary file not shown.

BIN
assets/fonts/roboto-mono-v7-latin-regular.woff
View File

Binary file not shown.

BIN
assets/fonts/roboto-mono-v7-latin-regular.woff2
View File

Binary file not shown.

2
components/autocomplete.vue
View File

@@ -55,7 +55,7 @@
width: 100%;
display: block;
padding: 8px 16px;
font-size: 18px;
font-size: 16px;
font-family: "Roboto Mono", monospace;
&:last-child {

2
components/collections/index.vue
View File

@@ -96,7 +96,7 @@ TODO:
<style lang="scss" scoped>
.virtual-list {
max-height: calc(100vh - 220px);
max-height: calc(100vh - 204px);
}
ul {

7
components/history.vue
View File

@@ -90,6 +90,7 @@
readonly
:value="entry.label"
placeholder="No label"
class="bg-color"
/>
</li>
<!--
@@ -263,7 +264,7 @@
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 284px);
max-height: calc(100vh - 265px);
[readonly] {
cursor: default;
@@ -300,10 +301,10 @@ ol li {
span {
position: absolute;
top: 10px;
right: 8px;
right: 10px;
font-family: "Roboto Mono", monospace;
background-color: var(--bg-color);
padding: 2px 8px;
padding: 2px 6px;
border-radius: 8px;
}
}

16
pages/graphql.vue
View File

@@ -13,13 +13,15 @@
@keyup.enter="getSchema()"
/>
</li>
<li>
<label for="get" class="hide-on-small-screen">&nbsp;</label>
<button id="get" name="get" @click="getSchema">
Get Schema
<span><i class="material-icons">send</i></span>
</button>
</li>
<div>
<li>
<label for="get" class="hide-on-small-screen">&nbsp;</label>
<button id="get" name="get" @click="getSchema">
Get Schema
<span><i class="material-icons">send</i></span>
</button>
</li>
</div>
</ul>
</pw-section>

32
pages/index.vue
View File

@@ -88,21 +88,23 @@
<option value="Users"></option>
</datalist>
</li>
<li>
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button
:disabled="!isValidURL"
@click="sendRequest"
id="send"
ref="sendButton"
>
Send
<span id="hidden-message">Again</span>
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
<div>
<li>
<label class="hide-on-small-screen" for="send">&nbsp;</label>
<button
:disabled="!isValidURL"
@click="sendRequest"
id="send"
ref="sendButton"
>
Send
<span id="hidden-message">Again</span>
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
</div>
</ul>
<div
class="blue"

65
pages/websocket.vue
View File

@@ -12,21 +12,23 @@
@keyup.enter="urlValid ? toggleConnection() : null"
/>
</li>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ toggleConnectionVerb }}
<span>
<i class="material-icons" v-if="!connectionState">sync</i>
<i class="material-icons" v-if="connectionState">sync_disabled</i>
</span>
</button>
</li>
<div>
<li>
<label for="connect" class="hide-on-small-screen">&nbsp;</label>
<button
:disabled="!urlValid"
id="connect"
name="connect"
@click="toggleConnection"
>
{{ toggleConnectionVerb }}
<span>
<i class="material-icons" v-if="!connectionState">sync</i>
<i class="material-icons" v-if="connectionState">sync_disabled</i>
</span>
</button>
</li>
</div>
</ul>
</pw-section>
@@ -65,20 +67,22 @@
@keyup.enter="connectionState ? sendMessage() : null"
/>
</li>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
Send
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
<div>
<li>
<label for="send" class="hide-on-small-screen">&nbsp;</label>
<button
id="send"
name="send"
:disabled="!connectionState"
@click="sendMessage"
>
Send
<span>
<i class="material-icons">send</i>
</span>
</button>
</li>
</div>
</ul>
</pw-section>
</div>
@@ -96,8 +100,9 @@ div.log {
&,
span {
font-size: 18px;
font-size: 16px;
font-family: "Roboto Mono", monospace;
font-weight: 400;
}
span {