Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d643beed by Ravindra Kanojiya
Options

updated

1 parent 1b615069
Inline Side-by-side
Showing 5 changed files with 117 additions and 98 deletions
components/Catalogue/InnerDetailsCatalogue.js
...@@ -94,7 +94,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData } ...@@ -94,7 +94,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }
<Row> <Row>
{sortedProducts.map((product, index) => ( {sortedProducts.map((product, index) => (
<Col xs={6} md={4} key={`${product.productSlug}-${index}`}> <Col xs={12} md={4} key={`${product.productSlug}-${index}`}>
<div className="collections-item"> <div className="collections-item">
<Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank"> <Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank">
<Image <Image
......
components/Common/InnerBanner.js
...@@ -2,12 +2,14 @@ import React from 'react' ...@@ -2,12 +2,14 @@ import React from 'react'
import { Col, Row } from 'react-bootstrap' import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling' import { cleanImage } from '../services/imageHandling'
import Image from 'next/image' import Image from 'next/image'
import { useRouter } from 'next/router'
const InnerBanner = ({bannerData}) => { const InnerBanner = ({bannerData}) => {
const router = useRouter();
const routeName = router.pathname.replace("/", "");
return ( return (
<> <>
<section className='innerbanner-section'> <section className={`innerbanner-section ${routeName}`}>
<div className='innerbanner'> <div className='innerbanner'>
<Row> <Row>
<Col> <Col>
......
components/Layout/Header.js
...@@ -128,7 +128,6 @@ import { cleanImage } from "../services/imageHandling"; ...@@ -128,7 +128,6 @@ import { cleanImage } from "../services/imageHandling";
// ]; // ];
export default function Navigation({ collectionsData = [] }) { export default function Navigation({ collectionsData = [] }) {
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [activeMenu, setActiveMenu] = useState(null); const [activeMenu, setActiveMenu] = useState(null);
...@@ -180,8 +179,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -180,8 +179,7 @@ export default function Navigation({ collectionsData = [] }) {
const headerData = useSelector((state) => state.header.data); const headerData = useSelector((state) => state.header.data);
const showLevel3 = collectionL2?.products?.length > 0; const showLevel3 = collectionL2?.products?.length > 0;
return ( return (
<> <>
...@@ -226,8 +224,6 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -226,8 +224,6 @@ const showLevel3 = collectionL2?.products?.length > 0;
<div className="dropdown-menu-inner custom_container"> <div className="dropdown-menu-inner custom_container">
<Row> <Row>
<Col md={showLevel3 ? 8 : 8}> <Col md={showLevel3 ? 8 : 8}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">Collections</h6> <h6 className="nav-head01">Collections</h6>
...@@ -279,55 +275,52 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -279,55 +275,52 @@ const showLevel3 = collectionL2?.products?.length > 0;
</ul> </ul>
</Col> </Col>
{showLevel3 && ( {showLevel3 && (
<Col md={4}> <Col md={4}>
<h6 className="nav-head01"> <h6 className="nav-head01">
{collectionL2?.subCategoryName} {collectionL2?.subCategoryName}
</h6> </h6>
<ul className="navList01"> <ul className="navList01">
{collectionL2?.products?.map((product) => ( {collectionL2?.products?.map((product) => (
<li key={product.productSlug}> <li key={product.productSlug}>
<Link <Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
> >
{product.title} {product.title}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
</Col> </Col>
)} )}
</Row> </Row>
</Col> </Col>
<Col md={4}>
<Row>
{collectionL1?.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={cleanImage(sub.subCategoryImage?.url)}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
</Col>
<Col md={4}>
<Row>
{collectionL1?.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={cleanImage(sub.subCategoryImage?.url)}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
</Col>
</Row> </Row>
</div> </div>
</div> </div>
...@@ -480,14 +473,14 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -480,14 +473,14 @@ const showLevel3 = collectionL2?.products?.length > 0;
About About
</Link> </Link>
<Link <Link
href="/about" href="/catalogue"
className="menu-item" className="menu-item"
onClick={() => setShow(false)} onClick={() => setShow(false)}
> >
Catalogue Catalogue
</Link> </Link>
<Link <Link
href="/contacts" href="/connect"
className="menu-item" className="menu-item"
onClick={() => setShow(false)} onClick={() => setShow(false)}
> >
...@@ -547,36 +540,35 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -547,36 +540,35 @@ const showLevel3 = collectionL2?.products?.length > 0;
</button> </button>
{activeCollection?.subCategories?.map((sub) => { {activeCollection?.subCategories?.map((sub) => {
const hasProducts = sub?.products?.length > 0; const hasProducts = sub?.products?.length > 0;
if (hasProducts) { if (hasProducts) {
return ( return (
<div <div
key={sub.subCategorySlug} key={sub.subCategorySlug}
className="menu-item" className="menu-item"
onClick={() => { onClick={() => {
setActiveSubCollection(sub); setActiveSubCollection(sub);
setBackLabel(activeCollection.categoryName); setBackLabel(activeCollection.categoryName);
setMobileStep("collection-products"); setMobileStep("collection-products");
}} }}
> >
{sub.subCategoryName} <span></span> {sub.subCategoryName} <span></span>
</div> </div>
); );
} }
return (
<Link
key={sub.subCategorySlug}
href={`/collections/${activeCollection?.categorySlug}/${sub.subCategorySlug}`}
className="menu-item"
onClick={() => setShow(false)}
>
{sub.subCategoryName}
</Link>
);
})}
return (
<Link
key={sub.subCategorySlug}
href={`/collections/${activeCollection?.categorySlug}/${sub.subCategorySlug}`}
className="menu-item"
onClick={() => setShow(false)}
>
{sub.subCategoryName}
</Link>
);
})}
</> </>
)} )}
...@@ -663,16 +655,32 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -663,16 +655,32 @@ const showLevel3 = collectionL2?.products?.length > 0;
{/* ‹ Brands */} {/* ‹ Brands */}
</button> </button>
{activeBrand.subCategories.map((sub) => (
<Link
key={sub.subCategorySlug}
href={`/brands/${activeBrand.categorySlug}/${sub.subCategorySlug}`} <Link href="/brands/valcucine">
className="menu-item" <Image
onClick={() => setShow(false)} width={177}
> height={60}
{sub.subCategoryName} src="/image/header-logo/valcucine.png"
</Link> />
))} </Link>
<Link href="/brands/rimadesio">
<Image
width={177}
height={60}
src="/image/header-logo/rimadesio.png"
/>
</Link>
<Link href="/brands/inalco">
<Image
width={177}
height={60}
src="/image/header-logo/inalco.png"
/>
</Link>
</> </>
)} )}
</Nav> </Nav>
......
styles/globals.css
...@@ -1245,6 +1245,12 @@ footer a:hover { ...@@ -1245,6 +1245,12 @@ footer a:hover {
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
.innercontent-section iframe{
height: 235px;
}
.innerbanner-section.connect .product-banner img{
object-position: center right;
}
.cataloguesSwiper .collection-card img { .cataloguesSwiper .collection-card img {
max-height: 456px; max-height: 456px;
} }
...@@ -1313,11 +1319,14 @@ footer a:hover { ...@@ -1313,11 +1319,14 @@ footer a:hover {
max-width: 95%; max-width: 95%;
} }
.exp-showroom-img img{ .exp-showroom-img img{
height: 45vw; height: 235px;
} }
.exp-showroom-img img:first-child { .exp-showroom-img .img:first-child {
margin-top: 3rem; margin-top: 4rem;
} }
/* .exp-showroom-img img:first-child {
margin-top: 3rem;
} */
.exp-showroom-img img { .exp-showroom-img img {
margin: 0.4rem; margin: 0.4rem;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!