Skip to content

Jay Mehta / zango-frontend

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

responsive changes by chetan in bookings, gift cards, wishlist, and activity det… 

…ails, and order listing
1 parent 6223ff28
Inline Side-by-side
Showing 6 changed files with 54 additions and 44 deletions
components/user/MyBookings.js
...@@ -47,10 +47,10 @@ const MyBookings = () => { ...@@ -47,10 +47,10 @@ const MyBookings = () => {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper"> <div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2> <h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="row"> <div className="row">
{bookingsData?.length && bookingsData.map((data, index) => ( {bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`1${index}`}> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking"> <div className="card-booking">
<div className="card-booking-img"> <div className="card-booking-img">
<span className="image-container"> <span className="image-container">
...@@ -83,7 +83,7 @@ const MyBookings = () => { ...@@ -83,7 +83,7 @@ const MyBookings = () => {
</div> </div>
<div className="row"> <div className="row">
{bookingsData?.length && bookingsData.map((data, index) => ( {bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`2${index}`}> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`2${index}`}>
<div className="card-booking"> <div className="card-booking">
<div className="card-booking-img"> <div className="card-booking-img">
<span className="image-container"> <span className="image-container">
...@@ -116,7 +116,7 @@ const MyBookings = () => { ...@@ -116,7 +116,7 @@ const MyBookings = () => {
</div> </div>
<div className="row"> <div className="row">
{bookingsData?.length && bookingsData.map((data, index) => ( {bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`3${index}`}> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`3${index}`}>
<div className="card-booking"> <div className="card-booking">
<div className="card-booking-img"> <div className="card-booking-img">
<span className="image-container"> <span className="image-container">
......
components/user/MyGiftCard.js
...@@ -13,10 +13,10 @@ const MyGiftCard = () => { ...@@ -13,10 +13,10 @@ const MyGiftCard = () => {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper"> <div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Gift Card</h2> <h2 className="px-2 px-lg-0">My Gift Card</h2>
<div className="row"> <div className="row">
{giftCard?.length && giftCard.map((data, index) => ( {giftCard?.length && giftCard.map((data, index) => (
<div className="col-12 col-lg-4" key={`1${index}`}> <div className="col-12 col-lg-4 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking"> <div className="card-booking">
<div className="card-booking-img bgGrey"> <div className="card-booking-img bgGrey">
<span className="image-container"> <span className="image-container">
......
components/user/MyWhishList.js
...@@ -57,50 +57,60 @@ const MyWhishList = () => { ...@@ -57,50 +57,60 @@ const MyWhishList = () => {
return ( return (
<Fragment> <Fragment>
<div className="container"> <div className="container pb-5">
<div className="row"> <div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper"> <div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2> <h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="row"> <div className="listing-items">
{whishListData?.length && whishListData.map((data, index) => ( <div className="row">
<div className="col-12 col-lg-3" key={`1${index}`}> {whishListData?.length && whishListData.map((data, index) => (
<div className="card-booking"> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="card-booking-img"> <div className="item">
<span className="image-container"> <div className="browse-experiences-item">
<Image src={renderImage(data.image)} layout="fill" className="image" /> <div className="img-wrapper">
</span>
<p className="type">{data.type}</p>
</div>
<div className="card-booking-content">
<div className="d-flex align-items-start justify-content-between">
<p className="activity-name">{data.name}</p>
<div className="d-flex align-items-center">
<div className="rating">
<span className="me-1 pt-1">{data.rating}</span>
<span className="image-container">
<Image src={renderImage("/images/user/star.svg")} layout="fill" className="image" />
</span>
</div>
<span className="image-container"> <span className="image-container">
<Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" /> <Image src={renderImage(data.image)} layout="fill" className="image img-fluid" />
</span> </span>
<div className="top-rated">Top Rated</div>
</div> </div>
</div> <div className="info">
<div className="top-name">
<div className="title">{data.name}</div>
<div className="rating-wishlist">
<div className="rating">
<span className="number">{data.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>
</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> */}
<p className="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span>Read More</span></p> <div className="price">
<p className="price">{data.price} <span>{data.discount}</span></p> ${data?.price} <span className="off">{data.discount}</span>
<p className="other">{data.availablity}</p> </div>
<p className="other">{data.other}</p> <div className="detail">
</div> <div>{data.availablity}</div>
<div className="card-booking-footer pt-0"> <div>{data.other}</div>
<Button id="exploreNow" aria-label="Explore Now" type="button" className="btn btn-primary btn-explore"> </div>
Explore Now <div className="explore-now">
</Button> <Button
variant="primary"
>
Explore Now
</Button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
</div> </div>
</div> </div>
......
components/vendor/ActivityDetails.js
...@@ -334,7 +334,7 @@ const ActivityDetails = ({ isUpdate }) => { ...@@ -334,7 +334,7 @@ const ActivityDetails = ({ isUpdate }) => {
setStartDate(activityById?.data.attributes.fromDate); setStartDate(activityById?.data.attributes.fromDate);
setEndDate(activityById?.data.attributes.toDate); setEndDate(activityById?.data.attributes.toDate);
setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id)); setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
setdisplayImage(activityById?.data.attributes.image?.data.id); setdisplayImage(activityById?.data.attributes.image?.data?.id);
setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id); setCancellationPolicy(activityById?.data.attributes.cancellationPolicy?.data?.id);
settermsConditions(activityById?.data.attributes.termsConditions?.data?.id); settermsConditions(activityById?.data.attributes.termsConditions?.data?.id);
} }
......
components/vendor/OrderListing.js
...@@ -172,7 +172,7 @@ const OrderListing = () => { ...@@ -172,7 +172,7 @@ const OrderListing = () => {
<div className="p-2">Phone number: {enquiryDetails[0].attributes.end_user.data.attributes.phone}</div> <div className="p-2">Phone number: {enquiryDetails[0].attributes.end_user.data.attributes.phone}</div>
<div className="p-2">Email: {enquiryDetails[0].attributes.end_user.data.attributes.email}</div> <div className="p-2">Email: {enquiryDetails[0].attributes.end_user.data.attributes.email}</div>
<div className="p-2"> <div className="p-2">
Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blueI"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag> Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blue"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag>
</div> </div>
<Button <Button
onClick={async () => { onClick={async () => {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!