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

fix: broken sticky sections on font size

Browse Source
This commit is contained in:
liyasthomas
2021-08-04 01:00:06 +05:30
parent d0c0a543cf
commit b03565a816
27 changed files with 128 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/scss/styles.scss
View File

@@ -72,7 +72,7 @@ body {
}
.material-icons {
font-size: 1rem !important;
font-size: 1rem;
}
.svg-icons {
@@ -144,6 +144,11 @@ a {
}
}
[interactive] > div {
@apply flex;
@apply h-full;
}
.tippy-content > div {
@apply flex flex-col;
@apply max-h-48;
@@ -215,11 +220,13 @@ pre.ace_editor {
&::after {
@apply absolute;
@apply inline-block;
@apply flex;
@apply inset-y-0;
@apply items-center;
@apply justify-center;
@apply pointer-events-none;
@apply font-icon;
@apply text-secondaryLight;
@apply top-2.5;
@apply right-3;
content: "\e313";

42
assets/scss/themes.scss
View File

@@ -303,6 +303,20 @@
--font-size: 0.75rem;
// Line height
--line-height: 1rem;
// Upper primary sticky fold
--upper-primary-sticky-fold: 4.125rem;
// Upper secondary sticky fold
--upper-secondary-sticky-fold: 6.125rem;
// Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 8.125rem;
// Lower primary sticky fold
--lower-primary-sticky-fold: 3rem;
// Lower secondary sticky fold
--lower-secondary-sticky-fold: 5rem;
// Sidebar primary sticky fold
--sidebar-primary-sticky-fold: 2rem;
// Sidebar secondary sticky fold
--sidebar-secondary-sticky-fold: 4rem;
}
@mixin fontMedium {
@@ -310,6 +324,20 @@
--font-size: 0.875rem;
// Line height
--line-height: 1.25rem;
// Upper primary sticky fold
--upper-primary-sticky-fold: 4.375rem;
// Upper secondary sticky fold
--upper-secondary-sticky-fold: 6.625rem;
// Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 8.875rem;
// Lower primary sticky fold
--lower-primary-sticky-fold: 3.25rem;
// Lower secondary sticky fold
--lower-secondary-sticky-fold: 5.5rem;
// Sidebar primary sticky fold
--sidebar-primary-sticky-fold: 2.25rem;
// Sidebar secondary sticky fold
--sidebar-secondary-sticky-fold: 4.5rem;
}
@mixin fontLarge {
@@ -317,6 +345,20 @@
--font-size: 1rem;
// Line height
--line-height: 1.5rem;
// Upper primary sticky fold
--upper-primary-sticky-fold: 4.625rem;
// Upper secondary sticky fold
--upper-secondary-sticky-fold: 7.125rem;
// Upper tertiary sticky fold
--upper-tertiary-sticky-fold: 9.625rem;
// Lower primary sticky fold
--lower-primary-sticky-fold: 3.5rem;
// Lower secondary sticky fold
--lower-secondary-sticky-fold: 6rem;
// Sidebar primary sticky fold
--sidebar-primary-sticky-fold: 2.5rem;
// Sidebar secondary sticky fold
--sidebar-secondary-sticky-fold: 5rem;
}
:root[data-font-size="xs"] {

2
components/collections/graphql/index.vue
View File

@@ -4,7 +4,7 @@
:class="{ 'rounded border border-divider': savingMode }"
>
<div
class="flex flex-col top-8 z-10 sticky"
class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky"
:class="{ 'bg-primary': !savingMode }"
>
<div v-if="showCollActions" class="search-wrapper">

2
components/collections/index.vue
View File

@@ -5,7 +5,7 @@
>
<div
class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
:class="{ '!top-8': !saveRequest && !doc }"
:class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
>
<div v-if="!saveRequest" class="search-wrapper">
<input

11
components/environments/index.vue
View File

@@ -1,6 +1,15 @@
<template>
<AppSection label="environments">
<div class="bg-primary rounded-t flex flex-col top-8 z-10 sticky">
<div
class="
bg-primary
rounded-t
flex flex-col
top-sidebarPrimaryStickyFold
z-10
sticky
"
>
<div class="select-wrapper">
<select
v-model="selectedEnvironmentIndex"

2
components/history/index.vue
View File

@@ -5,7 +5,7 @@
bg-primaryLight
border-b border-dividerLight
flex
top-8
top-sidebarPrimaryStickyFold
z-10
sticky
"

2
components/http/BodyParameters.vue
View File

@@ -6,7 +6,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-24
top-upperSecondaryStickyFold
z-10
sticky
items-center

2
components/http/Headers.vue
View File

@@ -6,7 +6,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-24
top-upperSecondaryStickyFold
z-10
sticky
items-center

2
components/http/Parameters.vue
View File

@@ -5,8 +5,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
top-24
z-10
sticky
items-center

2
components/http/PreRequestScript.vue
View File

@@ -6,7 +6,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-24
top-upperSecondaryStickyFold
z-10
sticky
items-center

2
components/http/RawBody.vue
View File

@@ -6,7 +6,7 @@
border-b border-dividerLight
flex flex-1
pl-4
top-24
top-upperSecondaryStickyFold
z-10
sticky
items-center

15
components/http/Request.vue
View File

@@ -20,9 +20,8 @@
cursor-pointer
flex
font-semibold font-mono
h-8
text-secondaryDark
py-1
py-2
px-4
transition
w-28
@@ -75,7 +74,7 @@
font-semibold font-mono
flex-1
text-secondaryDark
py-1
py-2
px-4
transition
truncate
@@ -106,7 +105,11 @@
arrow
>
<template #trigger>
<ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
<ButtonPrimary
class="rounded-l-none"
outline
icon="keyboard_arrow_down"
/>
</template>
<SmartItem
:label="$t('import.curl')"
@@ -136,7 +139,7 @@
</tippy>
</span>
<ButtonSecondary
class="rounded-r-none h-8 ml-2"
class="rounded-r-none ml-2"
:label="$t('request.save')"
:shortcut="[getSpecialKey(), 'S']"
outline
@@ -155,7 +158,7 @@
<ButtonSecondary
icon="keyboard_arrow_down"
outline
class="rounded-l-none h-8"
class="rounded-l-none"
/>
</template>
<input

6
components/http/Tests.vue
View File

@@ -1,13 +1,13 @@
<template>
<SmartTabs styles="sticky top-24 z-20">
<SmartTabs styles="sticky top-upperSecondaryStickyFold z-20">
<SmartTab id="script" :label="$t('test.script')" :selected="true">
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
top-upperTertiaryStickyFold
pl-4
top-32
z-10
sticky
items-center
@@ -54,8 +54,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperTertiaryStickyFold
pl-4
top-32
z-10
sticky
items-center

2
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,5 +1,5 @@
<template>
<SmartTabs styles="sticky z-10 top-12">
<SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
<SmartTab
v-for="(lens, index) in validLenses"
:id="lens.lensName"

2
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -5,7 +5,7 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-20
top-lowerSecondaryStickyFold
z-10
sticky
items-center

2
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -5,7 +5,7 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-20
top-lowerSecondaryStickyFold
z-10
sticky
items-center

2
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -5,7 +5,7 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-20
top-lowerSecondaryStickyFold
z-10
sticky
items-center

2
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -5,7 +5,7 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-20
top-lowerSecondaryStickyFold
z-10
sticky
items-center

2
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -5,7 +5,7 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-20
top-lowerSecondaryStickyFold
z-10
sticky
items-center

4
components/realtime/Mqtt.vue
View File

@@ -18,11 +18,11 @@
font-semibold font-mono
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
focus:border-accent focus:outline-none
"
:placeholder="$t('url')"
/>

8
components/realtime/Socketio.vue
View File

@@ -21,11 +21,11 @@
flex-1
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
focus:border-accent focus:outline-none
"
:placeholder="$t('url')"
@keyup.enter="urlValid ? toggleConnection() : null"
@@ -41,11 +41,11 @@
flex-1
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
focus:border-accent focus:outline-none
"
spellcheck="false"
/>

2
components/realtime/Sse.vue
View File

@@ -16,7 +16,7 @@
font-semibold font-mono
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate

6
components/realtime/Websocket.vue
View File

@@ -16,11 +16,11 @@
font-semibold font-mono
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
focus:border-accent focus:outline-none
"
type="url"
spellcheck="false"
@@ -45,8 +45,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperPrimaryStickyFold
pl-4
top-16
z-10
sticky
items-center

4
components/smart/FontSizePicker.vue
View File

@@ -18,13 +18,9 @@
:label="`${fontSizes.find(({ code }) => code == active.code).name}`"
/>
</template>
<!-- text-xs -->
<!-- text-sm -->
<!-- text-base -->
<SmartItem
v-for="(size, index) in fontSizes"
:key="`size-${index}`"
:class="`text-${size.code}`"
:label="size.name"
@click.native="
setActiveFont(size)

32
pages/graphql.vue
View File

@@ -18,11 +18,11 @@
font-semibold font-mono
text-secondaryDark
w-full
py-1
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
focus:border-accent focus:outline-none
"
:placeholder="$t('url')"
@keyup.enter="onPollSchemaClick()"
@@ -36,7 +36,7 @@
/>
</div>
</div>
<SmartTabs styles="sticky top-16 z-10">
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
<SmartTab :id="'query'" :label="$t('query')" :selected="true">
<AppSection label="query">
<div
@@ -44,8 +44,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
top-24
z-10
sticky
items-center
@@ -111,8 +111,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
top-24
z-10
sticky
items-center
@@ -162,8 +162,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-upperSecondaryStickyFold
pl-4
top-24
z-10
sticky
items-center
@@ -209,7 +209,7 @@
flex
font-semibold font-mono
flex-1
py-1
py-2
px-4
focus:outline-none
"
@@ -226,7 +226,7 @@
flex
font-semibold font-mono
w-full
py-1
py-2
px-4
focus:outline-none
"
@@ -385,7 +385,15 @@
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
<div
class="
bg-primaryLight
flex flex-col
top-sidebarPrimaryStickyFold
z-10
sticky
"
>
<div class="search-wrapper">
<input
v-model="graphqlFieldsFilterText"
@@ -399,8 +407,8 @@
py-2
pr-2
pl-9
focus:outline-none
truncate
focus:outline-none
"
/>
</div>
@@ -408,7 +416,7 @@
<SmartTabs
ref="gqlTabs"
styles="
border-t border-dividerLight sticky z-8 top-16"
border-t border-dividerLight sticky z-8 top-sidebarSecondaryStickyFold"
>
<div class="gqlTabs">
<SmartTab
@@ -520,8 +528,8 @@
bg-primary
border-b border-dividerLight
flex flex-1
top-sidebarPrimaryStickyFold
pl-4
top-8
z-10
sticky
items-center

2
pages/index.vue
View File

@@ -4,7 +4,7 @@
<Splitpanes :dbl-click-splitter="false" horizontal>
<Pane class="hide-scrollbar !overflow-auto">
<HttpRequest />
<SmartTabs styles="sticky top-16 z-10">
<SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
<SmartTab
:id="'params'"
:label="$t('parameters')"

9
windi.config.js
View File

@@ -6,6 +6,15 @@ export default defineConfig({
center: true,
},
extend: {
inset: {
upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
sidebarSecondaryStickyFold: "var(--sidebar-secondary-sticky-fold)",
},
colors: {
primary: "var(--primary-color)",
primaryLight: "var(--primary-light-color)",