From 03325562127fc40da21d9919d28e39214a920af7 Mon Sep 17 00:00:00 2001 From: Lucas Teixeira Date: Tue, 17 Nov 2020 10:15:27 -0300 Subject: [PATCH] WJ-121 - Fix: Carousel navigation and scrollbar Firefox and Safari; WJ-121 - Fix: Skeleton transparency Safari; WJ-121 - Fix: SearchModal results height Safari; WJ-121 - Fix: SearchModal height Firefox; --- src/components/Button/index.spec.tsx | 4 ++-- src/components/Button/styles.ts | 6 +++--- src/components/Input/styles.ts | 2 +- src/components/Modal/hooks.tsx | 3 +++ src/containers/EntityImage/styles.ts | 2 +- src/containers/EntityImageList/index.tsx | 10 ++++++---- src/containers/EntityImageList/styles.ts | 1 + src/containers/EntitySummaryList/styles.ts | 4 ++-- src/containers/SearchModal/styles.ts | 1 - src/shared/enums/Color.ts | 2 +- src/shared/helpers/colors/getBackground.ts | 4 +++- 11 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/Button/index.spec.tsx b/src/components/Button/index.spec.tsx index 3c76df3..32fd6a6 100644 --- a/src/components/Button/index.spec.tsx +++ b/src/components/Button/index.spec.tsx @@ -49,7 +49,7 @@ describe('Button Component', () => { // Assert expect(containerElement).toHaveStyle(`border-color: ${Color.Secondary}`); - expect(containerElement).toHaveStyle('background: transparent'); + expect(containerElement).toHaveStyle(`background: ${Color.Transparent}`); }); it('should render an icon button', async () => { @@ -61,7 +61,7 @@ describe('Button Component', () => { // Assert expect(containerElement).toHaveStyle('border-radius: 50%'); - expect(containerElement).toHaveStyle('background: transparent'); + expect(containerElement).toHaveStyle(`background: ${Color.Transparent}`); expect(containerElement).toHaveStyle('width: auto'); expect(containerElement).toHaveStyle('height: auto'); }); diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index b3d5853..18af7be 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -39,7 +39,7 @@ export const Container = styled.button` css` border: 1px solid ${getBackground(props.theme, props.color, Color.Fill)}; color: ${getBackground(props.theme, props.color, Color.Fill)}; - background: transparent; + background: ${Color.Transparent}; &:hover { background-color: ${`${getBackground( @@ -55,7 +55,7 @@ export const Container = styled.button` css` border: 0; color: ${getBackground(props.theme, props.color, Color.Fill)}; - background: transparent; + background: ${Color.Transparent}; &:hover { background-color: ${`${getBackground( @@ -75,7 +75,7 @@ export const Container = styled.button` height: auto; padding: ${Size.Small}; border-radius: 50%; - background: transparent; + background: ${Color.Transparent}; &:hover { background: rgba(0, 0, 0, 0.1); diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index 7222748..7393f12 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -44,7 +44,7 @@ export const Container = styled.div` `} input { - background: transparent; + background: ${Color.Transparent}; flex: 1; border: 0; font-size: ${Size.Default}; diff --git a/src/components/Modal/hooks.tsx b/src/components/Modal/hooks.tsx index 4c981f5..9be3650 100644 --- a/src/components/Modal/hooks.tsx +++ b/src/components/Modal/hooks.tsx @@ -23,6 +23,7 @@ const ModalProvider: React.FC = ({ children }) => { ({ value, callback, props }: ModalContent) => { setData(value); setPropsData(props || ({} as StyleProps)); + document.body.style.overflow = 'hidden'; if (callback) { setCallbackFunction(() => callback); @@ -36,6 +37,7 @@ const ModalProvider: React.FC = ({ children }) => { setIsCallback(true); setData(null as any); setPropsData({} as StyleProps); + document.body.style.overflow = 'auto'; }, []); // Dismiss modal without callback @@ -43,6 +45,7 @@ const ModalProvider: React.FC = ({ children }) => { setIsCallback(false); setData(null as any); setPropsData({} as StyleProps); + document.body.style.overflow = 'auto'; }, []); // Run callback when close modal and reset state diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts index 9bcb356..b784425 100644 --- a/src/containers/EntityImage/styles.ts +++ b/src/containers/EntityImage/styles.ts @@ -69,7 +69,7 @@ export const IconButton = styled.button` position: absolute; right: ${Size.Smallest}; top: ${Size.Smallest}; - background: transparent; + background: ${Color.Transparent}; border: none; svg { diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx index 7036bd6..2aea46f 100644 --- a/src/containers/EntityImageList/index.tsx +++ b/src/containers/EntityImageList/index.tsx @@ -61,18 +61,20 @@ const EntityImageList: React.FC = ({ // Prev navigate button const handlePrevious = useCallback(() => { const itemsContainerDOM = itemsContainer.current as HTMLDivElement; - itemsContainerDOM.scrollBy(-1, 0); + const itemWidth = itemsContainerDOM?.scrollWidth / data.length; + itemsContainerDOM.scrollBy(-itemWidth, 0); checkButtons(false); - }, [itemsContainer, checkButtons]); + }, [itemsContainer, data.length, checkButtons]); // Next navigate button const handleNext = useCallback(() => { const itemsContainerDOM = itemsContainer.current as HTMLDivElement; - itemsContainerDOM.scrollBy(1, 0); + const itemWidth = itemsContainerDOM?.scrollWidth / data.length; + itemsContainerDOM.scrollBy(itemWidth, 0); checkButtons(true); - }, [itemsContainer, checkButtons]); + }, [itemsContainer, data.length, checkButtons]); return ( diff --git a/src/containers/EntityImageList/styles.ts b/src/containers/EntityImageList/styles.ts index 5d027f1..2ed3822 100644 --- a/src/containers/EntityImageList/styles.ts +++ b/src/containers/EntityImageList/styles.ts @@ -57,6 +57,7 @@ export const ListContainer = styled.div` -webkit-overflow-scrolling: touch; scroll-behavior: smooth; + scrollbar-width: none; &::-webkit-scrollbar { display: none; } diff --git a/src/containers/EntitySummaryList/styles.ts b/src/containers/EntitySummaryList/styles.ts index 826f329..11ae072 100644 --- a/src/containers/EntitySummaryList/styles.ts +++ b/src/containers/EntitySummaryList/styles.ts @@ -2,8 +2,8 @@ import styled from 'styled-components'; import { Color, Size } from 'shared/enums'; export const Container = styled.div` - display: flex; - flex-direction: column; + /* display: flex; + flex-direction: column; */ width: 100%; `; diff --git a/src/containers/SearchModal/styles.ts b/src/containers/SearchModal/styles.ts index 529ae73..bc8c1ab 100644 --- a/src/containers/SearchModal/styles.ts +++ b/src/containers/SearchModal/styles.ts @@ -9,7 +9,6 @@ export const Container = styled.div` width: min(1280px, calc(100vw - ${Size.Medium} * 2)); min-height: 100px; - max-height: calc(min(700px, 100%) - 100px - ${Size.Medium}); `; export const ResultsContainer = styled.div` diff --git a/src/shared/enums/Color.ts b/src/shared/enums/Color.ts index 6f7d088..180837a 100644 --- a/src/shared/enums/Color.ts +++ b/src/shared/enums/Color.ts @@ -7,7 +7,7 @@ enum Color { Placeholder = '#ccc', Error = '#c53030', Empty = '#0f0f0f', - Transparent = 'transparent', + Transparent = 'rgba(255,255,255,0.001)', } export default Color; diff --git a/src/shared/helpers/colors/getBackground.ts b/src/shared/helpers/colors/getBackground.ts index ed9912e..14ad5bf 100644 --- a/src/shared/helpers/colors/getBackground.ts +++ b/src/shared/helpers/colors/getBackground.ts @@ -6,7 +6,9 @@ const getBackground = ( color?: string, defaultColor?: Color | string, ): Color | string => { - return color || getBackgroundByTheme(theme) || defaultColor || 'transparent'; + return ( + color || getBackgroundByTheme(theme) || defaultColor || Color.Transparent + ); }; export default getBackground;