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

4
components/history.vue
View File

@@ -22,14 +22,14 @@
</li>
<div class="show-on-small-screen">
<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">
<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>
</button>
</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">
<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>

112
components/settings/swatch.vue
View File

@@ -1,68 +1,70 @@
<template>
<div class="color" :data-color="color">
<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>
</span>
{{ name || color }}
</div>
<div class="color" :data-color="color">
<span :style="{backgroundColor: color}" class="preview">
<svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
</svg>
</span>
{{ name || color }}
</div>
</template>
<style lang="scss">
.color {
display: inline-block;
vertical-align: middle;
.color {
display: inline-flex;
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;
margin: 4px;
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;
}
}
&.active {
background-color: var(--bg-dark-color);
}
.color.vibrant {
.preview .activeTick {
fill: black;
}
.preview {
vertical-align: middle;
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>
<script>
export default {
props: {
'color': {
type: String,
required: true
},
'name': {
type: String
},
'active': {
type: Boolean,
default: false
}
}
export default {
props: {
'color': {
type: String,
required: true
},
'name': {
type: String
},
'active': {
type: Boolean,
default: false
}
}
}
</script>