feat: provide and consume scroll offsets

This commit is contained in:
Paul Makles
2021-12-30 18:15:31 +00:00
parent 52d4de001d
commit ac9d175298
17 changed files with 113 additions and 97 deletions

View File

@@ -102,7 +102,7 @@ export function GenericSettings({
/>
</Helmet>
{isTouchscreenDevice && (
<Header placement="primary">
<Header placement="primary" transparent>
{typeof page === "undefined" ? (
<>
{showExitButton && (
@@ -168,6 +168,9 @@ export function GenericSettings({
<div className={styles.content}>
<div
className={styles.scrollbox}
data-scroll-offset={
isTouchscreenDevice ? "with-padding" : undefined
}
ref={(ref) => {
// Force scroll to top if page changes.
if (ref) {

View File

@@ -43,20 +43,13 @@
background: var(--primary-background);
}
.scrollbox {
&::-webkit-scrollbar-thumb {
min-height: 150px;
border-top: 56px solid transparent;
//border-bottom: var(--bottom-navigation-height) solid transparent;
}
}
/* Sidebar */
.sidebar {
overflow-y: auto;
.container {
padding: 76px 8px calc(var(--bottom-navigation-height) + 30px);
padding: calc(var(--header-height) + 4px) 8px
calc(var(--bottom-navigation-height) + 30px);
min-width: 218px;
}