Skip to content

Commit f20833e

Browse files
feat: scrolling
1 parent a21f024 commit f20833e

File tree

3 files changed

+59
-5
lines changed

3 files changed

+59
-5
lines changed

sites/public/src/components/browse/map/ListingsCombined.module.scss

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
@media (max-width: $screen-md) {
99
height: 100%;
10+
min-height: 0;
1011
}
1112

1213
.listings-map {
@@ -23,7 +24,8 @@
2324

2425
.listings-map-list-container {
2526
display: flex;
26-
height: 100%;
27+
flex: 1;
28+
min-height: 0;
2729
@media (max-width: $screen-md) {
2830
position: relative;
2931
display: block;
@@ -54,14 +56,17 @@
5456
display: block;
5557
z-index: 0;
5658
width: 100%;
57-
height: 100%;
59+
flex: 1;
60+
min-height: 0;
61+
overflow: hidden;
5862
}
5963
}
6064

6165
.listings-list {
6266
overflow-y: auto;
6367
width: 100%;
6468
display: block;
69+
min-height: 0;
6570

6671
@media (max-width: $screen-md) {
6772
display: block;
@@ -82,14 +87,28 @@
8287
display: block;
8388
position: static;
8489
z-index: 1;
85-
overflow-y: auto;
90+
flex: none;
91+
min-height: auto;
92+
overflow-y: visible;
8693
background-color: var(--background-color);
8794
}
8895
}
8996

97+
.listings-map-list-container-list-only {
98+
@media (max-width: $screen-md) {
99+
display: flex;
100+
flex-direction: column;
101+
flex: 1;
102+
min-height: 0;
103+
overflow-y: auto;
104+
-webkit-overflow-scrolling: touch;
105+
}
106+
}
107+
90108
.listings-outer-container {
91109
background-color: var(--seeds-color-white);
92110
overflow-y: auto;
111+
min-height: 0;
93112
width: var(--listings-list-width);
94113
@media (max-width: $screen-lg) {
95114
width: 55%;

sites/public/src/components/browse/map/ListingsSearch.module.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@
1515
--line-color: var(--seeds-color-gray-650);
1616

1717
position: absolute;
18+
width: 100%;
19+
height: var(--listings-component-height);
20+
overflow: hidden;
1821

1922
@media (max-width: $screen-md) {
20-
height: 100%;
23+
height: var(--listings-component-height-mobile);
2124
display: flex;
2225
flex-flow: column;
2326
}

sites/public/src/components/browse/map/ListingsSearchCombined.tsx

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
5656
const [isLoading, setIsLoading] = useState(true)
5757
const [isFirstBoundsLoad, setIsFirstBoundsLoad] = useState<boolean>(true)
5858
const hasCompletedInitialListingsCallRef = useRef(false)
59+
const listingsVarsRef = useRef<HTMLDivElement>(null)
5960

6061
const [searchFilter] = useState(
6162
parseSearchString(props.searchString, {
@@ -94,6 +95,37 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
9495

9596
const map = useMap()
9697

98+
useEffect(() => {
99+
const listingsVarsElement = listingsVarsRef.current
100+
if (!listingsVarsElement) return
101+
102+
const mainNavigation = document.querySelector('nav[aria-label="Main"]')
103+
const siteHeader = mainNavigation?.closest("header")
104+
105+
const updateHeaderOffsets = () => {
106+
const topOffset = Math.max(0, Math.round(listingsVarsElement.getBoundingClientRect().top))
107+
const cssOffsetValue = `${topOffset}px`
108+
109+
listingsVarsElement.style.setProperty("--desktop-header-offset", cssOffsetValue)
110+
listingsVarsElement.style.setProperty("--mobile-header-offset", cssOffsetValue)
111+
}
112+
113+
updateHeaderOffsets()
114+
window.addEventListener("resize", updateHeaderOffsets)
115+
116+
const resizeObserver = new ResizeObserver(updateHeaderOffsets)
117+
resizeObserver.observe(listingsVarsElement)
118+
119+
if (siteHeader) {
120+
resizeObserver.observe(siteHeader)
121+
}
122+
123+
return () => {
124+
resizeObserver.disconnect()
125+
window.removeEventListener("resize", updateHeaderOffsets)
126+
}
127+
}, [])
128+
97129
const search = async (page: number, changingFilter?: boolean) => {
98130
// If a user pans over empty space, reset the listings to empty instead of refetching
99131
if (isDesktop === undefined) return
@@ -326,7 +358,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
326358
}
327359

328360
return (
329-
<div className={styles["listings-vars"]}>
361+
<div className={styles["listings-vars"]} ref={listingsVarsRef}>
330362
<FilterDrawer
331363
isOpen={isFilterDrawerOpen}
332364
onClose={onDrawerClose}

0 commit comments

Comments
 (0)