From 9b10a383a8eba70f0bdb2a48d3deb60659469ee9 Mon Sep 17 00:00:00 2001 From: Martin Adamko Date: Mon, 17 Jan 2022 11:58:48 +0100 Subject: [PATCH] Use position sticky on all required layout panels - Fixes overflowing toolbar issues - Fixes ignored bottom padding --- .../admin/src/styles/_globalOverrides.sass | 7 +- packages/admin/src/styles/index.sass | 4 +- .../src/components/Layout/LayoutChrome.sass | 23 ++-- .../ui/src/components/Layout/LayoutPage.sass | 27 ++--- .../ui/src/components/Layout/LayoutPage.tsx | 106 ++++++++++++------ .../ui/src/styles/components/titleBar.sass | 2 + 6 files changed, 100 insertions(+), 69 deletions(-) diff --git a/packages/admin/src/styles/_globalOverrides.sass b/packages/admin/src/styles/_globalOverrides.sass index 8cbfdfafdf..89cc09afcd 100644 --- a/packages/admin/src/styles/_globalOverrides.sass +++ b/packages/admin/src/styles/_globalOverrides.sass @@ -1,12 +1,17 @@ @import 'common' +html, body + margin: 0 + padding: 0 + body font-family: $font-family-base line-height: 1.5 - overflow-x: hidden margin: 0 padding: 0 font-smoothing: antialiased + @media (min-width: $breakpoint-min-medium) + width: fit-content -webkit-font-smoothing: antialiased h1, h2, h3, h4, h5, h6 diff --git a/packages/admin/src/styles/index.sass b/packages/admin/src/styles/index.sass index 7a6feffa51..1582b2591c 100644 --- a/packages/admin/src/styles/index.sass +++ b/packages/admin/src/styles/index.sass @@ -1,11 +1,11 @@ @import 'common' -@import 'globalOverrides' - @import 'theme' @import '../../../ui/src/index' +@import 'globalOverrides' + // ## Components // @import 'parts/*' @import 'parts/avatar' diff --git a/packages/ui/src/components/Layout/LayoutChrome.sass b/packages/ui/src/components/Layout/LayoutChrome.sass index c459f35047..8e2db807eb 100644 --- a/packages/ui/src/components/Layout/LayoutChrome.sass +++ b/packages/ui/src/components/Layout/LayoutChrome.sass @@ -1,13 +1,15 @@ @import '../../styles/common' .#{$cui-conf-globalPrefix}layout-chrome + $layout-chrome-bar-width-aspect: 0.333 + --layout-chrome-bar-width: #{100vw * $layout-chrome-bar-width-aspect} + align-items: stretch color: var(--cui-color--medium) display: flex flex-direction: column min-height: 100vh - $tablet-width: 0.33333 &-bar, &-body --cui-layout-chrome-padding-bottom: calc(var(--cui-padding-bottom) + var(--cui-edge-offset-bottom) + env(safe-area-inset-bottom, 0em)) @@ -25,16 +27,18 @@ --cui-layout-section-padding-left: calc(var(--cui-layout-page-padding-left) - var(--cui-edge-offset-left, 0em)) --cui-layout-section-padding-right: calc(var(--cui-layout-page-padding-right) - var(--cui-edge-offset-right, 0em)) --cui-layout-section-padding-top: var(--cui-layout-page-padding-top) - --cui-layout-section-gap: #{$cui-gap * 4} + --cui-layout-section-gap: calc(4 * var(--cui-gap)) &-bar background: var(--cui-background-color) display: flex flex-direction: column + height: 100vh + left: 0 max-height: 100vh position: sticky top: 0 - z-index: 1 + z-index: 3 &-bar-header display: flex flex-direction: row @@ -78,8 +82,9 @@ gap: calc(var(--cui-gap) * 2) @media (max-width: $breakpoint-max-medium) + --layout-chrome-bar-width: 0 &-bar - height: 100vh + max-width: 100vw &-body min-height: 100vh &.view-collapsed &-bar @@ -95,21 +100,15 @@ &-bar --cui-edge-offset-right: 0em background: linear-gradient(to right, var(--cui-background-color) 25%, var(--cui-background-color--below)) - width: 100% * $tablet-width + min-width: var(--layout-chrome-bar-width) &-bar-body padding-left: env(safe-area-inset-left, 0em) &-body --cui-layout-section-gap: #{$cui-gap * 8} - width: 100% - (100% * $tablet-width) display: flex flex-direction: column &-navigation-button display: none @media (min-width: $breakpoint-min-large) - &-bar - flex-shrink: 0 - width: unset - min-width: $breakpoint-min-large - $breakpoint-min-medium - &-body - width: calc(100% - #{$breakpoint-min-large * $tablet-width}) + --layout-chrome-bar-width: #{$breakpoint-min-large * $layout-chrome-bar-width-aspect} diff --git a/packages/ui/src/components/Layout/LayoutPage.sass b/packages/ui/src/components/Layout/LayoutPage.sass index 9206ff3642..2c5110317c 100644 --- a/packages/ui/src/components/Layout/LayoutPage.sass +++ b/packages/ui/src/components/Layout/LayoutPage.sass @@ -38,7 +38,6 @@ display: flex flex-direction: column margin-top: calc(-1 * var(--cui-control-border-width)) - overflow: visible &-title margin: 0 &-content @@ -54,30 +53,22 @@ margin-right: auto flex-basis: $breakpoint-min-medium @media (min-width: $breakpoint-min-xlarge) - height: 100vh - max-height: 100vh &-content-wrap flex-direction: row - overflow: hidden - &-content - border-right: 1px solid transparent - overflow-y: auto - &.is-overflowing - border-right-color: var(--cui-color--lower) &-aside - background-color: unset + background-color: var(--cui-background-color) + border-left: 1px solid transparent border-top: unset + bottom: 0 + height: calc(100vh - var(--cui-content-offset-top, 0)) margin-top: unset max-width: 50% overflow-y: auto position: sticky - top: 0 + right: 0 + top: var(--cui-content-offset-top, 0) + z-index: 1 &-content padding-left: var(--cui-layout-section-padding-left) - - -@media (min-width: $breakpoint-min-xlarge) - html - height: 100vh - margin: 0 - padding: 0 + .view-aside-divider > & + border-left-color: var(--cui-color--lower) diff --git a/packages/ui/src/components/Layout/LayoutPage.tsx b/packages/ui/src/components/Layout/LayoutPage.tsx index d64fe1774f..00cbb41d51 100644 --- a/packages/ui/src/components/Layout/LayoutPage.tsx +++ b/packages/ui/src/components/Layout/LayoutPage.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' -import { memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react' +import { CSSProperties, memo, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react' import { useClassNamePrefix } from '../../auxiliary' -import { toEnumClass, toStateClass, toThemeClass } from '../../utils' +import { toEnumClass, toThemeClass } from '../../utils' import { SectionTabs, useSectionTabsRegistration } from '../SectionTabs' import { Stack } from '../Stack' import { TitleBar, TitleBarProps } from '../TitleBar' @@ -10,41 +10,9 @@ import { ThemeScheme } from './Types' export const PageLayoutContent = ({ children }: { children: ReactNode }) => { const prefix = useClassNamePrefix() - const [isOverflowing, setIsOverflowing] = useState(false) - const contentRef = useRef(null) - - useEffect(() => { - if (!contentRef.current) { - return - } - - const contentRefCopy = contentRef.current - - const listener = () => { - const offsetWidth = Math.floor(contentRefCopy.offsetWidth ?? 0) - const scrollWidth = Math.floor(contentRefCopy.scrollWidth ?? 0) - const scrollLeft = Math.floor(contentRefCopy.scrollLeft ?? 0) - const scrollRight = scrollWidth - offsetWidth - scrollLeft - - const nextIsOverflowing = offsetWidth < scrollWidth && scrollRight > 1 - - setIsOverflowing(nextIsOverflowing) - } - - listener() - contentRefCopy.addEventListener('scroll', listener, { passive: true }) - - return () => { - contentRefCopy.removeEventListener('scroll', listener) - } - }, []) return
+ className={`${prefix}layout-page-content`}>
{children}
@@ -133,6 +101,65 @@ export const LayoutPage = memo(({ const themeContent = themeContentProp ?? themeContentContext const themeControls = themeControlsProp ?? themeControlsContext + const [contentOffsetTop, setContentOffsetTop] = useState(undefined) + const contentRef = useRef(null) + + useLayoutEffect(() => { + if (!contentRef.current) { + return + } + + const ref = contentRef.current + + const topOffsetHandler = () => { + const contentOffsetTop = ref.offsetTop + + setContentOffsetTop(contentOffsetTop) + } + + topOffsetHandler() + + window.addEventListener('resize', topOffsetHandler, { passive: true }) + + return () => { + window.removeEventListener('resize', topOffsetHandler) + } + }, []) + + const [showDivider, setShowDivider] = useState(false) + + useEffect(() => { + if (!document?.body?.parentElement) { + return + } + + const container = document.body.parentElement + + console.log(container) + + const scrollHandler = () => { + const visibleWidth = container.offsetWidth + const contentWidth = container.scrollWidth + const scrollLeft = container.scrollLeft + + console.log({ + visibleWidth, + contentWidth, + scrollLeft, + }) + + setShowDivider(contentWidth > visibleWidth && scrollLeft + visibleWidth < contentWidth) + } + + scrollHandler() + + window.addEventListener('scroll', scrollHandler, { passive: true }) + + return () => { + window.removeEventListener('scroll', scrollHandler) + } + }, []) + return
} navigation={navigation} actions={actions} headingProps={headingProps}> {title} } -
+
{children} diff --git a/packages/ui/src/styles/components/titleBar.sass b/packages/ui/src/styles/components/titleBar.sass index 35657d354d..4c071d092c 100644 --- a/packages/ui/src/styles/components/titleBar.sass +++ b/packages/ui/src/styles/components/titleBar.sass @@ -15,6 +15,8 @@ padding-top: var(--cui-padding-top) position: sticky top: 0 + left: var(--layout-chrome-bar-width, 0) + width: calc(100vw - var(--layout-chrome-bar-width, 0)) z-index: 2 &::after