Skip to content

Jay Mehta / zango-frontend

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

updated ui

1 parent 2b663a1a
Inline Side-by-side
Showing 9 changed files with 260 additions and 158 deletions
components/detail/Detail.js
import React, { Fragment, useEffect } from "react";
import React, { Fragment, useEffect, useState } from "react";
import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo";
import { Breadcrumb } from "react-bootstrap";
......@@ -9,8 +9,11 @@ import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform
import { useDispatch, useSelector } from "react-redux";
import { getActivitiesByFilters } from "../../redux/actions/activityAction";
import { useRouter } from "next/router";
import Image from "next/image";
import DetailSchedule from "./DetailSchedule";
const Detail = () => {
const router = useRouter();
const dispatch = useDispatch();
const { allActivitiesData } = useSelector(state => state.allActivitiesData);
......@@ -42,7 +45,7 @@ const Detail = () => {
</div>
</div>
</div>
<div className="row mb-5">
<div className="row">
<div className="col-xl-5">
<DetailGallery activityById={activityById}></DetailGallery>
</div>
......@@ -50,6 +53,7 @@ const Detail = () => {
<DetailInfo activityById={activityById}></DetailInfo>
</div>
</div>
<DetailSchedule activityById={activityById} />
</div>
</section>
<GuestReviews activityById={activityById} />
......
components/detail/DetailGallery.js
......@@ -3,15 +3,9 @@ import ImageGallery from "react-image-gallery";
import Image from "next/image";
const DetailGallery = ({ activityById }) => {
const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const images = [
{
original: "/images/product-gallery/01.png",
......@@ -39,31 +33,7 @@ const DetailGallery = ({ activityById }) => {
}
];
const returnAvilablleDaysArray = ({ data }) => {
let array = [];
if (data.attributes.availableOnMonday) {
array = [...array, { name: "Monday", value: "monday" }];
}
if (data.attributes.availableOnTuesday) {
array = [...array, { name: "Tuesday", value: "tuesday" }];
}
if (data.attributes.availableOnWednesday) {
array = [...array, { name: "Wednesday", value: "wednesday" }];
}
if (data.attributes.availableOnThursday) {
array = [...array, { name: "Thursday", value: "thursday" }];
}
if (data.attributes.availableOnFriday) {
array = [...array, { name: "Friday", value: "friday" }];
}
if (data.attributes.availableOnSaturday) {
array = [...array, { name: "Saturday", value: "saturday" }];
}
if (data.attributes.availableOnSunday) {
array = [...array, { name: "Sunday", value: "sunday" }];
}
return array;
};
return (
<>
<div className="product-info hide-on-desktop">
......@@ -94,61 +64,7 @@ const DetailGallery = ({ activityById }) => {
</div>
</div>
</div>
<div className="row hide-on-mobile">
{activityById && (
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: {activityById.data.attributes.phoneNumber}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Active on:{" "}
{returnAvilablleDaysArray({ data: activityById.data })
.map(item => {
return item.name;
})
.join(", ")}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: {activityById.data.attributes.ageLowerLimit}+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
</ul>
</div>
)}
</div>
</div>
</>
);
......
components/detail/DetailSchedule.js 0 → 100644
import Image from 'next/image';
import React, { useState } from 'react'
const DetailSchedule = ({activityById}) => {
const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const returnAvilablleDaysArray = ({ data }) => {
let array = [];
if (data.attributes.availableOnMonday) {
array = [...array, { name: "Monday", value: "monday" }];
}
if (data.attributes.availableOnTuesday) {
array = [...array, { name: "Tuesday", value: "tuesday" }];
}
if (data.attributes.availableOnWednesday) {
array = [...array, { name: "Wednesday", value: "wednesday" }];
}
if (data.attributes.availableOnThursday) {
array = [...array, { name: "Thursday", value: "thursday" }];
}
if (data.attributes.availableOnFriday) {
array = [...array, { name: "Friday", value: "friday" }];
}
if (data.attributes.availableOnSaturday) {
array = [...array, { name: "Saturday", value: "saturday" }];
}
if (data.attributes.availableOnSunday) {
array = [...array, { name: "Sunday", value: "sunday" }];
}
return array;
};
return (
<div className="row hide-on-mobile mb-5">
{activityById && (
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: {activityById.data.attributes.phoneNumber}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Active on:{" "}
{returnAvilablleDaysArray({ data: activityById.data })
.map(item => {
return item.name;
})
.join(", ")}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: {activityById.data.attributes.ageLowerLimit}+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
</ul>
</div>
)}
</div>
)
}
export default DetailSchedule
components/detail/GuestReviews.js
......@@ -29,7 +29,7 @@ const GuestReviews = ({activityById}) => {
<section className="guest-reviews-session">
<div className="container">
<div className="row">
<div className="col-md-10">
<div className="col-md-12">
<div className="row">
<div className="col-12">
<div className="head-btn">
......
components/layout/Header.js
......@@ -89,7 +89,7 @@ const Header = () => {
</Button>
</div>
) : (
<div>
<div className="top-btn">
<Button
onClick={() => {
router.push("/signup/user");
......
components/listing/ListingFilter.js
......@@ -26,7 +26,7 @@ const ListingFilter = () => {
<div className="listing-filter">
<div className="box-01">
<div className="df-sb p-all">
<div className="head">Filter By:</div>
<div className="head">Filter By</div>
<div className="reset">
<a
onClick={e => {
......@@ -148,13 +148,15 @@ const ListingFilter = () => {
})}
</div>
) : (
<div className="inner">
<div className="m-2 text-center">* Please select a category to explore sub categories </div>
</div>
)}
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Activity Type:</div>
<div className="head">Activity Type</div>
</div>
<div className="inner">
<div className="data-filters-item">
......@@ -231,7 +233,14 @@ const ListingFilter = () => {
<div className="head">Duration</div>
</div>
<div className="inner">
<div className="data-filters-item">
<div className="time-filter">
<div className="time-field">
<div className="time">
<div>
<label>Minimum duration:</label>
</div>
<div className="">
<Input
placeholder="in minutes"
type="number"
......@@ -242,7 +251,13 @@ const ListingFilter = () => {
}, 1500);
}}
></Input>
<label>Maximum duration:</label>
</div>
</div>
<div className="time">
<div>
<label>Minimum duration:</label>
</div>
<div className="">
<Input
placeholder="in minutes"
type="number"
......@@ -255,6 +270,11 @@ const ListingFilter = () => {
></Input>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Group Size</div>
......@@ -320,7 +340,7 @@ const ListingFilter = () => {
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Suitable Age Group:</div>
<div className="head">Suitable Age Group</div>
</div>
<div className="inner">
<Form.Select
......
components/listing/ListingInner.js
......@@ -24,6 +24,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
const [gridClass, setGridClass] = useState('col-md-3');
const handleGridChange = (className) => {
setGridClass(className);
};
useEffect(() => {
const handleResize = () => {
// console.log("Window Width:");
......@@ -106,7 +111,10 @@ const ListingInner = ({ allActivitiesData, loading }) => {
<section className="listing-inner-session">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="col-md-6">
<h3 className="heading03">Sub Category Tags:</h3>
</div>
<div className="col-md-6">
<div className="filter-dd">
<div className="filter-view box-inner">
<a onClick={toggleFilterViewDropdown}>
......@@ -132,11 +140,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" />
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" onClick={() => handleGridChange('col-md-4')} />
<label htmlFor="3 Grid View">3 Grid View</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" onClick={() => handleGridChange('col-md-3')} defaultChecked />
<label htmlFor="4 Grid View">4 Grid View</label>
</li>
</ul>
......@@ -210,7 +218,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
)}
<div className="col-md-9">
<ListingItems allActivitiesData={allActivitiesData} loading={loading} />
<ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} />
</div>
</div>
</div>
......
components/listing/ListingItems.js
import { Empty } from "antd";
import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead";
import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
const ListingItems = ({ allActivitiesData, loading }) => {
const ListingItems = ({ allActivitiesData, loading, gridClass }) => {
// const [gridClass, setGridClass] = useState('col-md-3');
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser);
const router = useRouter();
return (
<>
{allActivitiesData && !allActivitiesData.data.length == 0 ? (
......@@ -21,7 +23,7 @@ const ListingItems = ({ allActivitiesData, loading }) => {
{allActivitiesData &&
allActivitiesData.data.map(data => {
return (
<div className="col-md-3">
<div className={gridClass}>
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
......
styles/globals.css
......@@ -359,13 +359,15 @@ header {
}
.navbar-brand {
width: 133px;
width: 6.927vw;
}
.header-search {
position: relative;
}
.header-search>.form-control{
font-size: 0.833vw;
}
.header-search .search-icon {
position: absolute;
right: 0;
......@@ -374,7 +376,7 @@ header {
}
.header-search .search-icon .image-container {
width: 17px;
width: 0.885vw;
display: block;
}
......@@ -2195,8 +2197,11 @@ footer hr {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.box-01 .reset a:hover{
color: #0070bd;
}
.box-01 .reset a .image-container {
margin-left: 0.5rem;
}
......@@ -2309,13 +2314,13 @@ footer hr {
.time-filter .time input {
width: 55px;
text-align: center;
/* text-align: center; */
}
.time-filter .time-field {
display: flex;
align-items: center;
width: 70%;
/* width: 70%; */
}
.time-filter .time-field .time:first-child {
......@@ -2438,7 +2443,7 @@ footer hr {
.product-info .top-row .most-booked {
color: #808080;
font-size: 24px;
font-size: 1.25vw;
}
.product-reviews {
......@@ -2470,14 +2475,15 @@ footer hr {
}
.product-info .product-name {
font-size: 3.438rem;
line-height: 4.813rem;
/* font-size: calc(2.865vw + 2.865vh + 2.865vmin) ; */
font-size: 2.565vw;
line-height: 2.865vw;
font-weight: 700;
}
.product-info .price {
font-size: 2.5rem;
line-height: 2.5rem;
font-size: 2.083vw;
line-height: 2.083vw;
}
.product-info .price > span {
......@@ -2506,9 +2512,10 @@ footer hr {
}
.image-container.btn-gift {
width: 18px;
width: 0.938vw;
display: inline-block;
vertical-align: text-bottom;
margin-left: 0.5rem;
}
.btn-secondary {
......@@ -2544,7 +2551,7 @@ footer hr {
}
.btn {
font-size: 16px;
font-size: 0.833vw;
}
.availability-wrappper {
......@@ -2555,7 +2562,7 @@ footer hr {
}
.availability-wrappper li {
width: 46%;
width: 32%;
display: flex;
align-items: center;
margin: 0.5rem;
......@@ -2833,47 +2840,14 @@ input[type="number"]::-webkit-outer-spin-button {
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
z-index: 999; /* Ensure the overlay appears above other content */
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
align-items: center;
justify-content: flex-end;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card {
display: flex;
align-items: center;
position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card::after {
content: "";
background: #000;
height: 2px;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 21px;
margin-left: 10px;
}
.mySwiper01 .swiper-button-prev:after {
.let-discover-session.let-discover-listing-session .swiper-nav,
.home_nav {
width: 106%;
}
.mySwiper01 .swiper-button-prev:after {
background: url(/images/icons/arrow-left.svg) no-repeat center;
}
}
.mySwiper01 .swiper-button-next:after {
background: url(/images/icons/arrow-right.svg) no-repeat center;
}
......@@ -3558,6 +3532,11 @@ img:hover {
transition: all 0.6s ease-out;
overflow: hidden;
}
.heading03{
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
......@@ -3591,6 +3570,42 @@ img:hover {
width: 21px;
margin-left: 10px;
}
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
font-size: 0.833vw;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
align-items: center;
justify-content: flex-end;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card {
display: flex;
align-items: center;
position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card::after {
content: "";
background: #000;
height: 2px;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 1.094vw;
margin-left: 10px;
}
}
@media (min-width: 768px) {
......@@ -3598,7 +3613,14 @@ img:hover {
display: none !important;
}
}
@media only screen and (max-width: 1440px) and (min-width: 1279px){
.availability-wrappper li {
width: 31%;
}
.let-discover-session.let-discover-listing-session .swiper-nav, .home_nav {
width: 108%;
}
}
@media (max-width: 1023px) {
.product-info .product-name {
font-size: 20px;
......@@ -3631,13 +3653,45 @@ img:hover {
}
@media (max-width: 767px) {
.let-discover-session.let-discover-listing-session .swiper-nav, .home_nav {
width: 100%;
}
.swiper-nav, .home_nav {
left: 0;
width: 100%;
margin-left: 0;
}
.home-banner .swiper-button-prev, .home-banner .swiper-button-next{
display: none;
}
.product-info .price {
font-size: 3.883vw;
line-height: 3.883vw;
margin-bottom: 1rem;
}
.top-btn{
margin-bottom: 1rem;
}
.header-search .search-icon .image-container {
width: 3.585vw;
}
.header-search>.form-control {
font-size: 3vw;
margin-bottom: 1rem;
}
.btn {
font-size: 3vw;
}
.navbar-brand {
width: 16.927vw;
}
.info .top-name .title {
font-size: 4vw;
}
}
.home-banner .banner-txt .disc {
font-size: 3vw;
line-height: 4vw;
}
}
.home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px;
}
......@@ -3737,7 +3791,7 @@ img:hover {
}
.browse-experiences-session .swiper-nav {
display: none;
/* display: none; */
}
.swiper-nav {
......@@ -3764,6 +3818,7 @@ img:hover {
.footer-link h3 {
font-size: 20px;
line-height: 20px;
}
footer .footer-link.mtp-0 {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!