From 9f5a9da1658674702edbf35e125786599c074980 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 19 Sep 2023 19:06:21 +0530 Subject: [PATCH 1/7] fix: set content overflows to enable scrollbar for main content instead of whole page --- packages/ui/src/components/va-layout/VaLayout.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue index a7b01f1c19..5d1c37ce14 100644 --- a/packages/ui/src/components/va-layout/VaLayout.vue +++ b/packages/ui/src/components/va-layout/VaLayout.vue @@ -117,9 +117,11 @@ export default defineComponent({ width: 100vw; &__area { - @include va-scroll(); + @include va-scroll(var(--va-primary)); &--content { + overflow-x: visible; + overflow-y: auto; grid-area: content; z-index: 0; // Make it possible for content to be smaller than the layout From b79e24f963107681a6a32821c3753d9d7659baf9 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 19 Sep 2023 19:13:08 +0530 Subject: [PATCH 2/7] refactor: remove commented code --- packages/docs/layouts/default.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/docs/layouts/default.vue b/packages/docs/layouts/default.vue index 3f8a1de837..823a6110c8 100644 --- a/packages/docs/layouts/default.vue +++ b/packages/docs/layouts/default.vue @@ -119,8 +119,6 @@ html { display: flex; justify-content: center; background: var(--va-background-primary); - - // @include va-scroll(var(--va-primary)); } &__page-content { From 7ca61e53d33bb2e87d0211e52b52cf75716bae58 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 19 Sep 2023 19:13:38 +0530 Subject: [PATCH 3/7] fix: use scrollIntoView instead of scrollTop attribute --- packages/docs/composables/useDocsScroll.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/composables/useDocsScroll.ts b/packages/docs/composables/useDocsScroll.ts index 7d198160b2..e48834380d 100644 --- a/packages/docs/composables/useDocsScroll.ts +++ b/packages/docs/composables/useDocsScroll.ts @@ -6,7 +6,7 @@ export const useDocsScroll = () => { const pageContent = document.querySelector('.docs-layout__main-content') if (pageContent) { - pageContent.scrollTop = 0 + pageContent.scrollIntoView(true); } } From 4c3431edf2dcd09261e09dd1ded00e4e7078a0a1 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 19 Sep 2023 19:15:40 +0530 Subject: [PATCH 4/7] hack: use scroll behaviour `auto` instead of `smooth` for some reason, the scroll into view on click happens in UI after at least 2 clicks, if the behaviour is set to smooth. may be set a timeout of 100 ms and wait for the browser to render the contents before scroll? :thinking: --- packages/docs/composables/useDocsScroll.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/composables/useDocsScroll.ts b/packages/docs/composables/useDocsScroll.ts index e48834380d..d6ff9316ae 100644 --- a/packages/docs/composables/useDocsScroll.ts +++ b/packages/docs/composables/useDocsScroll.ts @@ -15,7 +15,7 @@ export const useDocsScroll = () => { if (typeof document === 'undefined') { return } const el = document.querySelector(route.hash) - el?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }) + el?.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' }) } else { scrollTop() } From 194ac268e06d7d3dbadb377045889ead9c25a579 Mon Sep 17 00:00:00 2001 From: Yauheni Prakopchyk Date: Thu, 21 Sep 2023 15:18:12 +0400 Subject: [PATCH 5/7] minor --- packages/docs/page-config/ui-elements/avatar/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/docs/page-config/ui-elements/avatar/index.ts b/packages/docs/page-config/ui-elements/avatar/index.ts index 1dafc0e33c..26a035c536 100644 --- a/packages/docs/page-config/ui-elements/avatar/index.ts +++ b/packages/docs/page-config/ui-elements/avatar/index.ts @@ -11,7 +11,8 @@ export default definePageConfig({ block.subtitle("Examples"), block.example("Default", { - title: 'By default `va-avatar` is displayed as a circle container.' + title: 'Default', + description: 'By default `va-avatar` is displayed as a circle container.' }), block.example("WithImage", { From 4d92f5283cf24ed4efd208a1c3c27a8a3e5e6c59 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Tue, 31 Oct 2023 16:03:38 +0200 Subject: [PATCH 6/7] fix(docs): anchor position on scroll --- packages/docs/composables/useDocsScroll.ts | 7 +------ .../modules/page-config/blocks/shared/anchor/Anchor.vue | 5 +++-- packages/ui/src/components/va-layout/VaLayout.vue | 4 +--- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/docs/composables/useDocsScroll.ts b/packages/docs/composables/useDocsScroll.ts index d6ff9316ae..4758b48709 100644 --- a/packages/docs/composables/useDocsScroll.ts +++ b/packages/docs/composables/useDocsScroll.ts @@ -11,12 +11,7 @@ export const useDocsScroll = () => { } const scrollToElement = () => { - if (route.hash) { - if (typeof document === 'undefined') { return } - const el = document.querySelector(route.hash) - - el?.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' }) - } else { + if (!route.hash) { scrollTop() } } diff --git a/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue b/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue index 166d0d6d10..afc3621958 100644 --- a/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue +++ b/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue @@ -48,11 +48,12 @@ export default defineComponent({ opacity: 0; font-size: 95%; transition: opacity 0.1s ease-in-out; - + scroll-margin-top: 200px; + &:focus { opacity: 1; } - + &--force-show { opacity: 1; } diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue index d53ca0c270..578b8bb397 100644 --- a/packages/ui/src/components/va-layout/VaLayout.vue +++ b/packages/ui/src/components/va-layout/VaLayout.vue @@ -115,11 +115,9 @@ export default defineComponent({ max-height: 100%; &__area { - @include va-scroll(var(--va-primary)); + @include va-scroll(); &--content { - overflow-x: visible; - overflow-y: auto; grid-area: content; z-index: 0; // Make it possible for content to be smaller than the layout From 0bc332ea08e37d2086c6937ed4f033dff1c2d4fe Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Tue, 31 Oct 2023 16:16:38 +0200 Subject: [PATCH 7/7] fix(layout): prevent overflow when scrolling to anchor --- .../page-config/blocks/shared/anchor/Anchor.vue | 1 - packages/ui/src/components/va-layout/VaLayout.vue | 11 ++++++++++- packages/ui/src/components/va-layout/_variables.scss | 1 + .../ui/src/components/va-layout/hooks/useLayout.ts | 6 ++++++ 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue b/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue index afc3621958..04eb8201aa 100644 --- a/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue +++ b/packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue @@ -48,7 +48,6 @@ export default defineComponent({ opacity: 0; font-size: 95%; transition: opacity 0.1s ease-in-out; - scroll-margin-top: 200px; &:focus { opacity: 1; diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue index 578b8bb397..723a293ca2 100644 --- a/packages/ui/src/components/va-layout/VaLayout.vue +++ b/packages/ui/src/components/va-layout/VaLayout.vue @@ -53,7 +53,7 @@ export default defineComponent({ components: { VaLayoutArea }, setup (props, { slots }) { - useLayout(props) + const { paddings } = useLayout(props) const doDisableScroll = computed(() => { return !props.allowBodyScrollOnOverlay && areaNames.some((area) => props[area]?.overlay) @@ -94,6 +94,7 @@ export default defineComponent({ .filter(Boolean) .join(' ') }), + paddings, } }, }) @@ -123,6 +124,14 @@ export default defineComponent({ // Make it possible for content to be smaller than the layout min-width: 0; min-height: 0; + + // When scroll anchor is present in content, there might be overflow, so we add scroll margins + [id] { + scroll-margin-top: calc(v-bind("paddings.top + 'px'") + var(--va-layout-scroll-padding)); + scroll-margin-bottom: calc(v-bind("paddings.bottom + 'px'") + var(--va-layout-scroll-padding)); + scroll-margin-left: calc(v-bind("paddings.left + 'px'") + var(--va-layout-scroll-padding)); + scroll-margin-right: calc(v-bind("paddings.right + 'px'") + var(--va-layout-scroll-padding)); + } } } } diff --git a/packages/ui/src/components/va-layout/_variables.scss b/packages/ui/src/components/va-layout/_variables.scss index cfe7d9b1bd..c0999b1400 100644 --- a/packages/ui/src/components/va-layout/_variables.scss +++ b/packages/ui/src/components/va-layout/_variables.scss @@ -1,4 +1,5 @@ :root, :host { --va-layout-overlay-color: rgba(0, 0, 0, 0.5); + --va-layout-scroll-padding: 1rem; } diff --git a/packages/ui/src/components/va-layout/hooks/useLayout.ts b/packages/ui/src/components/va-layout/hooks/useLayout.ts index db76809e32..c3b4722b1c 100644 --- a/packages/ui/src/components/va-layout/hooks/useLayout.ts +++ b/packages/ui/src/components/va-layout/hooks/useLayout.ts @@ -74,6 +74,12 @@ export const useLayout = (props: ExtractPropTypes) => { paddings, orders, }) + + return { + paddings, + orders, + items, + } } export const useFixedLayoutChild = (area: AreaName, sizes: Ref) => {