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

chore: minor ui improvements

Browse Source
This commit is contained in:
Liyas Thomas
2022-11-29 13:50:58 +05:30
parent 6141073137
commit 237455ab21
49 changed files with 148 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-app/src/components/graphql/Authorization.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1">
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<span class="flex items-center">
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("authorization.type") }}
</label>
<tippy
@@ -224,7 +224,7 @@
</div>
</div>
<div
class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
>
<div class="pb-2 text-secondaryLight">
{{ t("helpers.authorization") }}

14
packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
View File

@@ -2,7 +2,7 @@
<div class="flex flex-col flex-1 h-full">
<SmartTabs
v-model="selectedOptionTab"
styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
render-inactive-tabs
>
<SmartTab
@@ -11,9 +11,9 @@
:indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
>
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
>
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("request.query") }}
</label>
<div class="flex">
@@ -79,9 +79,9 @@
:indicator="variableString && variableString.length > 0 ? true : false"
>
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("request.variables") }}
</label>
<div class="flex">
@@ -129,9 +129,9 @@
:info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
>
<div
class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
>
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("tab.headers") }}
</label>
<div class="flex">

4
packages/hoppscotch-app/src/components/graphql/Response.vue
View File

@@ -9,9 +9,9 @@
</div>
<div v-else-if="responseString" class="flex flex-col flex-1">
<div
class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
>
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("response.title") }}
</label>
<div class="flex items-center">

10
packages/hoppscotch-app/src/components/graphql/Sidebar.vue
View File

@@ -1,7 +1,7 @@
<template>
<SmartTabs
v-model="selectedNavigationTab"
styles="sticky bg-primary z-10 top-0"
styles="sticky overflow-x-auto bg-primary z-10 top-0"
vertical
render-inactive-tabs
>
@@ -40,7 +40,7 @@
</span>
</div>
<div v-else>
<div class="sticky top-0 z-10 flex bg-primary">
<div class="sticky top-0 z-10 flex overflow-x-auto bg-primary">
<input
v-model="graphqlFieldsFilterText"
type="search"
@@ -60,7 +60,7 @@
</div>
<SmartTabs
v-model="selectedGqlTab"
styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto z-10 top-sidebarPrimaryStickyFold"
render-inactive-tabs
>
<SmartTab
@@ -127,9 +127,9 @@
<SmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
<div
v-if="schemaString"
class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
>
<label class="font-semibold text-secondaryLight">
<label class="font-semibold truncate text-secondaryLight">
{{ t("graphql.schema") }}
</label>
<div class="flex">