Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ef8940ac by Chetan
Options

wishlist api binding complete

1 parent 7c1b7f5f
Inline Side-by-side
Showing 4 changed files with 325 additions and 129 deletions
components/user/MyWhishList.js
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling";
const MyWhishList = () => {
const whishListData = [
{
id: "0",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image1.png"
},
{
id: "1",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image2.png"
},
{
id: "2",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image3.png"
},
{
id: "3",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image4.png"
}
]
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
import { useRouter } from "next/router";
const MyWhishList = ({ data }) => {
const router = useRouter();
return (
<Fragment>
<div className="container pb-5">
......@@ -63,44 +15,43 @@ const MyWhishList = () => {
<h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="listing-items">
<div className="row">
{whishListData?.length && whishListData.map((data, index) => (
{data?.length && data.map((data, index) => (
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="item">
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image img-fluid" />
<Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.name}</div>
<div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist">
<div className="rating">
<span className="number">{data.rating}</span>
<span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<span className="image-container">
<Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
</span>
<WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
</div>
</div>
<div className="discription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a></div>
{/* <p className="price">{data.price} <span>{data.discount}</span></p> */}
<div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
<div className="price">
${data?.price} <span className="off">{data.discount}</span>
${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
</div>
<div className="detail">
<div>{data.availablity}</div>
<div>{data.other}</div>
<div className="">For 1 Night</div>
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button
variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
>
Explore Now
</Button>
......
pages/user/wishlist/index.js
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyWhishList from "../../../components/user/MyWhishList";
import { useSelector } from "react-redux";
export default function UserProfilePage () {
export default function UserProfilePage() {
const { wishlists } = useSelector(state => state.wishlists)
return (
<Layout>
<MyWhishList />
<MyWhishList data={wishlists}/>
</Layout>
);
};
\ No newline at end of file
redux/actions/activityAction.js
......@@ -547,7 +547,7 @@ export const getWishlists =
}
}
},
populate: ["endUser", "experience"]
populate: ["endUser", "experience", "experience.image"]
};
const queryString = qs.stringify(query, {
......
styles/globals.css
......@@ -260,7 +260,7 @@ h6 {
}
/* cursor pointer */
.cursor-pointer{
.cursor-pointer {
cursor: pointer;
}
......@@ -270,12 +270,12 @@ h6 {
position: relative;
}
.image-container > span {
.image-container>span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
.image-container.d-inblock>span {
position: unset !important;
display: inline-block !important;
}
......@@ -286,6 +286,7 @@ h6 {
position: relative !important;
height: unset !important;
}
header {
position: relative;
z-index: 99;
......@@ -369,13 +370,16 @@ header {
.header-search {
position: relative;
}
.header-search .rbt .rbt-input-main {
padding-right: 2.5rem;
font-size: 0.833vw;
}
.header-search > .form-control {
.header-search>.form-control {
font-size: 0.833vw;
}
.header-search .search-icon {
position: absolute;
right: 0;
......@@ -412,12 +416,14 @@ header {
width: 100%;
height: 100%;
}
.home-banner-bg::before {
content: "";
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.2); /* Black see-through */
background: rgba(0, 0, 0, 0.2);
/* Black see-through */
color: #f1f1f1;
width: 100%;
transition: 0.5s ease;
......@@ -427,17 +433,21 @@ header {
z-index: 1;
border-radius: 0 0 8rem 8rem;
}
.home-banner-bg > span {
.home-banner-bg>span {
height: 100%;
display: block;
}
.home-banner-bg > span > span {
.home-banner-bg>span>span {
height: 100% !important;
}
.home-banner-bg > span > span .image {
.home-banner-bg>span>span .image {
object-fit: cover !important;
border-radius: 0 0 136px 136px;
}
.banner-bg {
position: absolute;
left: 0;
......@@ -499,7 +509,7 @@ header {
position: relative;
}
.owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
.owl-custom01.owl-carousel .owl-nav button.owl-prev>span {
background: url(/images/icons/arrow-left.svg) no-repeat center;
width: 14px;
height: 22px;
......@@ -507,7 +517,7 @@ header {
display: block;
}
.owl-custom01.owl-carousel .owl-nav button.owl-next > span {
.owl-custom01.owl-carousel .owl-nav button.owl-next>span {
background: url(/images/icons/arrow-right.svg) no-repeat center;
width: 14px;
height: 22px;
......@@ -549,9 +559,11 @@ header {
border: 3px solid #fff;
background: #2a2a2a;
}
.searchbar-h .rbt-menu.dropdown-menu.show {
top: 1.7rem !important;
}
.searchbar-h {
position: relative;
width: 100%;
......@@ -671,9 +683,11 @@ span.form-error,
.form-container .input-group {
margin-bottom: 28px;
}
.form-container .input-group .form-error {
margin-top: 0.4rem;
}
.form-container label {
color: #000;
font-family: "Sofia Pro Light";
......@@ -831,7 +845,7 @@ span.form-error,
user-select: none;
}
.check-container input:checked ~ .checkmark:after {
.check-container input:checked~.checkmark:after {
display: block;
}
......@@ -859,7 +873,7 @@ span.form-error,
width: 0;
}
.check-container input:checked ~ .checkmark {
.check-container input:checked~.checkmark {
background-color: #fff;
}
......@@ -994,12 +1008,15 @@ span.form-error,
align-items: center;
justify-content: center;
}
.btn-edit > span:first-child {
.btn-edit>span:first-child {
margin-top: 0.2rem;
}
.btn-edit .image-container .image {
width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
}
.content-wraaper label {
color: #646464;
font-size: 18px;
......@@ -1070,7 +1087,7 @@ span.form-error,
color: #808080;
}
.card-booking-content > p:last-child {
.card-booking-content>p:last-child {
margin-bottom: 0;
}
......@@ -1113,7 +1130,7 @@ span.form-error,
color: #808080;
}
.card-booking-content .description > span {
.card-booking-content .description>span {
color: #646464;
text-decoration: underline;
}
......@@ -1123,7 +1140,7 @@ span.form-error,
font-weight: 600;
}
.card-booking-content .price > span {
.card-booking-content .price>span {
font-size: 0.8rem;
color: #808080;
}
......@@ -1159,7 +1176,7 @@ span.form-error,
margin-bottom: 1rem;
}
.card-booking-content .details-div > p:first-child {
.card-booking-content .details-div>p:first-child {
font-family: "Sofia Pro Light";
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
......@@ -1169,7 +1186,7 @@ span.form-error,
margin-bottom: 0;
}
.card-booking-content .details-div > p:last-child {
.card-booking-content .details-div>p:last-child {
font-family: "Sofia Pro Light";
font-size: 16px;
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
......@@ -1206,6 +1223,7 @@ span.form-error,
letter-spacing: 0em;
margin-bottom: 20px;
}
.business-details::before {
content: "";
border-left: 6px solid #0070bd;
......@@ -1360,9 +1378,11 @@ span.form-error,
display: flex;
align-items: center;
}
.sidebar ul li a > span {
.sidebar ul li a>span {
flex: 0 0 auto;
}
.sidebar ul li a span {
padding-left: 1rem;
padding-top: 5px;
......@@ -1446,9 +1466,11 @@ span.form-error,
color: #ffffff;
border: none;
}
.btnAdd:disabled .image-container .image {
width: 14px !important;
}
.btnAdd:hover,
.btnAdd:focus,
.btnAdd:active {
......@@ -1511,12 +1533,12 @@ span.form-error,
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input ~ .checkmark {
.radioContainer:hover input~.checkmark {
background-color: #fff;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .checkmark {
.radioContainer input:checked~.checkmark {
color: #0070bd;
}
......@@ -1528,7 +1550,7 @@ span.form-error,
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .checkmark:after {
.radioContainer input:checked~.checkmark:after {
display: block;
}
......@@ -1861,6 +1883,7 @@ span.form-error,
text-align: center;
cursor: pointer;
}
.let-discover-carousal a .image {
padding: 0.2rem !important;
}
......@@ -1868,12 +1891,15 @@ span.form-error,
.let-discover-carousal a .title {
padding: 1rem;
}
.let-discover-carousal a.active {
color: #000;
}
.let-discover-carousal a.active .title {
text-decoration: underline;
}
.carousal-c {
padding: 0 4rem;
}
......@@ -1929,6 +1955,7 @@ span.form-error,
position: relative;
color: #000;
}
.browse-experiences-item .img-wrapper .image-container .image {
height: calc(220px + (220 - 220) * (100vw - 320px) / (1920 - 320)) !important;
background-color: #adadad;
......@@ -1964,46 +1991,57 @@ span.form-error,
align-items: center;
justify-content: center;
}
.info .rating-wishlist .rating .number {
padding-top: 0.2rem;
}
.info .rating-wishlist .wishlist .image-container {
width: 19px;
height: 19px;
display: block;
}
.rs {
/* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
}
.share-social-container {
display: flex;
align-items: center;
}
.anticon.anticon-copy {
cursor: pointer;
}
.share-social-container .share-social-some-network {
margin-right: 1rem;
}
.wishlist-share .wishlist {
width: 29px;
height: 29px;
}
.info .rating-wishlist .rating .image-container {
width: 14px;
/* margin-top: -4px; */
margin-left: 4px;
}
.product-info .wishlist-share > div {
.product-info .wishlist-share>div {
margin-bottom: 1rem;
}
.browse-experiences-item .info .discription {
font-size: 0.677vw;
line-height: 0.8vw;
color: #808080;
margin-bottom: 10px;
}
.browse-experiences-item .info .discription > span {
.browse-experiences-item .info .discription>span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
......@@ -2038,9 +2076,11 @@ span.form-error,
line-height: 11px;
margin-bottom: 10px;
}
.browse-experiences-item .info .detail > div {
.browse-experiences-item .info .detail>div {
margin-bottom: 0.4rem;
}
.btn-outline-secondary {
border: 1px solid #000;
font-size: 16px;
......@@ -2048,9 +2088,11 @@ span.form-error,
padding-left: 1rem;
padding-right: 1rem;
}
.btn-outline-secondary:hover {
background: #0070bd;
}
.btn-center {
text-align: center;
padding: 2rem 0;
......@@ -2063,12 +2105,14 @@ span.form-error,
object-fit: cover;
padding: 4rem;
}
.gift-an-experience-inner .img .image {
display: block;
animation: scale2 4s infinite;
transition: all 0.6s ease-out;
overflow: hidden;
}
.gift-an-experience-inner .content .title {
font-size: 2.083vw;
line-height: 2.083vw;
......@@ -2088,6 +2132,7 @@ span.form-error,
text-align: center;
padding: 0 13vw;
}
.testimonial-item .image {
padding: 0.2rem !important;
}
......@@ -2256,9 +2301,11 @@ footer hr {
justify-content: space-between;
cursor: pointer;
}
.box-01 .reset a:hover {
color: #0070bd;
}
.box-01 .reset a .image-container {
margin-left: 0.5rem;
}
......@@ -2303,6 +2350,7 @@ footer hr {
.form-select {
font-size: 0.833vw;
}
.data-filters-item label input {
margin-right: 0.4rem;
margin-top: -4px;
......@@ -2517,15 +2565,19 @@ footer hr {
align-items: center;
padding: 0.5rem 0 2rem;
}
.product-reviews .review {
margin-left: 1rem;
}
.guest-reviews-detail .star-ratings .star-container {
padding: 0 0.1rem !important;
}
.guest-reviews-detail .star-ratings {
margin-bottom: 1rem;
}
.product-info .product-reviews .star {
display: flex;
align-items: center;
......@@ -2560,7 +2612,7 @@ footer hr {
line-height: 2.083vw;
}
.product-info .price > span {
.product-info .price>span {
color: #808080;
font-size: 14px;
}
......@@ -2571,16 +2623,18 @@ footer hr {
margin-bottom: 0.5rem;
}
.product-info .location > span {
.product-info .location>span {
color: #808080;
font-size: 16px;
}
.btn:hover {
box-shadow: -1px 6px 10px 0 rgba(120, 60, 20, 0.2);
transform: scale(1.05);
/* background-color: transparent; */
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-row {
padding: 2rem 0;
}
......@@ -2611,10 +2665,12 @@ footer hr {
.image-gallery-content .image-gallery-slide .image-gallery-image {
/* 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: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px;
......@@ -2629,11 +2685,13 @@ footer hr {
.btn {
font-size: 0.833vw;
}
.btn-check:focus + .btn,
.btn-check:focus+.btn,
.btn:focus,
button:focus:not(:focus-visible) {
box-shadow: none;
}
.availability-wrappper {
display: flex;
align-items: center;
......@@ -2648,7 +2706,7 @@ button:focus:not(:focus-visible) {
margin: 0.5rem;
}
.availability-wrappper li > span {
.availability-wrappper li>span {
width: 30px;
display: block;
margin-right: 10px;
......@@ -2719,9 +2777,11 @@ button:focus:not(:focus-visible) {
margin-left: 0.5rem;
cursor: pointer;
}
.guest-reviews-detail.modal .head {
margin-bottom: 0;
}
.guest-reviews-detail {
margin-right: 3rem;
}
......@@ -2734,7 +2794,7 @@ button:focus:not(:focus-visible) {
margin-bottom: 2rem;
}
.guest-reviews-session > .container {
.guest-reviews-session>.container {
border-top: 1px solid #c9c9c9;
padding-top: 3rem;
}
......@@ -2771,15 +2831,18 @@ button:focus:not(:focus-visible) {
height: 3px;
background-size: 90%;
}
.accordion-01 .title-accord {
display: flex;
align-items: center;
justify-content: space-between;
width: 96%;
}
.logout-bk {
display: none;
}
.accordion-01 .accordion-button {
font-size: 1.042vw;
line-height: 1.042vw;
......@@ -2848,13 +2911,16 @@ button:focus:not(:focus-visible) {
border: 1px solid #000;
border-radius: 10px;
}
.testimonial-session .rating {
margin-bottom: 0.5rem;
}
.testimonial-session .rating .star-ratings svg {
width: 33px !important;
height: 33px !important;
}
.sub-categories {
display: flex;
align-items: center;
......@@ -2862,11 +2928,13 @@ button:focus:not(:focus-visible) {
-ms-overflow-style: none;
scrollbar-width: none;
}
.active > .page-link,
.active>.page-link,
.page-link.active {
background-color: #0070bd;
border-color: #0070bd;
}
.sub-categories a {
cursor: pointer;
display: flex;
......@@ -2889,46 +2957,57 @@ input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sub-categories a .image-container {
width: 20px;
display: inline-block;
margin-left: 0.5rem;
margin-right: -0.8rem;
}
.graph {
padding-top: 3rem;
}
.graph .graph-price {
display: flex;
align-items: center;
justify-content: space-between;
color: #808080;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-inner {
padding: 5px 8px;
color: #808080;
background-color: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before,
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-content {
background: #fff;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
box-shadow: 1px 1px 6px #c1c1c1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
background-color: #0070bd;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-handle::after {
background-color: #0070bd;
box-shadow: 0 0 0 2px #0070bd;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-rail {
background-color: #a1a1a1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
background-color: #0070bd;
}
.box-01 .inner .price .sub-text {
color: #d1d1d1;
}
......@@ -2939,16 +3018,21 @@ input[type="number"]::-webkit-outer-spin-button {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
z-index: 999; /* Ensure the overlay appears above other content */
background-color: rgba(0, 0, 0, 0.8);
/* Semi-transparent black background */
z-index: 999;
/* Ensure the overlay appears above other content */
}
.let-discover-session.let-discover-listing-session .swiper-nav,
.home_nav {
width: 106%;
}
.mySwiper01 .swiper-button-prev:after {
background: url(/images/icons/arrow-left-w.svg) no-repeat center;
}
.mySwiper01 .swiper-button-next:after {
background: url(/images/icons/arrow-right-w.svg) no-repeat center;
}
......@@ -2981,7 +3065,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: transparent;
}
.swiper-nav button .image-container > span {
.swiper-nav button .image-container>span {
width: 14px !important;
}
......@@ -3011,16 +3095,20 @@ input[type="number"]::-webkit-outer-spin-button {
margin-top: -20px;
margin-bottom: 5rem;
}
.page-title-area .banner-bg .image-container {
height: 100%;
display: block;
}
.page-title-area .banner-bg .image-container > span {
.page-title-area .banner-bg .image-container>span {
height: 100% !important;
}
.page-title-area .banner-bg .image {
object-fit: cover;
}
.page-title-one {
background: url(/images/banner/about-us.png);
}
......@@ -3177,7 +3265,7 @@ input[type="number"]::-webkit-outer-spin-button {
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -5px !important;
}
......@@ -3287,14 +3375,17 @@ input[type="number"]::-webkit-outer-spin-button {
height: 220px;
position: relative;
}
.blog-item .img-wrapper .image-container {
height: 100%;
display: block;
}
.blog-item .img-wrapper .image-container > span {
.blog-item .img-wrapper .image-container>span {
height: 100% !important;
}
.blog-item .img-wrapper .image-container > span > .image {
.blog-item .img-wrapper .image-container>span>.image {
object-fit: cover;
border-radius: 25px 25px 0 0;
}
......@@ -3349,6 +3440,7 @@ input[type="number"]::-webkit-outer-spin-button {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.blog-item .info .read-more .btn {
font-size: 0.677vw;
line-height: 0.677vw;
......@@ -3374,36 +3466,44 @@ input[type="number"]::-webkit-outer-spin-button {
padding: 0;
border-top: 0;
}
.blogs-filter .btn.btn-primary {
padding-top: 0.475rem;
padding-bottom: 0.475rem;
}
.blog-detail-inner-session .profile {
display: flex;
align-items: center;
}
.blog-detail-inner-session .profile .image-container {
width: 56px;
display: inline-block;
margin-right: 0.5rem;
}
.blog-detail-inner-session .date {
display: flex;
align-items: center;
justify-content: flex-end;
}
.blog-detail-inner-session .date .image-container {
width: 29px;
display: inline-block;
margin-right: 0.5rem;
}
.blog-detail-inner-session .flag-list {
padding: 2rem 0;
}
.blog-detail-inner-session .flag-list li {
display: inline-block;
margin-right: 1rem;
}
.blog-detail-inner-session .flag-list li a {
background: #f7f5f1;
border-radius: 5px;
......@@ -3411,45 +3511,55 @@ input[type="number"]::-webkit-outer-spin-button {
padding: 0.5rem 1rem;
display: block;
}
.blog-detail-inner-session h2 {
font-size: 1.667vw;
line-height: 1.967vw;
font-weight: 400;
margin-bottom: 2rem;
}
.blog-detail-inner-session p {
margin-bottom: 1.5rem;
}
.blog-detail-inner-session {
padding-bottom: 3rem;
}
.s-page-session {
margin: 5rem 0;
}
.s-page-session h2 {
font-size: 32px;
line-height: 40px;
font-weight: 400;
margin-bottom: 1rem;
}
.s-page-session p {
margin-bottom: 1.5rem;
}
.s-page-session ul {
list-style-type: disc;
list-style-position: inside;
margin-left: 2rem;
margin-bottom: 2rem;
}
.gift-card-session {
padding: 5rem 0;
}
.gift-card-lt {
text-align: center;
width: 100%;
height: 260px;
padding-right: 3rem;
}
.gift-card-lt .gift-box {
height: 100%;
background: #f7f5f1;
......@@ -3459,21 +3569,26 @@ input[type="number"]::-webkit-outer-spin-button {
border-radius: 13px;
margin-bottom: 1rem;
}
.gift-card-rt {
border-left: 2px solid #e9e9e9;
padding-left: 3rem;
}
.gift-card-session .back-btn .image-container {
width: 15px;
display: inline-block;
}
.gift-card-amt ul li {
display: inline-block;
vertical-align: top;
}
.gift-card-amt ul li input[type="radio"] {
display: none;
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
cursor: pointer;
......@@ -3493,16 +3608,19 @@ input[type="number"]::-webkit-outer-spin-button {
align-items: center;
justify-content: center;
}
.gift-card-amt > ul {
.gift-card-amt>ul {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
}
.gift-card-amt ul li a,
.gift-card-amt ul li label > span {
.gift-card-amt ul li label>span {
font-size: 14px;
}
.gift-card-amt ul li input[type="radio"]:checked + label {
.gift-card-amt ul li input[type="radio"]:checked+label {
background: #0070bd;
color: #fff;
}
......@@ -3511,6 +3629,7 @@ input[type="number"]::-webkit-outer-spin-button {
.gift-card-amt ul li label {
padding: 1.5rem 2rem;
}
.tooltip-wrapper {
position: relative;
}
......@@ -3532,37 +3651,44 @@ input[type="number"]::-webkit-outer-spin-button {
.tooltip-btn {
position: relative;
}
.tooltip-btn .image-container {
width: 12px;
display: inline-block;
}
.tooltip-btn:hover + .tooltips {
.tooltip-btn:hover+.tooltips {
display: block;
}
.tooltip-btn:hover {
cursor: pointer;
}
.cl-gry {
color: #808080 !important;
}
.gift-card-rt .back-btn {
margin-bottom: 1rem;
}
.gift-card-rt .title {
font-size: 1.667vw;
margin-bottom: 0.5rem;
}
.gift-card-amt {
margin: 1rem 0;
}
.gift-card-rt .form-01 .form-control {
border: 1px solid #000;
border-radius: 9px;
}
.gift-card-rt .form-01 .link-a {
}
.gift-card-rt .form-01 .link-a {}
.gift-card-session .result-box {
text-align: center;
min-height: 390px;
......@@ -3571,6 +3697,7 @@ input[type="number"]::-webkit-outer-spin-button {
align-items: center;
justify-content: center;
}
.gift-card-session .result-box p {
font-size: 32px;
line-height: 40px;
......@@ -3583,6 +3710,7 @@ input:disabled {
color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
border-color: rgba(118, 118, 118, 0.3) !important;
}
img {
transition: all 0.6s ease-out;
}
......@@ -3591,6 +3719,7 @@ img:hover {
transform: scale(1.02);
transition: all 0.6s ease-out;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image {
display: block;
animation: scale1 4s infinite;
......@@ -3598,6 +3727,7 @@ img:hover {
overflow: hidden;
padding: 0.1rem !important;
}
@keyframes scale1 {
0% {
transform: scale(0.9);
......@@ -3625,6 +3755,7 @@ img:hover {
transform: scale(1);
}
}
.get-in-touch-session .rt-banner .image {
display: block;
animation: scale2 4s infinite;
......@@ -3632,17 +3763,20 @@ img:hover {
overflow: hidden;
padding: 1.5rem !important;
}
.founder-session .f-img .image {
display: block;
animation: scale2 4s infinite;
transition: all 0.6s ease-out;
overflow: hidden;
}
.heading03 {
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
/* .form-container .upload-files{
display: inline-block;
width: 102px;
......@@ -3667,6 +3801,7 @@ img:hover {
padding-top: 2rem; */
height: inherit;
}
/* ::-webkit-file-upload-button {
display: none;
}
......@@ -3676,19 +3811,23 @@ img:hover {
.form-container .upload-file .anticon.anticon-plus {
position: absolute;
}
.search-icon.btn:hover {
color: inherit;
background-color: inherit;
border-color: inherit;
box-shadow: none;
}
.form-control:focus {
box-shadow: none;
border-color: #ced4da;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip {
z-index: 10;
}
.swiper-nav button {
margin: 0 !important;
padding: 0 !important;
......@@ -3700,28 +3839,43 @@ img:hover {
.page-link {
box-shadow: 0px 2.57px 8.85px 0px #00000026;
}
.load-more {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 4rem;
}
.load-more .pagination .page-item {
}
.load-more .pagination .page-item {}
.page-item:not(:first-child) .page-link {
margin-left: 10px;
}
.page-link {
display: block;
font-size: 16px;
border-radius: 5px;
}
.see-my-gift-cards-row {
margin-bottom: 4rem;
}
.browse-experiences-carousal .swiper-slide{
.browse-experiences-carousal .swiper-slide {
padding: 1rem;
}
.text-trunc-2 {
display: -webkit-box;
max-width: 100%;
height: 35px; /* this height is tempary while content is getting larger than 2 lines then remove it*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -3761,6 +3915,7 @@ img:hover {
color: #000;
font-weight: bold;
}
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
font-size: 0.833vw;
......@@ -3800,56 +3955,69 @@ 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) {
.browse-experiences-item .img-wrapper .image-container .image {
height: 120px !important;
}
.footer-link h3 {
font-size: 1.85vw;
line-height: 1.85vw;
}
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1.5rem 2.8rem;
}
.gift-card-lt {
width: 100%;
height: 200px;
padding-right: 0;
}
.swiper-nav,
.home_nav {
margin-left: -33px;
}
.top-btn {
margin-bottom: 1rem;
margin-top: 1rem;
}
.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;
......@@ -3879,147 +4047,186 @@ img:hover {
margin-right: 0;
}
}
@media (max-width: 991px) {
.vendor-signup a{
.vendor-signup a {
min-width: 140px;
}
}
@media (max-width: 767px) {
.browse-experiences-item .img-wrapper .image-container .image {
height: 220px !important;
}
.subscribe label .btn {
padding: 2.8vw;
}
}
footer .subscribe input {
padding: 2.8vw;
}
.form-container.content-wraaper .bg-white.border-div .profile-img-s{
}
.form-container.content-wraaper .bg-white.border-div .profile-img-s {
width: 12vw;
}
.gift-an-experience-session {
margin-bottom: 2rem;
}
.content-wraaper label {
margin-top: 1rem;
}
.border-div {
padding: 1.5rem;
}
.gift-card-rt .title {
font-size: 4.667vw;
}
.gift-card-amt > ul {
.gift-card-amt>ul {
grid-gap: 10px;
}
.gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1rem;
}
.see-my-gift-cards-row {
text-align: center;
margin-bottom: 3rem;
}
.card-booking-img.bgGrey {
padding: 4rem 4rem;
}
.rightContent h2 {
font-size: 4.172vw;
line-height: 4.172vw;
}
.sub-categories {
margin-bottom: 1rem;
}
.header-search .rbt .rbt-input-main {
font-size: 1rem;
}
.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 label>span {
font-size: 12px;
}
.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: 1rem;
line-height: 1.2rem;
padding: 1rem;
}
.sub-categories a {
font-size: 12px;
padding: 1rem;
height: 2rem;
margin-left: 0.5rem;
}
.navbar-toggler {
border: 0;
}
.navbar-toggler .navbar-toggler-icon {
background: url(/images/icons/close_icon.svg) no-repeat !important;
background-size: 100% !important;
}
.navbar-toggler.collapsed .navbar-toggler-icon {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.top-rated {
font-size: 12px;
display: flex;
......@@ -4028,51 +4235,64 @@ img:hover {
justify-content: center;
line-height: 15px;
}
.discover-swiper-button-prev arrow {
left: 0;
}
.navbar-collapse form {
margin-right: 0 !important;
}
.header-search {
width: 100%;
}
.navbar-expand-lg .navbar-nav {
padding-bottom: 1rem;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 18px;
margin-left: 5px;
}
.header_wrap .navbar-expand-lg .navbar-nav .nav-link {
display: flex;
align-items: center;
}
.navbar-collapse {
margin-top: 1rem;
}
.copyright {
font-size: 14px;
}
.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;
margin-top: 1rem;
......@@ -4080,39 +4300,50 @@ img:hover {
align-items: center;
justify-content: space-between;
}
.top-btn button {
width: 100%;
}
.header-search .search-icon .image-container {
width: 3.585vw;
}
.header-search > .form-control {
.header-search>.form-control {
font-size: 3vw;
margin-bottom: 1rem;
}
.btn {
font-size: 3vw;
}
.navbar-brand {
width: 22.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 {
.home-banner-bg>span>span .image {
border-radius: 0 0 20px 20px;
}
.gift-card-rt .title,
.gift-card-rt .cl-gry {
padding-left: 1rem;
}
.gift-card-rt .back-btn {
display: none;
}
.gift-card-amt ul {
text-align: center;
}
......@@ -4124,12 +4355,15 @@ img:hover {
border-top: 2px solid #e9e9e9;
margin-top: 4rem;
}
.gift-card-lt {
margin: 0 auto;
}
.d-table-cell {
padding-top: 2rem;
}
.filter-dd {
justify-content: space-between;
padding: 0 0 2rem;
......@@ -4193,10 +4427,12 @@ img:hover {
height: 250px;
margin-bottom: 2rem;
}
.our-mission .inner .title {
font-size: 20px;
line-height: 20px;
}
.page-title-one {
background: url(/images/banner/about-us-m.png) no-repeat;
}
......@@ -4213,7 +4449,7 @@ img:hover {
top: 40%;
}
.swiper-nav button .image-container > span {
.swiper-nav button .image-container>span {
width: 10px !important;
}
......@@ -4230,21 +4466,26 @@ img:hover {
.form-select {
font-size: 0.9rem;
}
.data-filters-item label {
font-size: 0.8rem;
line-height: 1rem;
}
.container-fluid {
max-width: 100vw;
}
.home-banner-bg::before {
border-radius: 0 0 1rem 1rem;
}
.let-discover-carousal a .title {
padding: 1rem;
font-size: 14px;
line-height: 16px;
}
footer .subscribe input {
width: 67%;
}
......@@ -4341,12 +4582,15 @@ img:hover {
height: 55px;
padding: 0.8rem;
}
.searchbar-h .rbt-menu.dropdown-menu.show {
top: 0.8rem !important;
}
.rbt-menu > .dropdown-item {
.rbt-menu>.dropdown-item {
font-size: 13px;
}
.searchbar-h .search-icon {
right: 8px;
top: 12px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!