Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b22736c5 by jaymehta
Options

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

2 parents a216359b b4548c96
Inline Side-by-side
Showing 9 changed files with 287 additions and 182 deletions
components/detail/Detail.js
import React, { Fragment, useEffect } from "react"; import React, { Fragment, useEffect, useState } from "react";
import DetailGallery from "./DetailGallery"; import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo"; import DetailInfo from "./DetailInfo";
import { Breadcrumb } from "react-bootstrap"; import { Breadcrumb } from "react-bootstrap";
...@@ -9,8 +9,11 @@ import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform ...@@ -9,8 +9,11 @@ import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getActivitiesByFilters } from "../../redux/actions/activityAction"; import { getActivitiesByFilters } from "../../redux/actions/activityAction";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from "next/image";
import DetailSchedule from "./DetailSchedule";
const Detail = () => { const Detail = () => {
const router = useRouter(); const router = useRouter();
const dispatch = useDispatch(); const dispatch = useDispatch();
const { allActivitiesData } = useSelector(state => state.allActivitiesData); const { allActivitiesData } = useSelector(state => state.allActivitiesData);
...@@ -21,7 +24,7 @@ const Detail = () => { ...@@ -21,7 +24,7 @@ const Detail = () => {
// console.log("router", activityById.data.attributes.category?.data?.attributes.name); // console.log("router", activityById.data.attributes.category?.data?.attributes.name);
dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id })); dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id }));
}, [activityById]); }, [activityById]);
console.log("faqs=>", faqs) console.log("faqs=>", faqs)
console.log("activityById", activityById); console.log("activityById", activityById);
console.log("loadedUser", loadedUser); console.log("loadedUser", loadedUser);
...@@ -42,7 +45,7 @@ const Detail = () => { ...@@ -42,7 +45,7 @@ const Detail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="row mb-5"> <div className="row">
<div className="col-xl-5"> <div className="col-xl-5">
<DetailGallery activityById={activityById}></DetailGallery> <DetailGallery activityById={activityById}></DetailGallery>
</div> </div>
...@@ -50,6 +53,7 @@ const Detail = () => { ...@@ -50,6 +53,7 @@ const Detail = () => {
<DetailInfo activityById={activityById}></DetailInfo> <DetailInfo activityById={activityById}></DetailInfo>
</div> </div>
</div> </div>
<DetailSchedule activityById={activityById} />
</div> </div>
</section> </section>
<GuestReviews activityById={activityById} /> <GuestReviews activityById={activityById} />
......
components/detail/DetailGallery.js
...@@ -3,15 +3,9 @@ import ImageGallery from "react-image-gallery"; ...@@ -3,15 +3,9 @@ import ImageGallery from "react-image-gallery";
import Image from "next/image"; import Image from "next/image";
const DetailGallery = ({ activityById }) => { const DetailGallery = ({ activityById }) => {
const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const images = [ const images = [
{ {
original: "/images/product-gallery/01.png", original: "/images/product-gallery/01.png",
...@@ -39,31 +33,7 @@ const DetailGallery = ({ activityById }) => { ...@@ -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 ( return (
<> <>
<div className="product-info hide-on-desktop"> <div className="product-info hide-on-desktop">
...@@ -94,61 +64,7 @@ const DetailGallery = ({ activityById }) => { ...@@ -94,61 +64,7 @@ const DetailGallery = ({ activityById }) => {
</div> </div>
</div> </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> </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}) => { ...@@ -29,7 +29,7 @@ const GuestReviews = ({activityById}) => {
<section className="guest-reviews-session"> <section className="guest-reviews-session">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-md-10"> <div className="col-md-12">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="head-btn"> <div className="head-btn">
......
components/layout/Header.js
...@@ -89,7 +89,7 @@ const Header = () => { ...@@ -89,7 +89,7 @@ const Header = () => {
</Button> </Button>
</div> </div>
) : ( ) : (
<div> <div className="top-btn">
<Button <Button
onClick={() => { onClick={() => {
router.push("/signup/user"); router.push("/signup/user");
......
components/listing/ListingFilter.js
...@@ -26,7 +26,7 @@ const ListingFilter = () => { ...@@ -26,7 +26,7 @@ const ListingFilter = () => {
<div className="listing-filter"> <div className="listing-filter">
<div className="box-01"> <div className="box-01">
<div className="df-sb p-all"> <div className="df-sb p-all">
<div className="head">Filter By:</div> <div className="head">Filter By</div>
<div className="reset"> <div className="reset">
<a <a
onClick={e => { onClick={e => {
...@@ -148,13 +148,15 @@ const ListingFilter = () => { ...@@ -148,13 +148,15 @@ const ListingFilter = () => {
})} })}
</div> </div>
) : ( ) : (
<div className="m-2 text-center">* Please select a category to explore sub categories </div> <div className="inner">
<div className="m-2 text-center">* Please select a category to explore sub categories </div>
</div>
)} )}
</div> </div>
<div className="box-01"> <div className="box-01">
<div className="p-all"> <div className="p-all">
<div className="head">Activity Type:</div> <div className="head">Activity Type</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="data-filters-item"> <div className="data-filters-item">
...@@ -231,28 +233,46 @@ const ListingFilter = () => { ...@@ -231,28 +233,46 @@ const ListingFilter = () => {
<div className="head">Duration</div> <div className="head">Duration</div>
</div> </div>
<div className="inner"> <div className="inner">
<label>Minimum duration:</label> <div className="data-filters-item">
<Input <div className="time-filter">
placeholder="in minutes" <div className="time-field">
type="number" <div className="time">
onChange={e => { <div>
// console.log(e.target.value); <label>Minimum duration:</label>
setTimeout(() => { </div>
dispatch(setActivityFilters({ filters: { ...activityFilters, minDuration: e.target.value } })); <div className="">
}, 1500); <Input
}} placeholder="in minutes"
></Input> type="number"
<label>Maximum duration:</label> onChange={e => {
<Input // console.log(e.target.value);
placeholder="in minutes" setTimeout(() => {
type="number" dispatch(setActivityFilters({ filters: { ...activityFilters, minDuration: e.target.value } }));
onChange={e => { }, 1500);
// console.log(e.target.value); }}
setTimeout(() => { ></Input>
dispatch(setActivityFilters({ filters: { ...activityFilters, maxDuration: e.target.value } })); </div>
}, 1500); </div>
}} <div className="time">
></Input> <div>
<label>Minimum duration:</label>
</div>
<div className="">
<Input
placeholder="in minutes"
type="number"
onChange={e => {
// console.log(e.target.value);
setTimeout(() => {
dispatch(setActivityFilters({ filters: { ...activityFilters, maxDuration: e.target.value } }));
}, 1500);
}}
></Input>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div className="box-01"> <div className="box-01">
...@@ -320,7 +340,7 @@ const ListingFilter = () => { ...@@ -320,7 +340,7 @@ const ListingFilter = () => {
</div> </div>
<div className="box-01"> <div className="box-01">
<div className="p-all"> <div className="p-all">
<div className="head">Suitable Age Group:</div> <div className="head">Suitable Age Group</div>
</div> </div>
<div className="inner"> <div className="inner">
<Form.Select <Form.Select
......
components/listing/ListingInner.js
...@@ -24,6 +24,11 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -24,6 +24,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const toggleDropdown = () => { const toggleDropdown = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
}; };
const [gridClass, setGridClass] = useState('col-md-3');
const handleGridChange = (className) => {
setGridClass(className);
};
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
// console.log("Window Width:"); // console.log("Window Width:");
...@@ -110,7 +115,10 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -110,7 +115,10 @@ const ListingInner = ({ allActivitiesData, loading }) => {
<section className="listing-inner-session"> <section className="listing-inner-session">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <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-dd">
<div className="filter-view box-inner"> <div className="filter-view box-inner">
<a onClick={toggleFilterViewDropdown}> <a onClick={toggleFilterViewDropdown}>
...@@ -136,11 +144,11 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -136,11 +144,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
</div> </div>
<ul className="list-by"> <ul className="list-by">
<li> <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> <label htmlFor="3 Grid View">3 Grid View</label>
</li> </li>
<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> <label htmlFor="4 Grid View">4 Grid View</label>
</li> </li>
</ul> </ul>
...@@ -214,7 +222,7 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -214,7 +222,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
)} )}
<div className="col-md-9"> <div className="col-md-9">
<ListingItems allActivitiesData={allActivitiesData} loading={loading} /> <ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} />
</div> </div>
</div> </div>
</div> </div>
......
components/listing/ListingItems.js
import { Empty } from "antd"; import { Empty } from "antd";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React from "react"; import React, { useState } from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { Loader } from "react-bootstrap-typeahead"; import { Loader } from "react-bootstrap-typeahead";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent"; 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); const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser); console.log("endUser", endUser);
const router = useRouter(); const router = useRouter();
return ( return (
<> <>
{allActivitiesData && !allActivitiesData.data.length == 0 ? ( {allActivitiesData && !allActivitiesData.data.length == 0 ? (
...@@ -21,7 +23,7 @@ const ListingItems = ({ allActivitiesData, loading }) => { ...@@ -21,7 +23,7 @@ const ListingItems = ({ allActivitiesData, loading }) => {
{allActivitiesData && {allActivitiesData &&
allActivitiesData.data.map(data => { allActivitiesData.data.map(data => {
return ( return (
<div className="col-md-3"> <div className={gridClass}>
<div className="item"> <div className="item">
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <div className="img-wrapper">
......
styles/globals.css
...@@ -359,13 +359,15 @@ header { ...@@ -359,13 +359,15 @@ header {
} }
.navbar-brand { .navbar-brand {
width: 133px; width: 6.927vw;
} }
.header-search { .header-search {
position: relative; position: relative;
} }
.header-search>.form-control{
font-size: 0.833vw;
}
.header-search .search-icon { .header-search .search-icon {
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -374,7 +376,7 @@ header { ...@@ -374,7 +376,7 @@ header {
} }
.header-search .search-icon .image-container { .header-search .search-icon .image-container {
width: 17px; width: 0.885vw;
display: block; display: block;
} }
...@@ -2195,8 +2197,11 @@ footer hr { ...@@ -2195,8 +2197,11 @@ footer hr {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
cursor: pointer;
}
.box-01 .reset a:hover{
color: #0070bd;
} }
.box-01 .reset a .image-container { .box-01 .reset a .image-container {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
...@@ -2309,13 +2314,16 @@ footer hr { ...@@ -2309,13 +2314,16 @@ footer hr {
.time-filter .time input { .time-filter .time input {
width: 55px; width: 55px;
text-align: center; border: 1px solid #D1D1D1;
border-radius: 5px;
padding: 0.4rem;
/* text-align: center; */
} }
.time-filter .time-field { .time-filter .time-field {
display: flex; display: flex;
align-items: center; align-items: center;
width: 70%; /* width: 70%; */
} }
.time-filter .time-field .time:first-child { .time-filter .time-field .time:first-child {
...@@ -2438,7 +2446,7 @@ footer hr { ...@@ -2438,7 +2446,7 @@ footer hr {
.product-info .top-row .most-booked { .product-info .top-row .most-booked {
color: #808080; color: #808080;
font-size: 24px; font-size: 1.25vw;
} }
.product-reviews { .product-reviews {
...@@ -2470,14 +2478,15 @@ footer hr { ...@@ -2470,14 +2478,15 @@ footer hr {
} }
.product-info .product-name { .product-info .product-name {
font-size: 3.438rem; /* font-size: calc(2.865vw + 2.865vh + 2.865vmin) ; */
line-height: 4.813rem; font-size: 2.565vw;
line-height: 2.865vw;
font-weight: 700; font-weight: 700;
} }
.product-info .price { .product-info .price {
font-size: 2.5rem; font-size: 2.083vw;
line-height: 2.5rem; line-height: 2.083vw;
} }
.product-info .price > span { .product-info .price > span {
...@@ -2506,9 +2515,10 @@ footer hr { ...@@ -2506,9 +2515,10 @@ footer hr {
} }
.image-container.btn-gift { .image-container.btn-gift {
width: 18px; width: 0.938vw;
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
margin-left: 0.5rem;
} }
.btn-secondary { .btn-secondary {
...@@ -2544,7 +2554,7 @@ footer hr { ...@@ -2544,7 +2554,7 @@ footer hr {
} }
.btn { .btn {
font-size: 16px; font-size: 0.833vw;
} }
.availability-wrappper { .availability-wrappper {
...@@ -2555,7 +2565,7 @@ footer hr { ...@@ -2555,7 +2565,7 @@ footer hr {
} }
.availability-wrappper li { .availability-wrappper li {
width: 46%; width: 32%;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.5rem; margin: 0.5rem;
...@@ -2833,47 +2843,14 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -2833,47 +2843,14 @@ input[type="number"]::-webkit-outer-spin-button {
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */ background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
z-index: 999; /* Ensure the overlay appears above other content */ z-index: 999; /* Ensure the overlay appears above other content */
} }
.let-discover-session.let-discover-listing-session .swiper-nav,
.home_nav {
@media (min-width: 992px) { width: 106%;
.navbar-expand-lg .navbar-nav .nav-link { }
margin: 0 2rem; .mySwiper01 .swiper-button-prev:after {
} background: url(/images/icons/arrow-left.svg) no-repeat center;
.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 {
background: url(/images/icons/arrow-left.svg) no-repeat center;
}
} }
.mySwiper01 .swiper-button-next:after { .mySwiper01 .swiper-button-next:after {
background: url(/images/icons/arrow-right.svg) no-repeat center; background: url(/images/icons/arrow-right.svg) no-repeat center;
} }
...@@ -3558,6 +3535,11 @@ img:hover { ...@@ -3558,6 +3535,11 @@ img:hover {
transition: all 0.6s ease-out; transition: all 0.6s ease-out;
overflow: hidden; overflow: hidden;
} }
.heading03{
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
...@@ -3591,6 +3573,42 @@ img:hover { ...@@ -3591,6 +3573,42 @@ img:hover {
width: 21px; width: 21px;
margin-left: 10px; 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) { @media (min-width: 768px) {
...@@ -3598,7 +3616,14 @@ img:hover { ...@@ -3598,7 +3616,14 @@ img:hover {
display: none !important; 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) { @media (max-width: 1023px) {
.product-info .product-name { .product-info .product-name {
font-size: 20px; font-size: 20px;
...@@ -3631,13 +3656,45 @@ img:hover { ...@@ -3631,13 +3656,45 @@ img:hover {
} }
@media (max-width: 767px) { @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 { .info .top-name .title {
font-size: 4vw; font-size: 4vw;
} }
.home-banner .banner-txt .disc { .home-banner .banner-txt .disc {
font-size: 3vw; font-size: 3vw;
line-height: 4vw; line-height: 4vw;
} }
.home-banner-bg > span > span .image { .home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
} }
...@@ -3737,7 +3794,7 @@ img:hover { ...@@ -3737,7 +3794,7 @@ img:hover {
} }
.browse-experiences-session .swiper-nav { .browse-experiences-session .swiper-nav {
display: none; /* display: none; */
} }
.swiper-nav { .swiper-nav {
...@@ -3764,6 +3821,7 @@ img:hover { ...@@ -3764,6 +3821,7 @@ img:hover {
.footer-link h3 { .footer-link h3 {
font-size: 20px; font-size: 20px;
line-height: 20px;
} }
footer .footer-link.mtp-0 { 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!