From 9320f43efabce92c901c35aa130b8ff2a828a297 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Mon, 31 Mar 2025 14:39:23 -0600 Subject: [PATCH 1/3] add padding bottom to avoid overlap with banners --- .../__snapshots__/routes.spec.tsx.snap | 8 +++++++ .../content/components/Page/PageToasts.tsx | 24 +++++++++++++++++-- .../__snapshots__/PageToasts.spec.tsx.snap | 24 +++++++++++++++++++ .../__snapshots__/Content.spec.tsx.snap | 16 +++++++++++++ src/app/content/components/constants.ts | 4 ++++ 5 files changed, 74 insertions(+), 2 deletions(-) diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap index 4624695795..c86ceeb8fc 100644 --- a/src/app/content/__snapshots__/routes.spec.tsx.snap +++ b/src/app/content/__snapshots__/routes.spec.tsx.snap @@ -543,6 +543,7 @@ Array [ overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 0; } .c3:focus-within { @@ -722,6 +723,13 @@ Array [ left: 0; z-index: 21; top: 11.3rem; + padding-bottom: 0; + } +} + +@media screen and (max-width:50em) { + .c1 { + padding-bottom: 0; } } diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 640a5a1ecf..06aac1cbaf 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -5,6 +5,9 @@ import { bookBannerDesktopMiniHeight, bookBannerMobileMiniHeight, contentWrapperMaxWidth, + toastHeightMediumRes, + toastHeightRes, + toastHeightSmallRes, toolbarMobileSearchWrapperHeight, topbarDesktopHeight, topbarMobileHeight, @@ -18,7 +21,7 @@ import { contentWrapperAndNavWidthBreakpoint, contentWrapperWidthBreakpoint } fr import { ToastProps } from '../../../notifications/components/ToastNotifications/Toast'; export const desktopSearchFailureTop = bookBannerDesktopMiniHeight + topbarDesktopHeight; -export const getMobileSearchFailureTop = ({mobileToolbarOpen}: {mobileToolbarOpen: boolean}) => mobileToolbarOpen +export const getMobileSearchFailureTop = ({ mobileToolbarOpen }: { mobileToolbarOpen: boolean }) => mobileToolbarOpen ? bookBannerMobileMiniHeight + topbarMobileHeight + toolbarMobileSearchWrapperHeight : bookBannerMobileMiniHeight + topbarMobileHeight; @@ -28,6 +31,7 @@ export const ToastContainerWrapper = styled.div` overflow: visible; z-index: ${theme.zIndex.contentNotifications - 1}; top: ${desktopSearchFailureTop}rem; + padding-bottom: ${props => props.visibleToasts ? `${toastHeightRes * props.visibleToasts}rem` : '0'}; @media screen and ${contentWrapperAndNavWidthBreakpoint} { max-width: calc(100vw - ((100vw - ${contentWrapperMaxWidth}rem) / 2) - ${verticalNavbarMaxWidth}rem); @@ -44,6 +48,17 @@ export const ToastContainerWrapper = styled.div` left: 0; z-index: ${theme.zIndex.contentNotifications + 1}; top: ${getMobileSearchFailureTop}rem; + padding-bottom: ${(props: { visibleToasts: number; }) => props.visibleToasts + ? `${toastHeightMediumRes * props.visibleToasts}rem` + : '0' + }; + `)} + + ${theme.breakpoints.mobileMedium(css` + padding-bottom: ${(props: { visibleToasts: number; }) => props.visibleToasts + ? `${toastHeightSmallRes * props.visibleToasts}rem` + : '0' + }; `)} `; @@ -63,7 +78,12 @@ const PageToasts = (props: ToastProps | {}) => { const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); return ( - + {toasts ? : null} ); diff --git a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap index 6497adfd11..527649e271 100644 --- a/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap +++ b/src/app/content/components/Page/__snapshots__/PageToasts.spec.tsx.snap @@ -7,6 +7,7 @@ exports[`PageToasts matches snapshot 1`] = ` overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 0; } @media screen and (max-width:90em) { @@ -29,6 +30,13 @@ exports[`PageToasts matches snapshot 1`] = ` left: 0; z-index: 21; top: 11.3rem; + padding-bottom: 0; + } +} + +@media screen and (max-width:50em) { + .c0 { + padding-bottom: 0; } } @@ -131,6 +139,7 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 4rem; } @media (max-width:75em) { @@ -177,6 +186,13 @@ exports[`PageToasts matches snapshot with toasts when mobile toolbar is open 1`] left: 0; z-index: 21; top: 16.6rem; + padding-bottom: 6rem; + } +} + +@media screen and (max-width:50em) { + .c0 { + padding-bottom: 8rem; } } @@ -335,6 +351,7 @@ exports[`PageToasts matches snapshots with toasts 1`] = ` overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 4rem; } @media (max-width:75em) { @@ -381,6 +398,13 @@ exports[`PageToasts matches snapshots with toasts 1`] = ` left: 0; z-index: 21; top: 11.3rem; + padding-bottom: 6rem; + } +} + +@media screen and (max-width:50em) { + .c0 { + padding-bottom: 8rem; } } diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap index 924728cac4..e1a55143a1 100644 --- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap @@ -1254,6 +1254,7 @@ Array [ overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 0; } .c42 { @@ -2614,6 +2615,13 @@ li[aria-label="Current Page"] .c61 { left: 0; z-index: 21; top: 11.3rem; + padding-bottom: 0; + } +} + +@media screen and (max-width:50em) { + .c77 { + padding-bottom: 0; } } @@ -5981,6 +5989,7 @@ Array [ overflow: visible; z-index: 19; top: 12rem; + padding-bottom: 0; } .c42 { @@ -7238,6 +7247,13 @@ li[aria-label="Current Page"] .c61 { left: 0; z-index: 21; top: 11.3rem; + padding-bottom: 0; + } +} + +@media screen and (max-width:50em) { + .c77 { + padding-bottom: 0; } } diff --git a/src/app/content/components/constants.ts b/src/app/content/components/constants.ts index 57e5ddbaca..c7723ef61c 100644 --- a/src/app/content/components/constants.ts +++ b/src/app/content/components/constants.ts @@ -48,4 +48,8 @@ export const mainContentBackground = '#fff'; export const maxContentGutter = 6; export const contentWrapperMaxWidth = contentTextWidth + sidebarDesktopWidth + verticalNavbarMaxWidth; +export const toastHeightRes = 4; +export const toastHeightMediumRes = 6; +export const toastHeightSmallRes = 8; + export const defaultTheme = 'blue' as BookWithOSWebData['theme']; From 3748c3e3ead2c1912bf1b7fe522144b4fa558289 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Mon, 31 Mar 2025 14:47:17 -0600 Subject: [PATCH 2/3] run linter --- src/app/content/components/Page/PageToasts.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/content/components/Page/PageToasts.tsx b/src/app/content/components/Page/PageToasts.tsx index 06aac1cbaf..f79e677b01 100644 --- a/src/app/content/components/Page/PageToasts.tsx +++ b/src/app/content/components/Page/PageToasts.tsx @@ -78,10 +78,10 @@ const PageToasts = (props: ToastProps | {}) => { const mobileToolbarOpen = useSelector(mobileToolbarOpenSelector); return ( - {toasts ? : null} From 4c2e7b147c7474daac339fb1a170b9f504de8937 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Mon, 31 Mar 2025 14:57:42 -0600 Subject: [PATCH 3/3] update snapshots --- .../content/components/__snapshots__/Content.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap index 904cc9a944..4aa6d69d2d 100644 --- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap @@ -2634,7 +2634,7 @@ li[aria-label="Current Page"] .c61 { } @media screen and (max-width:50em) { - .c77 { + .c78 { padding-bottom: 0; } } @@ -7286,7 +7286,7 @@ li[aria-label="Current Page"] .c61 { } @media screen and (max-width:50em) { - .c77 { + .c78 { padding-bottom: 0; } }