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

⚡ Improving Lighthouse score

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-17 15:25:32 +05:30
parent 43e8f31f6a
commit a0fa933430
6 changed files with 82 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/styles.scss
View File

@@ -11,16 +11,17 @@ $responsiveWidth: 720px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.3);
border-radius: 8px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.5);
} }
::placeholder { ::placeholder {
color: var(--fg-color); color: var(--fg-color);
opacity: 0.3; opacity: 0.2;
} }
* { * {
@@ -91,7 +92,7 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 4px; margin: 4px;
padding: 8px 16px; padding: 0 16px;
border-radius: 8px; border-radius: 8px;
background-color: var(--ac-color); background-color: var(--ac-color);
color: var(--act-color); color: var(--act-color);
@@ -101,6 +102,8 @@ button {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
fill: var(--act-color); fill: var(--act-color);
height: 41px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.02);
span { span {
display: inline-flex; display: inline-flex;
@@ -187,7 +190,6 @@ pre {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
width: calc(100% - 8px);
background-color: var(--brd-color); background-color: var(--brd-color);
color: var(--fg-color); color: var(--fg-color);
font-size: 18px; font-size: 18px;
@@ -208,6 +210,7 @@ pre {
code { code {
height: 336px; height: 336px;
border-radius: 8px;
} }
.hljs, .hljs,
@@ -256,13 +259,13 @@ input[type="checkbox"] {
.disabled, .disabled,
[disabled] { [disabled] {
background-color: var(--err-color); background-color: var(--err-color);
color: #b2b2b2; color: var(--fg-color);
fill: #b2b2b2; fill: var(--fg-color);
cursor: default; cursor: default;
&.icon { &.icon {
color: #b2b2b2; color: var(--fg-color);
fill: #b2b2b2; fill: var(--fg-color);
} }
} }
@@ -451,8 +454,7 @@ input[type="radio"] + label {
} }
input[type="radio"]:checked + label { input[type="radio"]:checked + label {
color: var(--ac-color); border-color: var(--fg-color);
border-color: var(--ac-color);
} }
input[type="radio"]:checked + label + div.tab { input[type="radio"]:checked + label + div.tab {

6
assets/css/themes.scss
View File

@@ -11,13 +11,13 @@
// Background color // Background color
--bg-color: #282a36; --bg-color: #282a36;
// Auto-complete color // Auto-complete color
--atc-color: #3C4556; --atc-color: #20212b;
// Text color // Text color
--fg-color: #d0d1dc; --fg-color: #c4c6d4;
// Border color // Border color
--brd-color: #333545; --brd-color: #333545;
// Error color // Error color
--err-color: #3C4556; --err-color: #303341;
// Active color // Active color
--ac-color: #50fa7b; --ac-color: #50fa7b;
// Active text color // Active text color

4
components/history.vue
View File

@@ -22,14 +22,14 @@
</li> </li>
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)"> <button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)" aria-label="Delete">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/> <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
</svg> </svg>
</button> </button>
</li> </li>
<li> <li>
<button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)"> <button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)" aria-label="Edit">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/> <path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
</svg> </svg>

112
components/settings/swatch.vue
View File

@@ -1,68 +1,70 @@
<template> <template>
<div class="color" :data-color="color"> <div class="color" :data-color="color">
<span :style="{backgroundColor: color}" class="preview"> <span :style="{backgroundColor: color}" class="preview">
<svg v-if="active" class="activeTick" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z"/></svg> <svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
</span> <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
{{ name || color }} </svg>
</div> </span>
{{ name || color }}
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.color { .color {
display: inline-block; display: inline-flex;
vertical-align: middle; align-items: center;
justify-content: center;
padding: 0 8px;
margin: 4px;
background-color: var(--brd-color);
color: var(--fg-color);
border-radius: 8px;
cursor: pointer;
height: 41px;
padding: 8px 16px; &.active {
margin: 4px; background-color: var(--bg-dark-color);
background-color: rgba(93, 93, 93, 0.2);
border-radius: 8px;
cursor: pointer;
&.active {
background-color: rgba(93, 93, 93, 0.3);
}
.preview {
vertical-align: middle;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 100%;
margin-right: 8px;
position: relative;
.activeTick {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: white;
}
}
} }
.color.vibrant { .preview {
.preview .activeTick { vertical-align: middle;
fill: black; display: inline-block;
} border-radius: 100%;
margin-right: 8px;
padding: 16px;
position: relative;
.activeTick {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: #fff;
}
} }
}
.color.vibrant {
.preview .activeTick {
fill: #000;
}
}
</style> </style>
<script> <script>
export default { export default {
props: { props: {
'color': { 'color': {
type: String, type: String,
required: true required: true
}, },
'name': { 'name': {
type: String type: String
}, },
'active': {
'active': { type: Boolean,
type: Boolean, default: false
default: false }
}
}
} }
}
</script> </script>

12
pages/index.vue
View File

@@ -144,10 +144,10 @@
<div v-if="!rawInput"> <div v-if="!rawInput">
<ul v-for="(param, index) in bodyParams" :key="index"> <ul v-for="(param, index) in bodyParams" :key="index">
<li> <li>
<input :placeholder="'Key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus> <input :placeholder="'key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
</li> </li>
<li> <li>
<input :placeholder="'Value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState"> <input :placeholder="'value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
</li> </li>
<div> <div>
<li> <li>
@@ -283,10 +283,10 @@
</ul> </ul>
<ul v-for="(header, index) in headers" :key="index"> <ul v-for="(header, index) in headers" :key="index">
<li> <li>
<input :placeholder="'Header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus> <input :placeholder="'header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
</li> </li>
<li> <li>
<input :placeholder="'Value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState"> <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
</li> </li>
<div> <div>
<li> <li>
@@ -322,10 +322,10 @@
</ul> </ul>
<ul v-for="(param, index) in params" :key="index"> <ul v-for="(param, index) in params" :key="index">
<li> <li>
<input :placeholder="'Parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus> <input :placeholder="'parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus>
</li> </li>
<li> <li>
<input :placeholder="'Value '+(index+1)" :name="'value'+index" v-model="param.value"> <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="param.value">
</li> </li>
<div> <div>
<li> <li>

2
pages/websocket.vue
View File

@@ -64,7 +64,7 @@
padding: 8px 16px; padding: 8px 16px;
width: calc(100% - 8px); width: calc(100% - 8px);
border-radius: 8px; border-radius: 8px;
background-color: var(--bg-dark-color); background-color: var(--brd-color);
color: var(--fg-color); color: var(--fg-color);
height: 256px; height: 256px;
overflow: auto; overflow: auto;