Skip to content

Jay Mehta / zango-frontend

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

updated

1 parent 900b1fae
Inline Side-by-side
Showing 8 changed files with 262 additions and 139 deletions
components/blog-details/BlogsDetailInner.js
......@@ -12,7 +12,7 @@ const BlogsDetailInner = ({ blog }) => {
<section className="blog-detail-inner-session">
<div className="container">
<div className="row align-items-center mb-3">
<div className="col-md-6">
<div className="col-6">
<div className="profile">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
......@@ -20,7 +20,7 @@ const BlogsDetailInner = ({ blog }) => {
<div className="name">{mainBlog?.attributes?.name}</div>
</div>
</div>
<div className="col-md-6">
<div className="col-6">
<div className="date">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
......
components/blog-details/MostReadBlogs.js
......@@ -32,84 +32,81 @@ const MostReadBlogs = () => {
</div>
</div>
<div className="row">
<div className="col-12 position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
// spaceBetween={10}
navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 40
},
1024: {
slidesPerView: 3,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{BlogData &&
BlogData.map(data => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="blog-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="top-rated">{data.flag}</div>
</div>
<div className="info">
<div className="read-row">
<div className="col-12">
<div className="position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
// spaceBetween={10}
navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 40
},
1024: {
slidesPerView: 3,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{BlogData &&
BlogData.map(data => {
return (
<SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="blog-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="">{data.read}</div>
<div className="top-rated">{data.flag}</div>
</div>
<div className="title">{data.title}</div>
<div className="discription">{data.discription}</div>
<div className="read-more">
<Button href="/listing" variant="primary">
Read More
</Button>
<div className="info">
<div className="read-row">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span>
<div className="">{data.read}</div>
</div>
<div className="title">{data.title}</div>
<div className="discription">{data.discription}</div>
<div className="read-more">
<Button href="/listing" variant="primary">
Read More
</Button>
</div>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="most-read-blog-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="most-read-blog-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="most-read-blog-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="most-read-blog-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
......
components/blog/BlogItem.js
......@@ -300,7 +300,7 @@ const BlogsItem = ({blogs}) => {
<div className="col-12">
<div className="row">
{blogs &&
blogs.map(data => {
blogs?.map(data => {
return (
<div className="col-md-4">
<div className="blog-item">
......
components/common/ActiveLink.js 0 → 100644
import Link from "next/link"
import { useRouter } from "next/router"
import React, { Children } from "react"
const ActiveLink = ({ children, activeClassName, ...props }) => {
const { asPath } = useRouter()
const child = Children.only(children)
const childClassName = child.props.className || ''
// pages/index.js will be matched via props.href
// pages/about.js will be matched via props.href
// pages/[slug].js will be matched via props.as
const className =
asPath === props.href || asPath === props.as
? `${childClassName} ${activeClassName}`.trim()
: childClassName
return (
<Link {...props}>
{React.cloneElement(child, {
className: className || null,
})}
</Link>
)
}
// ActiveLink.propTypes = {
// activeClassName: PropTypes.string.isRequired,
// }
export default ActiveLink
\ No newline at end of file
components/layout/Header.js
......@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
import { getWishlists } from "../../redux/actions/activityAction";
import { Typeahead } from "react-bootstrap-typeahead";
import axios from "axios";
import ActiveLink from "../common/ActiveLink";
const Header = () => {
const { loadedUser } = useSelector(state => state.loadedUser);
......@@ -55,13 +56,22 @@ const Header = () => {
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="/blog">Blogs</Nav.Link>
<Nav.Link href="/gift-card" className="gift-card">
<ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a>
</ActiveLink>
<ActiveLink href="/gift-card" activeClassName="active ">
<a className="nav-link gift-card">Gift Card <span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span></a>
</ActiveLink>
{/* <Nav.Link href="/gift-card" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav.Link> */}
</Nav>
<Form className="d-flex me-3">
<div className="header-search">
......
components/listing/ListingFilter.js
......@@ -201,28 +201,30 @@ const ListingFilter = () => {
<div className="head">Date</div>
</div>
<div className="inner">
<div className="row">
<div className="col-6">
<div>From</div>
<Space direction="vertical">
<DatePicker
onChange={(date, dateString) => {
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, startDate: dateString !== "" ? dateString : null } }));
}}
/>
</Space>
</div>
<div className="col-6">
<div>To</div>
<Space direction="vertical">
<DatePicker
onChange={(date, dateString) => {
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, endDate: dateString !== "" ? dateString : null } }));
}}
/>
</Space>
<div className="data-filters-item">
<div className="row">
<div className="col-6 ">
<label>From</label>
<Space direction="vertical">
<DatePicker
onChange={(date, dateString) => {
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, startDate: dateString !== "" ? dateString : null } }));
}}
/>
</Space>
</div>
<div className="col-6">
<label>To</label>
<Space direction="vertical">
<DatePicker
onChange={(date, dateString) => {
console.log("date", date, dateString);
dispatch(setActivityFilters({ filters: { ...activityFilters, endDate: dateString !== "" ? dateString : null } }));
}}
/>
</Space>
</div>
</div>
</div>
</div>
......
redux/reducers/blogReducer.js
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS, CLEAR_ERRORS } from "../constants/blogConstants";
export const blogsReducer = (state = { blogs: {} }, action) => {
export const blogsReducer = (state = { blogs: [] }, action) => {
switch (action.type) {
case FETCH_BLOGS_REQUEST:
return {
......
styles/globals.css
......@@ -120,7 +120,7 @@ html {
body {
line-height: 1.4;
font-family: "Sofia Pro", sans-serif !important;
font-size: 16px !important;
font-size: 0.833vw !important;
overflow-x: hidden;
font-weight: 400 !important;
color: #000;
......@@ -618,8 +618,8 @@ input:focus-visible {
p {
/* color: #000;
font-family: "Sofia Pro Light"; */
font-size: 15px;
line-height: 20px;
font-size: 0.781vw;
line-height: 0.981vw;
}
span.form-error,
......@@ -1928,6 +1928,12 @@ span.form-error,
position: relative;
color: #000;
}
.browse-experiences-item .img-wrapper .image-container .image{
height: 220px !important;
background-color: #adadad;
border-radius: 24px 24px 0 0;
object-fit: cover !important;
}
.top-rated {
position: absolute;
......@@ -1966,8 +1972,8 @@ span.form-error,
}
.browse-experiences-item .info .discription {
font-size: 13px;
line-height: 15px;
font-size: 0.677vw;
line-height: 1.1vw;
color: #808080;
margin-bottom: 10px;
}
......@@ -1989,8 +1995,8 @@ span.form-error,
}
.browse-experiences-item .info .price {
font-size: 20px;
line-height: 20px;
font-size: 1.042vw;
line-height: 1.042vw;
font-weight: 600;
margin-bottom: 10px;
}
......@@ -2006,7 +2012,9 @@ span.form-error,
line-height: 11px;
margin-bottom: 10px;
}
.browse-experiences-item .info .detail>div{
margin-bottom: 0.4rem;
}
.btn-outline-secondary {
border: 1px solid #000;
font-size: 16px;
......@@ -2036,8 +2044,8 @@ span.form-error,
overflow: hidden;
}
.gift-an-experience-inner .content .title {
font-size: 40px;
line-height: 40px;
font-size: 2.083vw;
line-height: 2.083vw;
margin-bottom: 1rem;
}
......@@ -2081,8 +2089,8 @@ span.form-error,
}
.testimonial-item .name {
font-size: 24px;
line-height: 24px;
font-size: 1.25vw;
line-height: 1.25vw;
margin-top: 1rem;
}
......@@ -2200,8 +2208,8 @@ footer hr {
}
.box-01 .head {
font-size: 20px;
line-height: 20px;
font-size: 1.042vw;
line-height: 1.042vw;
padding: 1rem;
}
......@@ -2257,12 +2265,20 @@ footer hr {
}
.data-filters-item label {
font-size: 14px;
font-size: 0.729vw;
line-height: 0.729vw;
font-weight: 300;
display: flex;
align-items: center;
margin-bottom: 0.4rem;
}
.form-select{
font-size: 0.833vw;
}
.data-filters-item label input {
margin-right: 0.2rem;
margin-right: 0.4rem;
margin-top: -4px;
}
.data-filters-item {
......@@ -2298,6 +2314,7 @@ footer hr {
.box-01 .form-select {
border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem;
margin-bottom: 1rem;
}
.box-01 .show-all {
......@@ -2522,8 +2539,8 @@ footer hr {
}
.product-info .location {
font-size: 1.5rem;
line-height: 1.5rem;
font-size: 1.25vw;
line-height: 1.25vw;
margin-bottom: 0.5rem;
}
......@@ -2565,9 +2582,11 @@ footer hr {
}
.image-gallery-content .image-gallery-slide .image-gallery-image {
max-height: 100%;
/* max-height: 100%; */
}
.image-gallery-content.image-gallery-thumbnails-bottom.fullscreen .image-gallery-thumbnail {
width: 100px;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat;
......@@ -2734,8 +2753,8 @@ button:focus:not(:focus-visible) {
display: none;
}
.accordion-01 .accordion-button {
font-size: 20px;
line-height: 28px;
font-size: 1.042vw;
line-height: 1.042vw;
color: #000000;
position: relative;
padding-top: 30px !important;
......@@ -3258,7 +3277,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: #fff;
border-radius: 6px;
padding: 0.3rem 0.5rem;
font-size: 13px;
font-size: 0.677vw;
font-weight: 700;
}
......@@ -3281,8 +3300,8 @@ input[type="number"]::-webkit-outer-spin-button {
}
.blog-item .info .title {
font-size: 20px;
line-height: 24px;
font-size: 1.042vw;
line-height: 1.542vw;
margin-bottom: 1rem;
overflow: hidden;
text-overflow: ellipsis;
......@@ -3302,8 +3321,8 @@ input[type="number"]::-webkit-outer-spin-button {
-webkit-box-orient: vertical;
}
.blog-item .info .read-more .btn {
font-size: 13px;
line-height: 15px;
font-size: 0.677vw;
line-height: 0.677vw;
padding-top: 0.675rem;
padding-bottom: 0.675rem;
}
......@@ -3364,8 +3383,8 @@ input[type="number"]::-webkit-outer-spin-button {
display: block;
}
.blog-detail-inner-session h2 {
font-size: 32px;
line-height: 38px;
font-size: 1.667vw;
line-height: 1.967vw;
font-weight: 400;
margin-bottom: 2rem;
}
......@@ -3432,10 +3451,10 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block;
/* border: 1px solid #000; */
border-radius: 12px;
font-size: 22px;
font-size: 1.146vw;
line-height: 22px;
margin: 0.5rem;
min-width: 155px;
min-width: 9vw;
text-align: center;
background: #f7f5f1;
display: flex;
......@@ -3498,7 +3517,7 @@ input[type="number"]::-webkit-outer-spin-button {
margin-bottom: 1rem;
}
.gift-card-rt .title {
font-size: 32px;
font-size: 1.667vw;
margin-bottom: 0.5rem;
}
.gift-card-amt {
......@@ -3699,6 +3718,10 @@ img:hover {
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link.active{
color: #000;
font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
font-size: 0.833vw;
......@@ -3748,6 +3771,21 @@ img:hover {
}
}
@media (max-width: 1023px) {
.swiper-nav, .home_nav {
margin-left: -25px;
}
p {
font-size: 1.3vw;
line-height: 1.5vw;
}
.testimonial-item .name {
font-size: 1.85vw;
line-height: 2vw;
margin-top: 1rem;
}
body {
font-size: 1.264vw !important;
}
.product-info .product-name {
font-size: 20px;
line-height: 30px;
......@@ -3779,6 +3817,44 @@ img:hover {
}
@media (max-width: 767px) {
.gift-card-amt ul li a, .gift-card-amt ul li label {
min-width: 40vw;
}
.blog-detail-inner-session h2 {
font-size: 4.867vw;
line-height: 6.967vw;
margin-bottom: 1rem;
}
.blog-item .top-rated {
font-size: 2.8vw;
}
.blog-item .info .read-more .btn {
font-size: 3vw;
line-height: 3vw;
}
.blog-item .info .title {
font-size: 1.2rem;
line-height: 1.5rem;
}
p {
font-size: 0.9rem;
line-height: 1.5rem;
}
.product-info .location {
font-size: 1.3rem;
line-height: 1.5rem;
}
.browse-experiences-item .info .discription {
font-size: 0.813rem;
line-height: 1rem;
}
.browse-experiences-item .info .price {
font-size: 1rem;
line-height: 1.15rem;
}
body {
font-size: 0.875rem !important;
}
.gift-card-amt ul li a, .gift-card-amt ul li label > span {
font-size: 12px;
}
......@@ -3809,8 +3885,8 @@ img:hover {
width: 3vw;
}
.box-01 .head {
font-size: 16px;
line-height: 18px;
font-size: 1rem;
line-height: 1.2rem;
padding: 1rem;
}
.sub-categories a{
......@@ -4036,6 +4112,13 @@ img:hover {
}
@media (max-width: 767px) {
.form-select {
font-size: 0.9rem;
}
.data-filters-item label {
font-size: 0.8rem;
line-height: 1rem;
}
.container-fluid {
max-width: 100vw;
}
......@@ -4065,8 +4148,8 @@ img:hover {
}
.signUp-to-experience-our-platform .title {
font-size: 32px;
line-height: 33px;
font-size: 1.5rem;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
......@@ -4092,8 +4175,8 @@ img:hover {
}
.gift-an-experience-inner .content .title {
font-size: 32px;
line-height: 35px;
font-size: 2rem;
line-height: 2rem;
}
.gift-an-experience-inner {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!