From 778f4380f570a30280620a01a336ca654fb34c57 Mon Sep 17 00:00:00 2001 From: hosead6168 Date: Wed, 23 Mar 2022 04:11:33 -0500 Subject: [PATCH] feat(*): added masonry --- src/Components/Masonry/Masonry.css | 49 +++++++ src/Components/Masonry/Masonry.jsx | 228 +++++++++++++++++++++++++++++ src/Pages/Shop/Shop.jsx | 3 +- 3 files changed, 279 insertions(+), 1 deletion(-) create mode 100644 src/Components/Masonry/Masonry.css create mode 100644 src/Components/Masonry/Masonry.jsx diff --git a/src/Components/Masonry/Masonry.css b/src/Components/Masonry/Masonry.css new file mode 100644 index 00000000..03f071fe --- /dev/null +++ b/src/Components/Masonry/Masonry.css @@ -0,0 +1,49 @@ +.middle-div { + max-width: 1200px; + margin: 0 auto; +} + +/* Masonry Grid CSS */ +.masonry-grid { + column-count: 4; + -webkit-column-count: 4; + -moz-column-count: 4; + column-gap: 20px; + -moz-column-gap: 20px; + -webkit-column-gap: 20px; + margin: 50px 0px; +} +.review-item { + width: 100%; + padding: 10px; + margin: 10px 0px; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-shadow: 0px 0px 8px 0px #c0c0c0; + display: inline-block; + background-color: #fff; +} + +/*Responsive Masonry Grid CSS */ +@media (max-width: 1199px) { + .masonry-grid { + column-count: 3; + -webkit-column-count: 3; + -moz-column-count: 3; + } +} +@media (max-width: 991px) { + .masonry-grid { + column-count: 2; + -webkit-column-count: 2; + -moz-column-count: 2; + } +} +@media (max-width: 767px) { + .masonry-grid { + column-count: 1; + -webkit-column-count: 1; + -moz-column-count: 1; + } +} diff --git a/src/Components/Masonry/Masonry.jsx b/src/Components/Masonry/Masonry.jsx new file mode 100644 index 00000000..fd8bed6c --- /dev/null +++ b/src/Components/Masonry/Masonry.jsx @@ -0,0 +1,228 @@ +import React, {useContext, useState} from 'react'; +import './Masonry.css'; +import { GlobalState } from '../../GlobalState'; +import ProLoader from '../Loading/ProLoader'; +import axios from 'axios' + +const Masonry = () => { + const state = useContext(GlobalState) + const [products, setProducts] = state.productsAPI.products + const [isAdmin] = state.userAPI.isAdmin + const [token] = state.token + const [callback, setCallback] = state.productsAPI.callback + const [loading, setLoading] = useState(false) + const [isCheck, setIsCheck] = useState(false) + + const deleteProduct = async (id, public_id) => { + try { + setLoading(true) + const destroyImg = axios.post('/api/destory', { public_id }, { + headers: { Authorization: token } + }) + const deleteProduct = axios.delete(`/api/products/${id}`, { + headers: { Authorization: token } + }) + await destroyImg + await deleteProduct + setLoading(false) + setCallback(!callback) + } catch (err) { + alert(err.response.data.msg, err) + } +} +// const handleCheck = async (id) => { +// products.forEach(product => { +// if (product._id === id) product.checked = !product.checked +// }) +// setProducts([...products]) +// } + +const checkAll = () => { + products.forEach(product => { + product.checked = !isCheck + }) + setProducts([...products]) + setIsCheck(!isCheck) +} + +const deleteAll = () => { + products.forEach(product => { + if (product.checked) deleteProduct(product._id, product.images.id) + }) +} +/* for responsive masonry layout */ +// const breakpointColumnsObj = { +// default: 3, +// 1400: 2, +// 900: 1 +// }; + +if (loading) return
+ return ( + <> + { + isAdmin && +
+ Select All + + +
+ } +
+

Masonry Grid With CSS

+

Responsive masonry layout using CSS grid

+
+
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s. Lorem Ipsum is simply dummy text of the + printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text{" "} +

+
+ +
+ +
+ +
+

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. Lorem + Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text. The point + of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, content + here', making it look like readable English. +

+
+ +
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the industry's standard + dummy text. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s +

+
+ +
+ +
+ +
+

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. Lorem + Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's. The point of using Lorem Ipsum + is that it has a more-or-less normal distribution of letters, as + opposed to using 'Content here, content here', making it look like + readable English. +

+
+ +
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s +

+
+ +
+ +
+ +
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s +

+
+ +
+ +
+ +
+

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. Lorem + Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text. The point + of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, content + here', making it look like readable English. +

+
+ +
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum is simply dummy text of the printing and + typesetting industry. Lorem Ipsum has been the industry's standard + dummy text. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s +

+
+ +
+ +
+ +
+

+ It is a long established fact that a reader will be distracted by + the readable content of a page when looking at its layout. The point + of using Lorem Ipsum is that it has a more-or-less normal + distribution of letters, as opposed to using 'Content here, content + here', making it look like readable English. +

+
+ +
+ +
+ +
+

+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text + ever since the 1500s +

+
+ +
+ +
+
+
+ + ) +} + +export default Masonry; diff --git a/src/Pages/Shop/Shop.jsx b/src/Pages/Shop/Shop.jsx index 0a8eb193..f4081d91 100755 --- a/src/Pages/Shop/Shop.jsx +++ b/src/Pages/Shop/Shop.jsx @@ -1,8 +1,8 @@ import React from 'react'; import Footer from '../../Components/Footer/Footer'; import NavBar from '../../Components/NavBar/NavBar'; -// import NavBar from '../../Components/NavBar/NavBar'; import Products from '../../Components/Product/Products'; +// import Masonry from '../../Components/Masonry/Masonry'; import Sidebar from './Header'; import './Shop.css'; @@ -17,6 +17,7 @@ const Shop = () => {
+ {/* */}