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

refactor: improve ui consistency

Browse Source
This commit is contained in:
liyasthomas
2022-03-21 18:57:23 +05:30
parent 8f96a5f5db
commit bd22541d94
9 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-app/components/app/Footer.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="bg-primary">
<div class="flex justify-between">
<div>
<div class="flex justify-between bg-primary">
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -166,7 +166,7 @@
v-tippy="{ theme: 'tooltip' }"
:title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
svg="columns"
class="transform hidden sm:inline"
class="hidden transform sm:inline"
:class="{ 'rotate-90': !COLUMN_LAYOUT }"
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
/>

3
packages/hoppscotch-app/components/app/Sidenav.vue
View File

@@ -1,6 +1,6 @@
<template>
<aside class="flex justify-between h-full md:flex-col">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
<NuxtLink
v-for="(navigation, index) in primaryNavigation"
:key="`navigation-${index}`"
@@ -71,7 +71,6 @@ const primaryNavigation = [
@apply flex flex-col flex-1;
@apply items-center;
@apply justify-center;
@apply bg-primary;
@apply hover:(bg-primaryDark text-secondaryDark);
@apply focus-visible:text-secondaryDark;

12
packages/hoppscotch-app/components/http/Authorization.vue
View File

@@ -4,9 +4,9 @@
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">{{
$t("authorization.type")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ $t("authorization.type") }}
</label>
<tippy
ref="authTypeOptions"
interactive
@@ -185,9 +185,9 @@
<SmartEnvInput v-model="apiValue" placeholder="Value" />
</div>
<div class="flex items-center border-b border-dividerLight">
<label class="ml-4 text-secondaryLight">{{
$t("authorization.pass_key_by")
}}</label>
<label class="ml-4 text-secondaryLight">
{{ $t("authorization.pass_key_by") }}
</label>
<tippy
ref="addToOptions"
interactive

6
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -3,9 +3,9 @@
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">{{
t("request.header_list")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ t("request.header_list") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

6
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -3,9 +3,9 @@
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">{{
t("preRequest.javascript_code")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ t("preRequest.javascript_code") }}
</label>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"

2
packages/hoppscotch-app/components/http/Request.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar"
class="sticky top-0 z-10 flex-none p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary hide-scrollbar"
>
<div
class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"

6
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -3,9 +3,9 @@
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">{{
t("response.body")
}}</label>
<label class="font-semibold text-secondaryLight">
{{ t("response.body") }}
</label>
<div class="flex">
<ButtonSecondary
v-if="response.body"