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

⚡ 100/100 Lighthouse score

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-27 14:44:15 +05:30
parent a36b4207c8
commit abfaf24627
3 changed files with 34 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/styles.scss
View File

@@ -306,10 +306,6 @@ ol li {
justify-content: space-between; justify-content: space-between;
} }
.show-on-small-screen {
display: flex;
}
@media (max-width: $responsiveWidth) { @media (max-width: $responsiveWidth) {
header div { header div {
display: flex; display: flex;
@@ -335,10 +331,6 @@ ol li {
.hide-on-small-screen { .hide-on-small-screen {
display: none; display: none;
} }
.show-on-small-screen {
display: inline-flex;
}
} }
#installPWA { #installPWA {

32
pages/index.vue
View File

@@ -65,23 +65,21 @@
<label for="path">Path</label> <label for="path">Path</label>
<input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler"> <input @keyup.enter="isValidURL ? sendRequest() : null" id="path" name="path" v-model="path" @input="pathInputHandler">
</li> </li>
<div class="show-on-small-screen"> <li>
<li> <label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
<label class="hide-on-small-screen" for="copyRequest">&nbsp;</label> <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL">
<button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL"> <i class="material-icons">share</i>
<i class="material-icons">share</i> <span>Permalink</span>
<span>Permalink</span> </button>
</button> </li>
</li> <li>
<li> <label class="hide-on-small-screen" for="code">&nbsp;</label>
<label class="hide-on-small-screen" for="code">&nbsp;</label> <button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
<button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL"> <i class="material-icons" v-if="isHidden">visibility</i>
<i class="material-icons" v-if="isHidden">visibility</i> <i class="material-icons" v-if="!isHidden">visibility_off</i>
<i class="material-icons" v-if="!isHidden">visibility_off</i> <span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
<span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span> </button>
</button> </li>
</li>
</div>
<li> <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" class="show" id="send" ref="sendButton"> <button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">

42
pages/websocket.vue
View File

@@ -6,18 +6,16 @@
<label for="url">URL</label> <label for="url">URL</label>
<input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null"> <input id="url" type="url" :class="{ error: !urlValid }" v-model="url" @keyup.enter="urlValid ? toggleConnection() : null">
</li> </li>
<div> <li>
<li> <label for="connect" class="hide-on-small-screen">&nbsp;</label>
<label for="connect" class="hide-on-small-screen">&nbsp;</label> <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection"> {{ toggleConnectionVerb }}
{{ toggleConnectionVerb }} <span>
<span> <i class="material-icons" v-if="!connectionState">sync</i>
<i class="material-icons" v-if="!connectionState">sync</i> <i class="material-icons" v-if="connectionState">sync_disabled</i>
<i class="material-icons" v-if="connectionState">sync_disabled</i> </span>
</span> </button>
</button> </li>
</li>
</div>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Communication" id="response" ref="response"> <pw-section class="purple" label="Communication" id="response" ref="response">
@@ -37,17 +35,15 @@
<label for="message">Message</label> <label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null"> <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
</li> </li>
<div> <li>
<li> <label for="send" class="hide-on-small-screen">&nbsp;</label>
<label for="send" class="hide-on-small-screen">&nbsp;</label> <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage"> Send
Send <span>
<span> <i class="material-icons">send</i>
<i class="material-icons">send</i> </span>
</span> </button>
</button> </li>
</li>
</div>
</ul> </ul>
</pw-section> </pw-section>
</div> </div>