Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 8c3cbf8e by jaymehta
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents cf1a2379 9f6e93ca
Inline Side-by-side
Showing 14 changed files with 301 additions and 166 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/detail/GuestReviews.js
......@@ -99,8 +99,8 @@ const GuestReviews = ({ activityById }) => {
<StarRatings
className="col-3 mx-2"
rating={data.attributes.rating}
starRatedColor="yellow" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow
starRatedColor="#ffe20" // Set the rated color to yellow
starHoverColor="#ffe20" // Set the hover color to yellow
changeRating={() => {}}
numberOfStars={5}
name="rating"
......@@ -141,8 +141,8 @@ const GuestReviews = ({ activityById }) => {
<StarRatings
className="col-3 mx-2"
rating={rating}
starRatedColor="yellow" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow
starRatedColor="#ffe20" // Set the rated color to yellow
starHoverColor="#ffe20" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
name="rating"
......
components/detail/SimilarExperiences.js
......@@ -117,7 +117,7 @@ const SimilarExperiences = ({ allActivitiesData }) => {
<div className="title">{data.title}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
<span className="number">8.8</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
......
components/home/BrowseExperiences.js
......@@ -91,7 +91,7 @@ const BrowseExperiences = ({ allActivitiesData }) => {
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
{data?.attributes?.rating}
<span className="number">{data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
......
components/home/ProductItem.js
......@@ -73,7 +73,7 @@ const ProductItem = () => {
<div className="title">{data.title}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
<span className="number">8.8</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
......
components/home/Testimonial.js
......@@ -52,8 +52,8 @@ const Testimonial = ({ testimonial }) => {
<div className="rating">
<StarRatings
rating={rating}
starRatedColor="yellow" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow
starRatedColor="#ffe200" // Set the rated color to yellow
starHoverColor="#ffe200" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
name='rating'
......
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>
......
components/listing/ListingItems.js
......@@ -61,7 +61,7 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
{data?.attributes?.rating}
<span className="number">{data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
......
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;
......@@ -1952,8 +1958,13 @@ span.form-error,
padding: 0.1rem 0.3rem;
margin-right: 10px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
}
.info .rating-wishlist .rating .number{
padding-top: 0.2rem;
}
.info .rating-wishlist .wishlist .image-container {
width: 19px;
display: block;
......@@ -1961,13 +1972,15 @@ span.form-error,
.info .rating-wishlist .rating .image-container {
width: 14px;
margin-top: -4px;
/* margin-top: -4px; */
margin-left: 4px;
}
.product-info .wishlist-share > div {
margin-bottom: 1rem;
}
.browse-experiences-item .info .discription {
font-size: 13px;
line-height: 15px;
font-size: 0.677vw;
line-height: 0.8vw;
color: #808080;
margin-bottom: 10px;
}
......@@ -1989,8 +2002,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 +2019,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 +2051,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 +2096,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 +2215,8 @@ footer hr {
}
.box-01 .head {
font-size: 20px;
line-height: 20px;
font-size: 1.042vw;
line-height: 1.042vw;
padding: 1rem;
}
......@@ -2257,12 +2272,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 +2321,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 +2546,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 +2589,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 +2760,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;
......@@ -2815,7 +2841,8 @@ button:focus:not(:focus-visible) {
-ms-overflow-style: none;
scrollbar-width: none;
}
.active>.page-link, .page-link.active{
.active > .page-link,
.page-link.active {
background-color: #0070bd;
border-color: #0070bd;
}
......@@ -3258,7 +3285,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 +3308,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 +3329,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 +3391,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 +3459,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 +3525,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 +3726,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 +3779,22 @@ 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,41 +3826,82 @@ img:hover {
}
@media (max-width: 767px) {
.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 {
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;
}
.gift-card-amt ul li a, .gift-card-amt ul li label {
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
font-size: 16px;
height: 70px;
}
}
.s-page-session {
margin: 3rem 0;
}
}
.accordion-01 .accordion-button {
font-size: 16px;
line-height: 20px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
}
.faqs-session {
padding: 1rem 0 3rem;
}
}
.availability-wrappper li {
margin: 0.5rem 0.5rem;
font-size: 14px;
}
}
.availability-wrappper {
margin-top: 0rem;
}
}
.image-container.btn-gift {
width: 3vw;
}
}
.box-01 .head {
font-size: 16px;
line-height: 18px;
font-size: 1rem;
line-height: 1.2rem;
padding: 1rem;
}
.sub-categories a{
}
.sub-categories a {
font-size: 12px;
padding: 1rem;
height: 2rem;
......@@ -4005,7 +4093,7 @@ img:hover {
.our-mission .inner .title {
font-size: 20px;
line-height: 20px;
}
}
.page-title-one {
background: url(/images/banner/about-us-m.png) no-repeat;
}
......@@ -4036,6 +4124,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 +4160,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 +4187,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!