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

refactor(ui): better rendering with Inter font

Browse Source
This commit is contained in:
liyasthomas
2021-07-26 01:33:32 +05:30
parent 397cab9032
commit 8debb65d89
86 changed files with 434 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/realtime/Log.vue
View File

@@ -13,10 +13,10 @@
justify-between
"
>
<label for="log" class="font-semibold text-xs py-2">{{ title }}</label>
<label for="log" class="font-semibold py-2">{{ title }}</label>
</div>
<div ref="log" name="log" class="realtime-log">
<span v-if="log">
<span v-if="log" class="space-y-2">
<span
v-for="(entry, index) in log"
:key="`entry-${index}`"
@@ -65,7 +65,7 @@ export default {
&,
span {
@apply font-mono;
@apply font-mono font-semibold;
@apply select-text;
}

14
components/realtime/Mqtt.vue
View File

@@ -1,8 +1,8 @@
<template>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="log" />
</AppSection>
@@ -48,10 +48,10 @@
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="!overflow-auto hide-scrollbar"
>
<AppSection label="messages">
<label for="pub_topic">{{ $t("mqtt_topic") }}</label>

14
components/realtime/Socketio.vue
View File

@@ -1,8 +1,8 @@
<template>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -59,7 +59,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection>
@@ -68,10 +68,10 @@
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="!overflow-auto hide-scrollbar"
>
<AppSection label="messages">
<label for="event_name">{{ $t("event_name") }}</label>

6
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template>
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="request">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
</div>
</AppSection>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<ul>
<li>

19
components/realtime/Websocket.vue
View File

@@ -1,8 +1,8 @@
<template>
<Splitpanes vertical :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" vertical>
<Pane class="!overflow-auto hide-scrollbar">
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="!overflow-auto hide-scrollbar">
<AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="flex-1 inline-flex">
<input
@@ -52,7 +52,7 @@
justify-between
"
>
<label class="font-semibold text-xs">
<label class="font-semibold">
{{ $t("protocols") }}
</label>
<div class="flex">
@@ -87,7 +87,6 @@
flex
font-semibold font-mono
flex-1
text-xs
py-2
px-4
focus:outline-none
@@ -132,7 +131,7 @@
</div>
</div>
</Pane>
<Pane class="overflow-auto hide-scrollbar">
<Pane class="!overflow-auto hide-scrollbar">
<AppSection label="response">
<RealtimeLog :title="$t('log')" :log="communication.log" />
</AppSection>
@@ -141,14 +140,14 @@
</Pane>
<Pane
v-if="RIGHT_SIDEBAR"
max-size="30"
max-size="35"
size="25"
min-size="20"
class="overflow-auto hide-scrollbar"
class="!overflow-auto hide-scrollbar"
>
<AppSection label="messages">
<div class="flex flex-col flex-1 p-4 inline-flex">
<label for="websocket-message" class="font-semibold text-xs pb-4">
<label for="websocket-message" class="font-semibold pb-4">
{{ $t("message") }}
</label>
<input