доделал адаптацию под мобильные устройства

This commit is contained in:
Joe_Peach committed 2026-04-12 16:13:06 +03:00
1 parent c6b9001f74
commit 2bbfb4239a
4 files changed
+105 -31

No files matched your search

+7 -2
View File
@@ -9,7 +9,7 @@ padding: 40px 0;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@@ -56,7 +56,9 @@ color: #fff;
.right { .right {
text-align: right; text-align: right;
} }
@@ -165,6 +167,7 @@ color: #fff;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
font-size: 10px; font-size: 10px;
width: 30%;
} }
.footer { .footer {
@@ -174,6 +177,8 @@ padding: 20px 0;
.left { .left {
gap: 10px; gap: 10px;
width: 30%;
align-items: center;
} }
.copy { .copy {
@@ -194,7 +199,7 @@ text-align: right;
.phone { .phone {
color: #fff; color: #fff;
font-size: 14px; font-size: 10px;
font-weight: 400; font-weight: 400;
} }
+5 -6
View File
@@ -265,17 +265,13 @@ button:disabled {
@media (max-width: 600px) { @media (max-width: 600px) {
.grid { .grid {
grid-template-columns: 1fr; grid-template-columns: repeat(3, 1fr);
} }
.wrap{ .wrap{
margin: 0; margin: 0;
padding-bottom: 10px; padding-bottom: 10px;
} }
.go {
display: none;
}
} }
@@ -285,7 +281,10 @@ button:disabled {
} }
} }
@media (max-width: 1254px) { @media (max-width: 500px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
} }
@media (max-width: 1045px) { @media (max-width: 1045px) {
+67 -8
View File
@@ -1,8 +1,6 @@
/* ===== ОБЩИЙ ЛЭЙАУТ ===== */ /* ===== ОБЩИЙ ЛЭЙАУТ ===== */
.wrapper { .wrapper {
display: flex;
margin: 0;
justify-content: center;
} }
.container{ .container{
@@ -10,7 +8,7 @@
background: #f3f3f3; background: #f3f3f3;
min-height: 100vh; min-height: 100vh;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
width: 80%;
} }
/* ===== САЙДБАР ===== */ /* ===== САЙДБАР ===== */
@@ -177,6 +175,65 @@
color: #000; color: #000;
} }
.mobileFilterBtn {
display: none;
margin-bottom: 15px;
padding: 12px;
background: #000;
color: white;
border: none;
cursor: pointer;
}
/* overlay */
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
}
/* кнопка закрытия */
.closeBtn {
display: none;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
margin-top: 70px;
}
/* ================= MOBILE ================= */
@media (max-width: 600px) {
.mobileFilterBtn {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100%;
background: white;
z-index: 100;
padding: 20px;
overflow-y: auto;
transition: 0.3s;
}
.sidebarOpen {
left: 0;
}
.closeBtn {
display: block;
}
}
/* ===== АДАПТИВ ===== */ /* ===== АДАПТИВ ===== */
@@ -210,9 +267,7 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.wrapper {
flex-direction: column;
}
@@ -231,8 +286,12 @@
@media (max-width: 600px){ @media (max-width: 600px){
.products { .products {
width: 150px; width: 100%;
} }
.main{
justify-content: center;
}
} }
+26 -15
View File
@@ -7,33 +7,44 @@ import ProductGrid from "../../features/catalog/ProductGrid";
import Pagination from "../../features/catalog/Pagination"; import Pagination from "../../features/catalog/Pagination";
import { useAppSelector } from "../../app/hooks"; import { useAppSelector } from "../../app/hooks";
import SEO from "../../shared/ui/SEO"; import SEO from "../../shared/ui/SEO";
import { useState } from "react";
const ProductsPage: React.FC = () => { const ProductsPage: React.FC = () => {
const { selectedCategoryId, items } = useAppSelector(s => s.categories); const { selectedCategoryId, items } = useAppSelector((s) => s.categories);
const category = items.find(c => c.id === selectedCategoryId); const category = items.find((c) => c.id === selectedCategoryId);
const [isOpen, setIsOpen] = useState(false);
return ( return (
<> <>
<SEO <SEO
title={ title={category ? `${category.name} купить` : "Каталог продукции"}
category description={
? `${category.name} купить` category
: "Каталог продукции" ? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
} : "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
description={ }
category />
? `Купить ${category.name} по выгодной цене. Большой выбор товаров.`
: "Каталог продукции: трубы ПВХ, аксессуары и комплектующие"
}
/>
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.container}> <div className={styles.container}>
<aside className={styles.sidebar}> <aside className={`${styles.sidebar} ${isOpen ? styles.sidebarOpen : ""}`}>
<button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
✕
</button>
<SidebarCategories /> <SidebarCategories />
{selectedCategoryId && <Filters />} {selectedCategoryId && <Filters />}
</aside> </aside>
<main className={styles.main}> <main className={styles.main}>
<button
className={styles.mobileFilterBtn}
onClick={() => setIsOpen(true)}
>
Фильтры и категории
</button>
{!selectedCategoryId ? ( {!selectedCategoryId ? (
<CategoryCards /> <CategoryCards />
) : ( ) : (
@@ -49,4 +60,4 @@ const ProductsPage: React.FC = () => {
); );
}; };
export default ProductsPage; export default ProductsPage;