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

♿ Improving accessibility

Browse Source
This commit is contained in:
Liyas Thomas
2020-03-26 22:21:41 +05:30
parent ec7951bd93
commit 754a1d0f06
3 changed files with 162 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/styles.scss
View File

@@ -590,6 +590,7 @@ pre {
input { input {
text-transform: uppercase; text-transform: uppercase;
min-width: 128px;
} }
.trigger { .trigger {
@@ -690,8 +691,12 @@ ul li,
ol li { ol li {
display: inline-flex; display: inline-flex;
flex-flow: column nowrap; flex-flow: column nowrap;
flex-grow: 1; flex: 1;
justify-content: center; justify-content: center;
&.shrink {
flex-grow: 0;
}
} }
.flex-wrap { .flex-wrap {
@@ -714,7 +719,7 @@ ol li {
} }
.show-on-large-screen { .show-on-large-screen {
display: inline-flex; display: flex;
flex: 1; flex: 1;
} }
@@ -791,7 +796,7 @@ ol li {
z-index: 10001; z-index: 10001;
transform: translateX(-50%); transform: translateX(-50%);
box-shadow: 0 4px 24px rgba(black, 0.2); box-shadow: 0 4px 24px rgba(black, 0.2);
transition: all .2s ease-in-out; transition: all 0.2s ease-in-out;
} }
} }

25
components/layout/history.vue
View File

@@ -1,20 +1,11 @@
<template> <template>
<pw-section class="green" icon="history" :label="$t('history')" ref="history"> <pw-section class="green" icon="history" :label="$t('history')" ref="history">
<ul> <div class="show-on-large-screen">
<div class="show-on-large-screen"> <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
<li id="filter-history"> <button class="icon">
<input <i class="material-icons">search</i>
aria-label="Search" </button>
type="search" </div>
:placeholder="$t('search')"
v-model="filterText"
/>
</li>
<button class="icon">
<i class="material-icons">search</i>
</button>
</div>
</ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
:class="{ filled: filteredHistory.length }" :class="{ filled: filteredHistory.length }"
@@ -354,9 +345,9 @@ export default {
fb.currentUser !== null fb.currentUser !== null
? fb.currentHistory ? fb.currentHistory
: JSON.parse(window.localStorage.getItem("history")) || [] : JSON.parse(window.localStorage.getItem("history")) || []
return this.history.filter(entry => { return this.history.filter((entry) => {
const filterText = this.filterText.toLowerCase() const filterText = this.filterText.toLowerCase()
return Object.keys(entry).some(key => { return Object.keys(entry).some((key) => {
let value = entry[key] let value = entry[key]
value = typeof value !== "string" ? value.toString() : value value = typeof value !== "string" ? value.toString() : value
return value.toLowerCase().includes(filterText) return value.toLowerCase().includes(filterText)

296
pages/index.vue
View File

@@ -37,145 +37,143 @@
<pw-section class="blue" :label="$t('request')" ref="request"> <pw-section class="blue" :label="$t('request')" ref="request">
<ul> <ul>
<div> <li class="shrink">
<li> <label for="method">{{ $t("method") }}</label>
<label for="method">{{ $t("method") }}</label> <span class="select-wrapper">
<span class="select-wrapper"> <v-popover>
<v-popover> <input
<input id="method"
id="method" class="method"
class="method" v-if="!customMethod"
v-if="!customMethod" v-model="method"
v-model="method" readonly
readonly />
/> <input v-else v-model="method" placeholder="CUSTOM" />
<input v-else v-model="method" placeholder="CUSTOM" /> <template slot="popover">
<template slot="popover"> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'GET'
method = 'GET' "
" v-close-popover
v-close-popover >
> GET
GET </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'HEAD'
method = 'HEAD' "
" v-close-popover
v-close-popover >
> HEAD
HEAD </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'POST'
method = 'POST' "
" v-close-popover
v-close-popover >
> POST
POST </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'PUT'
method = 'PUT' "
" v-close-popover
v-close-popover >
> PUT
PUT </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'DELETE'
method = 'DELETE' "
" v-close-popover
v-close-popover >
> DELETE
DELETE </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'CONNECT'
method = 'CONNECT' "
" v-close-popover
v-close-popover >
> CONNECT
CONNECT </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'OPTIONS'
method = 'OPTIONS' "
" v-close-popover
v-close-popover >
> OPTIONS
OPTIONS </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'TRACE'
method = 'TRACE' "
" v-close-popover
v-close-popover >
> TRACE
TRACE </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = false
customMethod = false method = 'PATCH'
method = 'PATCH' "
" v-close-popover
v-close-popover >
> PATCH
PATCH </button>
</button> </div>
</div> <div>
<div> <button
<button class="icon"
class="icon" @click="
@click=" customMethod = true
customMethod = true method = 'CUSTOM'
method = 'CUSTOM' "
" v-close-popover
v-close-popover >
> CUSTOM
CUSTOM </button>
</button> </div>
</div> </template>
</template> </v-popover>
</v-popover> </span>
</span> </li>
</li>
</div>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
<input <input
@@ -189,17 +187,15 @@
@input="pathInputHandler" @input="pathInputHandler"
/> />
</li> </li>
<div> <li class="shrink">
<li> <label class="hide-on-small-screen" for="send">&nbsp;</label>
<label class="hide-on-small-screen" for="send">&nbsp;</label> <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
<button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton"> {{ $t("send") }}
{{ $t("send") }} <span>
<span> <i class="material-icons">send</i>
<i class="material-icons">send</i> </span>
</span> </button>
</button> </li>
</li>
</div>
</ul> </ul>
<div class="blue"> <div class="blue">
<label for="label">{{ $t("label") }}</label> <label for="label">{{ $t("label") }}</label>