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 178 additions and 55 deletions
components/blog-details/BlogsDetailInner.js
...@@ -12,7 +12,7 @@ const BlogsDetailInner = ({ blog }) => { ...@@ -12,7 +12,7 @@ const BlogsDetailInner = ({ blog }) => {
<section className="blog-detail-inner-session"> <section className="blog-detail-inner-session">
<div className="container"> <div className="container">
<div className="row align-items-center mb-3"> <div className="row align-items-center mb-3">
<div className="col-md-6"> <div className="col-6">
<div className="profile"> <div className="profile">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
...@@ -20,7 +20,7 @@ const BlogsDetailInner = ({ blog }) => { ...@@ -20,7 +20,7 @@ const BlogsDetailInner = ({ blog }) => {
<div className="name">{mainBlog?.attributes?.name}</div> <div className="name">{mainBlog?.attributes?.name}</div>
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-6">
<div className="date"> <div className="date">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
......
components/blog-details/MostReadBlogs.js
...@@ -32,7 +32,8 @@ const MostReadBlogs = () => { ...@@ -32,7 +32,8 @@ const MostReadBlogs = () => {
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-12 position-relative"> <div className="col-12">
<div className="position-relative">
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
// autoplay={{ // autoplay={{
...@@ -62,12 +63,7 @@ const MostReadBlogs = () => { ...@@ -62,12 +63,7 @@ const MostReadBlogs = () => {
BlogData.map(data => { BlogData.map(data => {
return ( return (
<SwiperSlide> <SwiperSlide>
<motion.div <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="blog-item"> <div className="blog-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
...@@ -113,6 +109,7 @@ const MostReadBlogs = () => { ...@@ -113,6 +109,7 @@ const MostReadBlogs = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
); );
}; };
......
components/blog/BlogItem.js
...@@ -300,7 +300,7 @@ const BlogsItem = ({blogs}) => { ...@@ -300,7 +300,7 @@ const BlogsItem = ({blogs}) => {
<div className="col-12"> <div className="col-12">
<div className="row"> <div className="row">
{blogs && {blogs &&
blogs.map(data => { blogs?.map(data => {
return ( return (
<div className="col-md-4"> <div className="col-md-4">
<div className="blog-item"> <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 \ No newline at end of file
components/layout/Header.js
...@@ -10,6 +10,7 @@ import { useRouter } from "next/router"; ...@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
import { getWishlists } from "../../redux/actions/activityAction"; import { getWishlists } from "../../redux/actions/activityAction";
import { Typeahead } from "react-bootstrap-typeahead"; import { Typeahead } from "react-bootstrap-typeahead";
import axios from "axios"; import axios from "axios";
import ActiveLink from "../common/ActiveLink";
const Header = () => { const Header = () => {
const { loadedUser } = useSelector(state => state.loadedUser); const { loadedUser } = useSelector(state => state.loadedUser);
...@@ -55,13 +56,22 @@ const Header = () => { ...@@ -55,13 +56,22 @@ const Header = () => {
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<Nav.Link href="/blog">Blogs</Nav.Link> <ActiveLink href="/blog" activeClassName="active">
<Nav.Link href="/gift-card" className="gift-card"> <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 Gift Card
<span className="image-container"> <span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span> </span>
</Nav.Link> </Nav.Link> */}
</Nav> </Nav>
<Form className="d-flex me-3"> <Form className="d-flex me-3">
<div className="header-search"> <div className="header-search">
......
components/listing/ListingFilter.js
...@@ -201,9 +201,10 @@ const ListingFilter = () => { ...@@ -201,9 +201,10 @@ const ListingFilter = () => {
<div className="head">Date</div> <div className="head">Date</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="data-filters-item">
<div className="row"> <div className="row">
<div className="col-6"> <div className="col-6 ">
<div>From</div> <label>From</label>
<Space direction="vertical"> <Space direction="vertical">
<DatePicker <DatePicker
onChange={(date, dateString) => { onChange={(date, dateString) => {
...@@ -214,7 +215,7 @@ const ListingFilter = () => { ...@@ -214,7 +215,7 @@ const ListingFilter = () => {
</Space> </Space>
</div> </div>
<div className="col-6"> <div className="col-6">
<div>To</div> <label>To</label>
<Space direction="vertical"> <Space direction="vertical">
<DatePicker <DatePicker
onChange={(date, dateString) => { onChange={(date, dateString) => {
...@@ -227,6 +228,7 @@ const ListingFilter = () => { ...@@ -227,6 +228,7 @@ const ListingFilter = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="box-01"> <div className="box-01">
<div className="p-all"> <div className="p-all">
......
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"; 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) { switch (action.type) {
case FETCH_BLOGS_REQUEST: case FETCH_BLOGS_REQUEST:
return { return {
......
styles/globals.css
...@@ -120,7 +120,7 @@ html { ...@@ -120,7 +120,7 @@ html {
body { body {
line-height: 1.4; line-height: 1.4;
font-family: "Sofia Pro", sans-serif !important; font-family: "Sofia Pro", sans-serif !important;
font-size: 16px !important; font-size: 0.833vw !important;
overflow-x: hidden; overflow-x: hidden;
font-weight: 400 !important; font-weight: 400 !important;
color: #000; color: #000;
...@@ -618,8 +618,8 @@ input:focus-visible { ...@@ -618,8 +618,8 @@ input:focus-visible {
p { p {
/* color: #000; /* color: #000;
font-family: "Sofia Pro Light"; */ font-family: "Sofia Pro Light"; */
font-size: 15px; font-size: 0.781vw;
line-height: 20px; line-height: 0.981vw;
} }
span.form-error, span.form-error,
...@@ -1928,6 +1928,12 @@ span.form-error, ...@@ -1928,6 +1928,12 @@ span.form-error,
position: relative; position: relative;
color: #000; 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 { .top-rated {
position: absolute; position: absolute;
...@@ -1966,8 +1972,8 @@ span.form-error, ...@@ -1966,8 +1972,8 @@ span.form-error,
} }
.browse-experiences-item .info .discription { .browse-experiences-item .info .discription {
font-size: 13px; font-size: 0.677vw;
line-height: 15px; line-height: 1.1vw;
color: #808080; color: #808080;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -1989,8 +1995,8 @@ span.form-error, ...@@ -1989,8 +1995,8 @@ span.form-error,
} }
.browse-experiences-item .info .price { .browse-experiences-item .info .price {
font-size: 20px; font-size: 1.042vw;
line-height: 20px; line-height: 1.042vw;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -2006,7 +2012,9 @@ span.form-error, ...@@ -2006,7 +2012,9 @@ span.form-error,
line-height: 11px; line-height: 11px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.browse-experiences-item .info .detail>div{
margin-bottom: 0.4rem;
}
.btn-outline-secondary { .btn-outline-secondary {
border: 1px solid #000; border: 1px solid #000;
font-size: 16px; font-size: 16px;
...@@ -2036,8 +2044,8 @@ span.form-error, ...@@ -2036,8 +2044,8 @@ span.form-error,
overflow: hidden; overflow: hidden;
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 40px; font-size: 2.083vw;
line-height: 40px; line-height: 2.083vw;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -2081,8 +2089,8 @@ span.form-error, ...@@ -2081,8 +2089,8 @@ span.form-error,
} }
.testimonial-item .name { .testimonial-item .name {
font-size: 24px; font-size: 1.25vw;
line-height: 24px; line-height: 1.25vw;
margin-top: 1rem; margin-top: 1rem;
} }
...@@ -2200,8 +2208,8 @@ footer hr { ...@@ -2200,8 +2208,8 @@ footer hr {
} }
.box-01 .head { .box-01 .head {
font-size: 20px; font-size: 1.042vw;
line-height: 20px; line-height: 1.042vw;
padding: 1rem; padding: 1rem;
} }
...@@ -2257,12 +2265,20 @@ footer hr { ...@@ -2257,12 +2265,20 @@ footer hr {
} }
.data-filters-item label { .data-filters-item label {
font-size: 14px; font-size: 0.729vw;
line-height: 0.729vw;
font-weight: 300; font-weight: 300;
display: flex;
align-items: center;
margin-bottom: 0.4rem;
} }
.form-select{
font-size: 0.833vw;
}
.data-filters-item label input { .data-filters-item label input {
margin-right: 0.2rem; margin-right: 0.4rem;
margin-top: -4px;
} }
.data-filters-item { .data-filters-item {
...@@ -2298,6 +2314,7 @@ footer hr { ...@@ -2298,6 +2314,7 @@ footer hr {
.box-01 .form-select { .box-01 .form-select {
border-color: #c3c3c3; border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem; padding: 0.575rem 2.55rem 0.575rem 0.95rem;
margin-bottom: 1rem;
} }
.box-01 .show-all { .box-01 .show-all {
...@@ -2522,8 +2539,8 @@ footer hr { ...@@ -2522,8 +2539,8 @@ footer hr {
} }
.product-info .location { .product-info .location {
font-size: 1.5rem; font-size: 1.25vw;
line-height: 1.5rem; line-height: 1.25vw;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -2565,9 +2582,11 @@ footer hr { ...@@ -2565,9 +2582,11 @@ footer hr {
} }
.image-gallery-content .image-gallery-slide .image-gallery-image { .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 { .breadcrumb-item + .breadcrumb-item::before {
content: ""; content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat; background: url(/images/icons/arrow-right-grey.svg) no-repeat;
...@@ -2734,8 +2753,8 @@ button:focus:not(:focus-visible) { ...@@ -2734,8 +2753,8 @@ button:focus:not(:focus-visible) {
display: none; display: none;
} }
.accordion-01 .accordion-button { .accordion-01 .accordion-button {
font-size: 20px; font-size: 1.042vw;
line-height: 28px; line-height: 1.042vw;
color: #000000; color: #000000;
position: relative; position: relative;
padding-top: 30px !important; padding-top: 30px !important;
...@@ -3258,7 +3277,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3258,7 +3277,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
font-size: 13px; font-size: 0.677vw;
font-weight: 700; font-weight: 700;
} }
...@@ -3281,8 +3300,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3281,8 +3300,8 @@ input[type="number"]::-webkit-outer-spin-button {
} }
.blog-item .info .title { .blog-item .info .title {
font-size: 20px; font-size: 1.042vw;
line-height: 24px; line-height: 1.542vw;
margin-bottom: 1rem; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -3302,8 +3321,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3302,8 +3321,8 @@ input[type="number"]::-webkit-outer-spin-button {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.blog-item .info .read-more .btn { .blog-item .info .read-more .btn {
font-size: 13px; font-size: 0.677vw;
line-height: 15px; line-height: 0.677vw;
padding-top: 0.675rem; padding-top: 0.675rem;
padding-bottom: 0.675rem; padding-bottom: 0.675rem;
} }
...@@ -3364,8 +3383,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3364,8 +3383,8 @@ input[type="number"]::-webkit-outer-spin-button {
display: block; display: block;
} }
.blog-detail-inner-session h2 { .blog-detail-inner-session h2 {
font-size: 32px; font-size: 1.667vw;
line-height: 38px; line-height: 1.967vw;
font-weight: 400; font-weight: 400;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
...@@ -3432,10 +3451,10 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3432,10 +3451,10 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block; display: inline-block;
/* border: 1px solid #000; */ /* border: 1px solid #000; */
border-radius: 12px; border-radius: 12px;
font-size: 22px; font-size: 1.146vw;
line-height: 22px; line-height: 22px;
margin: 0.5rem; margin: 0.5rem;
min-width: 155px; min-width: 9vw;
text-align: center; text-align: center;
background: #f7f5f1; background: #f7f5f1;
display: flex; display: flex;
...@@ -3498,7 +3517,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3498,7 +3517,7 @@ input[type="number"]::-webkit-outer-spin-button {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.gift-card-rt .title { .gift-card-rt .title {
font-size: 32px; font-size: 1.667vw;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.gift-card-amt { .gift-card-amt {
...@@ -3699,6 +3718,10 @@ img:hover { ...@@ -3699,6 +3718,10 @@ img:hover {
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link.active{
color: #000;
font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
font-size: 0.833vw; font-size: 0.833vw;
...@@ -3748,6 +3771,21 @@ img:hover { ...@@ -3748,6 +3771,21 @@ img:hover {
} }
} }
@media (max-width: 1023px) { @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 { .product-info .product-name {
font-size: 20px; font-size: 20px;
line-height: 30px; line-height: 30px;
...@@ -3779,6 +3817,44 @@ img:hover { ...@@ -3779,6 +3817,44 @@ img:hover {
} }
@media (max-width: 767px) { @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 { .gift-card-amt ul li a, .gift-card-amt ul li label > span {
font-size: 12px; font-size: 12px;
} }
...@@ -3809,8 +3885,8 @@ img:hover { ...@@ -3809,8 +3885,8 @@ img:hover {
width: 3vw; width: 3vw;
} }
.box-01 .head { .box-01 .head {
font-size: 16px; font-size: 1rem;
line-height: 18px; line-height: 1.2rem;
padding: 1rem; padding: 1rem;
} }
.sub-categories a{ .sub-categories a{
...@@ -4036,6 +4112,13 @@ img:hover { ...@@ -4036,6 +4112,13 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.form-select {
font-size: 0.9rem;
}
.data-filters-item label {
font-size: 0.8rem;
line-height: 1rem;
}
.container-fluid { .container-fluid {
max-width: 100vw; max-width: 100vw;
} }
...@@ -4065,8 +4148,8 @@ img:hover { ...@@ -4065,8 +4148,8 @@ img:hover {
} }
.signUp-to-experience-our-platform .title { .signUp-to-experience-our-platform .title {
font-size: 32px; font-size: 1.5rem;
line-height: 33px; line-height: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
...@@ -4092,8 +4175,8 @@ img:hover { ...@@ -4092,8 +4175,8 @@ img:hover {
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 32px; font-size: 2rem;
line-height: 35px; line-height: 2rem;
} }
.gift-an-experience-inner { .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!