From 0614d36cf16038c53fb49e5719ae1310e234cf62 Mon Sep 17 00:00:00 2001 From: denys Date: Mon, 17 Jun 2024 16:26:03 +0300 Subject: [PATCH] fix search params, table view in 320px res --- .../ProductCardHorizontal.scss | 24 +++++++--- .../ProductCardHorizontal.tsx | 4 -- src/contexts/ThemeContext.tsx | 6 +-- src/pages/ProductsPage/ProductsPage.tsx | 9 +++- src/styles/utils/_theme-set.scss | 4 +- src/utils/searchHelper.ts | 44 ------------------- 6 files changed, 31 insertions(+), 60 deletions(-) delete mode 100644 src/utils/searchHelper.ts diff --git a/src/components/ProductCardHorizontal/ProductCardHorizontal.scss b/src/components/ProductCardHorizontal/ProductCardHorizontal.scss index 022ebe8..9b13535 100644 --- a/src/components/ProductCardHorizontal/ProductCardHorizontal.scss +++ b/src/components/ProductCardHorizontal/ProductCardHorizontal.scss @@ -15,6 +15,7 @@ &__top-wrapper { display: flex; justify-content: space-between; + gap: 3px; } &__link { @@ -35,8 +36,7 @@ } @include on-mobile { - width: 80px; - height: 110px; + width: 65px; } } @@ -48,17 +48,16 @@ } &__title { - font-size: 16px; + font-size: 14px; font-weight: 600; padding-top: 8px; color: var(--color-primary); - height: 40px; overflow: hidden; text-overflow: ellipsis; } &__prices { - font-size: 18px; + font-size: 16px; position: relative; margin-top: 8px; @@ -99,7 +98,7 @@ } &__param { - font-size: 12px; + font-size: 10px; color: var(--color-secondary); line-height: 15px; font-weight: 600; @@ -116,5 +115,18 @@ width: 100%; display: flex; gap: 8px; + + @include on-mobile { + & > .add-to-cart { + font-size: 10px; + } + + & > .add-to-cart { + width: 45px; + } + & > .add-to-fav { + width: 25px; + } + } } } diff --git a/src/components/ProductCardHorizontal/ProductCardHorizontal.tsx b/src/components/ProductCardHorizontal/ProductCardHorizontal.tsx index 686e5a4..63eef61 100644 --- a/src/components/ProductCardHorizontal/ProductCardHorizontal.tsx +++ b/src/components/ProductCardHorizontal/ProductCardHorizontal.tsx @@ -64,10 +64,6 @@ export const ProductCardHorizontal: FC = ({ product }) => {

{ram}

- {/*
- - -
*/} ); diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx index 5f35dda..6f02d21 100644 --- a/src/contexts/ThemeContext.tsx +++ b/src/contexts/ThemeContext.tsx @@ -30,14 +30,14 @@ interface ThemeProviderProps { export const ThemeProvider: React.FC = ({ children }) => { const [theme, setTheme] = useState(() => { - const savedTheme = localStorage.getItem('theme'); + const savedTheme = localStorage.getItem('data-theme'); return savedTheme ? (savedTheme as Theme) : 'light'; }); useEffect(() => { const html = document.querySelector('html') as HTMLHtmlElement; - html.setAttribute('theme', theme); - localStorage.setItem('theme', theme); + html.setAttribute('data-theme', theme); + localStorage.setItem('data-theme', theme); }, [theme]); const toggleTheme = () => { diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx index acd417b..c1ced1b 100644 --- a/src/pages/ProductsPage/ProductsPage.tsx +++ b/src/pages/ProductsPage/ProductsPage.tsx @@ -94,7 +94,14 @@ export const ProductsPage: FC = ({ category }) => { const handleSearchChange = (event: React.ChangeEvent) => { const params = new URLSearchParams(searchParams); - params.set('search', event.target.value.trimStart()); + const query = event.target.value.trimStart(); + + if (query) { + params.set('search', query); + } else { + params.delete('search'); + } + params.set('page', String(1)); setSearchParams(params); }; diff --git a/src/styles/utils/_theme-set.scss b/src/styles/utils/_theme-set.scss index b1d0b2d..9425eef 100644 --- a/src/styles/utils/_theme-set.scss +++ b/src/styles/utils/_theme-set.scss @@ -1,5 +1,5 @@ :root, -[theme='light'] { +[data-theme='light'] { // design color --page-bg-color: #fff; --color-primary: #313237; @@ -57,7 +57,7 @@ --pagin-button-border: var(--color-icons); } -[theme='dark'] { +[data-theme='dark'] { //design color --page-bg-color: #0f1121; --color-primary: #f1f2f9; diff --git a/src/utils/searchHelper.ts b/src/utils/searchHelper.ts deleted file mode 100644 index f11efd1..0000000 --- a/src/utils/searchHelper.ts +++ /dev/null @@ -1,44 +0,0 @@ -export type SearchParams = { - [key: string]: string | string[] | null; -}; - -/** - * This function prepares a correct search string - * from a given currentParams and paramsToUpdate. - */ -export function getSearchWith( - currentParams: URLSearchParams, - paramsToUpdate: SearchParams, // it's our custom type -): string { - // copy currentParams by creating new object from a string - const newParams = new URLSearchParams(currentParams.toString()); - - // Here is the example of paramsToUpdate - // { - // sex: 'm', ['sex', 'm'] - // order: null, ['order', null] - // centuries: ['16', '19'], ['centuries', ['16', '19']] - // } - // - // - params with the `null` value are deleted; - // - string value is set to given param key; - // - array of strings adds several params with the same key; - - Object.entries(paramsToUpdate).forEach(([key, value]) => { - if (value === null) { - newParams.delete(key); - } else if (Array.isArray(value)) { - // we delete the key to remove old values - newParams.delete(key); - - value.forEach(part => { - newParams.append(key, part); - }); - } else { - newParams.set(key, value); - } - }); - - // we return a string to use it inside links - return newParams.toString(); -}