diff --git a/front/package-lock.json b/front/package-lock.json index 89ac0af..f209b10 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -30,6 +30,7 @@ "@types/react-input-mask": "^3.0.6", "@types/react-redux": "^7.1.34", "@vitejs/plugin-react": "^5.0.4", + "baseline-browser-mapping": "^2.9.19", "eslint": "^9.36.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.22", @@ -2346,9 +2347,9 @@ "license": "MIT" }, "node_modules/baseline-browser-mapping": { - "version": "2.8.25", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz", - "integrity": "sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==", + "version": "2.9.19", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz", + "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/front/package.json b/front/package.json index ec40eb4..44f3321 100644 --- a/front/package.json +++ b/front/package.json @@ -32,6 +32,7 @@ "@types/react-input-mask": "^3.0.6", "@types/react-redux": "^7.1.34", "@vitejs/plugin-react": "^5.0.4", + "baseline-browser-mapping": "^2.9.19", "eslint": "^9.36.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.22", diff --git a/front/src/api/client.ts b/front/src/api/client.ts index 4188ab4..eb9f9fb 100644 --- a/front/src/api/client.ts +++ b/front/src/api/client.ts @@ -1,6 +1,6 @@ import axios from "axios"; -export const API_BASE = g;/* process.env.REACT_APP_API_BASE || "";*/ +export const API_BASE = ""; const client = axios.create({ baseURL: API_BASE, headers: { "Content-Type": "application/json" }, diff --git a/front/src/features/catalog/Catalog.module.css b/front/src/features/catalog/Catalog.module.css index 835d39e..4dcf160 100644 --- a/front/src/features/catalog/Catalog.module.css +++ b/front/src/features/catalog/Catalog.module.css @@ -4,9 +4,9 @@ gap: 40px; } -.sidebar { +/*.sidebar { width: 260px; -} +}*/ .productsSection { flex: 1; @@ -54,6 +54,43 @@ color: #ffcc00; } +/*SidebarCategories*/ +.sidebar { width: 260px; padding: 20px 0; } +.title { font-weight:700; font-size:14px; margin-bottom:16px; } +.list { list-style:none; padding:0; margin:0; } +.item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; } +.item:hover { color:#000; } +.active { color:#000; font-weight:700; } +/*SidebarCategories*/ + +/*Pagination*/ +.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;} +.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;} +.pages{ display:flex; gap:8px;} +.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;} +.active{ background:#ffd400; font-weight:700; border-color:#ffd400;} +button:disabled{ opacity:.5; cursor:default;} +/*Pagination*/ + +/*CategoryFilters*/ +.filtersWrap { margin:24px 0; } +.title { font-weight:700; margin-bottom:12px; } +.block { margin-bottom:16px; } +.blockTitle{ font-weight:600; margin-bottom:8px; } +.opt { display:block; margin:6px 0; font-size:14px; } +.actions { margin-top:12px; display:flex; gap:12px; } +.apply { background:#ffd400; border:none; padding:10px 22px; border-radius:26px; cursor:pointer;} +.reset { background:#fff; border:1px solid #ddd; padding:8px 16px; cursor:pointer;} +/*CategoryFilters*/ + +.categoryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } +.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .15s; } +.categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); } +.categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; } +.categoryName { font-weight:700; } +@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} } +@media(max-width:600px){ .grid{grid-template-columns:1fr} } + @media (max-width: 900px) { .catalogWrapper { flex-direction: column; diff --git a/front/src/features/catalog/CategoriesGrid.tsx b/front/src/features/catalog/CategoriesGrid.tsx index 7eab034..1240905 100644 --- a/front/src/features/catalog/CategoriesGrid.tsx +++ b/front/src/features/catalog/CategoriesGrid.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./CategoryCards.module.css"; +import styles from "./Catalog.module.css"; import { useAppSelector } from "../../app/hooks"; interface Props { onSelect?: (id:number) => void } @@ -7,11 +7,11 @@ const CategoryCards: React.FC = ({ onSelect }) => { const categories = useAppSelector(s => s.categories.items); return ( -
+
{categories.map(c => ( -
onSelect?.(c.id)}> - {c.image ? {c.name} : {c.name}} -
{c.name}
+
onSelect?.(c.id)}> + {c.image ? {c.name} : {c.name}} +
{c.name}
))}
diff --git a/front/src/features/catalog/CategoryCards.tsx b/front/src/features/catalog/CategoryCards.tsx index 8f07c5d..22c3f0b 100644 --- a/front/src/features/catalog/CategoryCards.tsx +++ b/front/src/features/catalog/CategoryCards.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./CategoryCards.module.css"; +import styles from "./Catalog.module.css"; import { useAppSelector } from "../../app/hooks"; interface Props { diff --git a/front/src/features/catalog/CategoryFilters.tsx b/front/src/features/catalog/CategoryFilters.tsx index a086911..b41b607 100644 --- a/front/src/features/catalog/CategoryFilters.tsx +++ b/front/src/features/catalog/CategoryFilters.tsx @@ -1,6 +1,6 @@ import { useAppSelector, useAppDispatch } from "../../app/hooks"; import { setSelectedCategory } from "./categoriesSlice"; -import styles from "./CategoriesSidebar.module.css"; +import styles from "./Catalog.module.css"; import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice"; import { useState } from "react"; @@ -19,7 +19,7 @@ export const CategoryFilters = () => { if (!cat) return null; return ( -
+

ПАРАМЕТРЫ

{cat.atributes.map(attr => ( diff --git a/front/src/features/catalog/Pagination.tsx b/front/src/features/catalog/Pagination.tsx index 939d2a9..9dcff40 100644 --- a/front/src/features/catalog/Pagination.tsx +++ b/front/src/features/catalog/Pagination.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./Pagination.module.css"; +import styles from "./Catalog.module.css"; import { useAppSelector, useAppDispatch } from "../../app/hooks"; import { setPage, fetchProductsByCategory } from "./productsSlice"; diff --git a/front/src/features/catalog/SidebarCategories.tsx b/front/src/features/catalog/SidebarCategories.tsx index b573e26..33eeae6 100644 --- a/front/src/features/catalog/SidebarCategories.tsx +++ b/front/src/features/catalog/SidebarCategories.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import styles from "./SidebarCategories.module.css"; +import styles from "./Catalog.module.css"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { fetchCategories, setSelectedCategory } from "./categoriesSlice"; import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice"; diff --git a/front/src/pages/Products/Products.tsx b/front/src/pages/Products/Products.tsx index a4bf779..9961514 100644 --- a/front/src/pages/Products/Products.tsx +++ b/front/src/pages/Products/Products.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styles from "./ProductsPage.module.css"; +import styles from "./Products.module.css"; import SidebarCategories from "../../features/catalog/SidebarCategories"; import CategoryCards from "../../features/catalog/CategoryCards"; import Filters from "../../features/catalog/CategoryFilters";