Skip to content

Jay Mehta / zango-frontend

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

updated ui

1 parent d53a7dc4
Inline Side-by-side
Showing 14 changed files with 187 additions and 106 deletions
components/blog-details/MostReadBlogs.js
......@@ -12,6 +12,7 @@ import "swiper/css/pagination";
import "swiper/css/navigation";
import { BlogData } from "../blog/BlogItem.js";
import Image from "next/image.js";
import ActiveLink from "../common/ActiveLink.js";
const MostReadBlogs = () => {
return (
<section className="most-read-blogs-session">
......@@ -26,7 +27,8 @@ const MostReadBlogs = () => {
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
<ActiveLink prefetch href="/blog"><Button variant="primary">View All</Button></ActiveLink>
</div>
</div>
</div>
......@@ -74,7 +76,7 @@ const MostReadBlogs = () => {
<div className="info">
<div className="read-row">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
<Image priority layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span>
<div className="">{data.read}</div>
</div>
......
components/detail/Detail.js
......@@ -109,7 +109,7 @@ const Detail = () => {
</div>
)}
<GuestReviews activityById={activityById} />
<SimilarExperiences allActivitiesData={allActivitiesData} />
<SimilarExperiences allActivitiesData={allActivitiesData} activityById={activityById} />
<Faqs faqs={faqs} />
<SignUpToExperienceOurPlatform />
</main>
......
components/detail/DetailInfo.js
......@@ -20,6 +20,7 @@ import { sanitizeTimeRange } from "../../services/imageHandling";
const DetailInfo = ({ activityById }) => {
const router = useRouter();
console.log("activityById >>>>>", activityById)
const dispatch = useDispatch();
useEffect(() => {
dispatch(getCurrentEndUser());
......@@ -176,7 +177,7 @@ const DetailInfo = ({ activityById }) => {
</Modal.Body>
</Modal>
{activityById && (
<Modal
<Modal dialogClassName="modal-01-session"
centered
show={enquiryModal}
onHide={() => {
......@@ -186,19 +187,19 @@ const DetailInfo = ({ activityById }) => {
}}
>
<Modal.Header>
<h4>Send Enquiry</h4>
<h2>Send Enquiry</h2>
</Modal.Header>
<Modal.Body>
<div>Experience Name:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
<div className="text01">
{activityById.data.attributes.name}
</div>
<div className="mt-3">Full Name:</div>
<div className="" style={{ fontWeight: "bold" }}>
<div className="text01">
{endUser?.attributes.name}
</div>
<div className="mt-3">Email ID:</div>
<div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
<div className="text01">
{endUser?.attributes.email}
</div>
<div className="row d-flex justify-content-center">
......
components/detail/SimilarExperiences.js
......@@ -15,7 +15,8 @@ import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import WishlistComponent from "./WIshlistComponent.js";
import { useSelector } from "react-redux";
const SimilarExperiences = ({ allActivitiesData }) => {
import ActiveLink from "../common/ActiveLink.js";
const SimilarExperiences = ({ allActivitiesData, activityById }) => {
const router = useRouter();
const [listingData, setListingData] = useState([]);
const { endUser } = useSelector(state => state.endUser);
......@@ -71,7 +72,10 @@ const SimilarExperiences = ({ allActivitiesData }) => {
</div>
</motion.div>
<div className="view-all-btn">
<ActiveLink prefetch href={`/listing?category=${activityById?.data.attributes.category?.data?.id}`}>
<Button variant="primary">View All</Button>
</ActiveLink>
</div>
</div>
</div>
......
components/gift-card/GiftCard.js
......@@ -11,17 +11,20 @@ import { finishVendorOtpVerification } from "../../redux/actions/vendorActions";
import { useRouter } from "next/router";
import { Button } from "react-bootstrap";
import { postGiftCard } from "../../redux/actions/giftCardAction";
import TermsAndConditionModel from "../signup/TermsAndConditionModel";
// import { getCurrentEndUser } from "../../redux/actions/userActions";
const validationSchema = Yup.object().shape({
email: Yup.string().email("Invalid email").required("Email is required"),
receiverEmail: Yup.string().email("Invalid email").required("Email is required"),
message: Yup.string().required("Message is required")
message: Yup.string().required("Message is required"),
termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
});
let formik1;
const GiftCard = () => {
const [isOpenEis, setIsOpenEis] = useState(false);
const router = useRouter();
const dispatch = useDispatch();
// useEffect(() => {
......@@ -57,6 +60,7 @@ const GiftCard = () => {
};
return (
<>
<section className="gift-card-session">
<div className="container">
<div className="row justify-content-center">
......@@ -100,7 +104,8 @@ const GiftCard = () => {
customAmt: "",
email: "",
receiverEmail: "",
message: ""
message: "",
termsConditions: false
}}
enableReinitialize={true}
// validationSchema={validationSchema}
......@@ -315,9 +320,23 @@ const GiftCard = () => {
</button>
</div>
<div className="col-12">
<label className="check-container mb-0 pt-1 d-flex mb-2" htmlFor="termsConditions">
<input
type="checkbox"
id="termsConditions"
name="termsConditions"
className="check-box me-2"
checked={values.termsConditions}
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="checkmark"></span>
{/* By continuing you agree to our <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a> */}
<p>
By continuing you agree to our <a href="/terms-and-conditions">Terms</a> and <a href="/privacy-policy">Privacy Policy</a>
By continuing you agree to our <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>Terms</a> and <a href="/privacy-policy">Privacy Policy</a>
</p>
</label>
{errors.termsConditions && touched.termsConditions && <span className="form-error pl-5">{errors.termsConditions}</span>}
</div>
</div>
</Form>
......@@ -445,6 +464,8 @@ const GiftCard = () => {
</div>
</div>
</section>
<TermsAndConditionModel isOpenEis={isOpenEis} setIsOpenEis={setIsOpenEis} />
</>
);
};
......
components/home/BrowseExperiences.js
......@@ -18,6 +18,8 @@ import { useSelector } from "react-redux";
import Link from "next/link.js";
import ActiveLink from "../common/ActiveLink.js";
const BrowseExperiences = ({ allActivitiesData }) => {
console.log("allActivitiesData>>>>>>", allActivitiesData);
const { endUser } = useSelector(state => state.endUser);
const calculateRating = data => {
let value = 0;
......@@ -108,7 +110,7 @@ const BrowseExperiences = ({ allActivitiesData }) => {
{/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
{<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
<Image layout="fill" alt="" priority className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
)}
......@@ -133,11 +135,24 @@ const BrowseExperiences = ({ allActivitiesData }) => {
// onClick={() => {
// router.push(`/activities/${data.id}`);
// }}
variant="primary"
variant="primary me-2"
>
Explore Now
</Button>
</ActiveLink>
{data?.attributes.link && (
<Button
// disabled={loading}
onClick={() => {
window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
}}
variant="primary"
>
Book Now
</Button>
)}
</div>
</div>
</div>
......
components/listing/ListingItems.js
......@@ -194,10 +194,21 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
onClick={() => {
router.push(`/activities/${data.id}`);
}}
variant="primary"
variant="primary me-2"
>
Explore Now
</Button>
{data?.attributes.link && (
<Button
// disabled={loading}
onClick={() => {
window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
}}
variant="primary"
>
Book Now
</Button>
)}
</div>
</div>
</div>
......
components/signup/Signup.js
......@@ -270,7 +270,7 @@ const Signup = props => {
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="checkmark"></span>I Agree to the <a onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
<span className="checkmark"></span>I Agree to the <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
</label>
<br />
......
components/vendor/ActivityDetails.js
......@@ -457,7 +457,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-12 col-lg-6">
<div className="input-group">
<label>Location</label>
<AsyncTypeahead
<AsyncTypeahead className="w-100"
type="number"
onSearch={handleSearch}
minLength={3}
......@@ -521,8 +521,6 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Gifting to Someone</label>
<div className="row">
<div className="col-12 col-lg-12">
<select id="giftingToSomeone" name="giftingToSomeone" value={values.giftingToSomeone} onChange={handleChange} onBlur={handleBlur}>
{" "}
Gift someone
......@@ -530,21 +528,17 @@ const ActivityDetails = ({ isUpdate }) => {
<option value={true}>Yes</option>
<option value={false}>No</option>
</select>
</div>
{touched.giftingToSomeone && errors.giftingToSomeone && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.giftingToSomeone}
</span>
)}
</div>
</div>
</div>
<div className="col-12 col-lg-6">
<div className="input-group mb-2">
<label>Activity Type</label>
<div className="row">
<div className="">
<div className="col-12 col-lg-12">
<select id="activityType" name="activityType" onChange={handleChange} onBlur={handleBlur} value={values.activityType}>
{" "}
Activity Type
......@@ -552,14 +546,12 @@ const ActivityDetails = ({ isUpdate }) => {
<option value={"indoor"}>Indoor</option>
<option value={"outdoor"}>Outdoor</option>
</select>
</div>
{touched.activityType && errors.activityType && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
{errors.activityType}
</span>
)}
</div>
</div>
</div>
</div>
</div>
......@@ -583,7 +575,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="input-group">
<label>Size of the Group</label>
<div className="row">
<div className="col-6 col-lg-5">
<div className="col-6 col-lg-5 p-0 pe-3">
<input type="text" placeholder="Min." name={`minGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.minGroupSize} />
{touched.minGroupSize && errors.minGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
......@@ -591,7 +583,7 @@ const ActivityDetails = ({ isUpdate }) => {
</span>
)}
</div>
<div className="col-6 col-lg-5">
<div className="col-6 col-lg-5 p-0 pe-3">
<input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} />
{touched.maxGroupSize && errors.maxGroupSize && (
<span className="form-error" style={{ color: "red", fontSize: "10px" }}>
......@@ -664,7 +656,7 @@ const ActivityDetails = ({ isUpdate }) => {
<span className="col-md-6">Select all:</span>
<Switch
// style={{ backgroundColor: "green" }}
className="col-md-4"
className="col-md-4 active-on-day"
value={
daysBoolean.availableOnMonday &&
daysBoolean.availableOnTuesday &&
......@@ -698,7 +690,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Monday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnMonday}
id={"availableOnMonday"}
name="availableOnMonday"
......@@ -715,7 +707,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Tuesday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnTuesday}
onChange={e => {
setDaysBoolean({ ...daysBoolean, availableOnTuesday: e === true ? true : false });
......@@ -732,7 +724,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Wednesday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnWednesday}
id={"availableOnWednesday"}
// onChange={handleChange}
......@@ -749,7 +741,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Thursday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnThursday}
id={"availableOnThursday"}
onChange={e => {
......@@ -765,7 +757,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Friday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnFriday}
id={"availableOnFriday"}
onChange={e => {
......@@ -781,7 +773,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Saturday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnSaturday}
id={"availableOnSaturday"}
onChange={e => {
......@@ -797,7 +789,7 @@ const ActivityDetails = ({ isUpdate }) => {
<div className="d-flex">
<span className="col-md-6">Sunday:</span>
<Switch
className="col-md-4"
className="col-md-4 active-on-day"
value={daysBoolean.availableOnSunday}
id={"availableOnSunday"}
onChange={e => {
......@@ -983,7 +975,7 @@ const ActivityDetails = ({ isUpdate }) => {
<p className="textH">Add display image</p>
{/* {console.log(displayImage)} */}
<UploadImageCustom isUpdate={isUpdate} setImage={setdisplayImage} populatedImages={activityById?.data.attributes.image} />
<hr />
<hr className="mt-4" />
</div>
<div className="row d-flex ">
<p className="textH">Add other images</p>
......@@ -1040,7 +1032,7 @@ const ActivityDetails = ({ isUpdate }) => {
<br />
<br />
<br />
<br />
<>
{/* <button
onClick={e => {
......@@ -1109,7 +1101,7 @@ const ActivityDetails = ({ isUpdate }) => {
</li>
<li>
<img src="/images/vendor/call.svg" className="img-fluid" />
<p>+1 (407) 8798 789</p>
<p className="number">+1 (407) 8798 789</p>
</li>
</ul>
</div>
......
components/vendor/BusinessDetails.js
......@@ -212,7 +212,7 @@ const BusinessDetails = () => {
</div>
</div>
<div className="col-12 col-lg-5">
<div className="input-group">
<div className="input-group align-items-center">
<label>Brand Logo</label>
{/* <div className="custom-file">
<input
......@@ -230,7 +230,7 @@ const BusinessDetails = () => {
</label>
</div> */}
<UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
<p className="textS pe-5 pt-2">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
</div>
</div>
......@@ -359,7 +359,7 @@ const BusinessDetails = () => {
</li>
<li>
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
<p className="number">+1 (407) 8798 789</p>
</li>
</ul>
</div>
......
components/vendor/OrderListing.js
......@@ -143,9 +143,9 @@ const OrderListing = () => {
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
<div className="mb-3">
<h2 style={{fontSize: 28}}>Orders</h2>
<p>View all the orders</p>
<div className="mb-3 d-flex align-items-center justify-content-between">
<h2 style={{ fontSize: 28 }}>Orders</h2>
<p><a href="">View all the orders</a></p>
</div>
{/* <div>
<Button type="button" variant="" className="btnAdd m-0">
......
components/vendor/UpdateActivity.js
......@@ -217,7 +217,7 @@ const UpdateActivity = () => {
}}
validationSchema={activityDetailsValidationSchema}
// enableReinitialize={true}
onSubmit={values => {}}
onSubmit={values => { }}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
<Form
......@@ -1053,7 +1053,7 @@ const UpdateActivity = () => {
</li>
<li>
<img src="/images/vendor/call.svg" className="img-fluid" />
<p>+1 (407) 8798 789</p>
<p className="number">+1 (407) 8798 789 asdasd</p>
</li>
</ul>
</div>
......
pages/index.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getActivitiesByVendor, getActivitiesForEndUser } from "../redux/actions/activityAction";
import { getActivitiesByVendor, getActivitiesForEndUser, getActivityById } from "../redux/actions/activityAction";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getHomeBanner } from "../redux/actions/homeBannerAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
......@@ -32,6 +32,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesForEndUser())
await store.dispatch(getHomeBanner())
await store.dispatch(getActivityById())
return {
props: {},
......@@ -43,7 +44,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
// In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
};
} catch (error) {
} catch (error) {
console.log("index.js", error);
}
}
});
styles/globals.css
......@@ -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;
}
......@@ -376,7 +376,7 @@ header {
font-size: 0.833vw;
}
.header-search>.form-control {
.header-search > .form-control {
font-size: 0.833vw;
}
......@@ -434,16 +434,16 @@ header {
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;
}
......@@ -509,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;
......@@ -517,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;
......@@ -749,6 +749,7 @@ span.form-error,
.form-container select {
padding: 12px 5px;
background-color: transparent;
font-family: sans-serif !important;
}
.form-container textarea {
......@@ -872,7 +873,7 @@ span.form-error,
user-select: none;
}
.check-container input:checked~.checkmark:after {
.check-container input:checked ~ .checkmark:after {
display: block;
}
......@@ -900,7 +901,7 @@ span.form-error,
width: 0;
}
.check-container input:checked~.checkmark {
.check-container input:checked ~ .checkmark {
background-color: #fff;
}
......@@ -1036,7 +1037,7 @@ span.form-error,
justify-content: center;
}
.btn-edit>span:first-child {
.btn-edit > span:first-child {
margin-top: 0.2rem;
}
......@@ -1114,7 +1115,7 @@ span.form-error,
color: #808080;
}
.card-booking-content>p:last-child {
.card-booking-content > p:last-child {
margin-bottom: 0;
}
......@@ -1157,7 +1158,7 @@ span.form-error,
color: #808080;
}
.card-booking-content .description>span {
.card-booking-content .description > span {
color: #646464;
text-decoration: underline;
}
......@@ -1167,7 +1168,7 @@ span.form-error,
font-weight: 600;
}
.card-booking-content .price>span {
.card-booking-content .price > span {
font-size: 0.8rem;
color: #808080;
}
......@@ -1203,7 +1204,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));
......@@ -1213,7 +1214,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));
......@@ -1291,7 +1292,10 @@ span.form-error,
margin-bottom: 0;
margin-left: 1rem;
}
.helplist li p.number {
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
}
.business-details p {
margin-left: 0;
margin-bottom: 1rem;
......@@ -1394,7 +1398,7 @@ span.form-error,
align-items: center;
}
.primary-sidebar ul li a>span {
.primary-sidebar ul li a > span {
flex: 0 0 auto;
}
......@@ -1447,7 +1451,7 @@ span.form-error,
align-items: center;
}
.sidebar ul li a>span {
.sidebar ul li a > span {
flex: 0 0 auto;
}
......@@ -1601,12 +1605,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;
}
......@@ -1618,7 +1622,7 @@ span.form-error,
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
.radioContainer input:checked ~ .checkmark:after {
display: block;
}
......@@ -2032,10 +2036,12 @@ span.form-error,
border-radius: 24px 24px 0 0;
object-fit: cover !important;
}
.business-details :where(.css-dev-only-do-not-override-1kuana8).ant-upload-wrapper.ant-upload-picture-card-wrapper {
display: block;
}
.top-rated {
position: absolute;
bottom: 10px;
bottom: 12px;
left: 10px;
background: #fff;
border-radius: 6px;
......@@ -2045,12 +2051,29 @@ span.form-error,
height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important;
padding-top: 7px;
}
.modal-01-session h2 {
font-size: calc(32px + (32 - 32) * (100vw - 320px) / (1920 - 320));
line-height: calc(44px + (44 - 44) * (100vw - 320px) / (1920 - 320));
}
.modal-01-session .text01 {
font-size: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
padding-top: 0.2rem;
padding-bottom: 1rem;
}
.info .top-name .title {
font-size: 0.885vw;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
/* height: 40px; */
}
.cl-blue {
color: #0a58ca !important;
}
.info .rating-wishlist .rating {
background: #002c5f;
border-radius: 4px;
......@@ -2102,7 +2125,7 @@ span.form-error,
margin-left: 4px;
}
.product-info .wishlist-share>div {
.product-info .wishlist-share > div {
margin-bottom: 1rem;
}
......@@ -2149,7 +2172,7 @@ span.form-error,
margin-bottom: 10px;
}
.browse-experiences-item .info .detail>div {
.browse-experiences-item .info .detail > div {
margin-bottom: 0.4rem;
}
......@@ -2462,6 +2485,7 @@ footer hr {
border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem;
margin-bottom: 1rem;
font-family: sans-serif !important;
}
.box-01 .show-all {
......@@ -2700,7 +2724,7 @@ footer hr {
line-height: 2.083vw;
}
.product-info .price>span {
.product-info .price > span {
color: #808080;
font-size: 14px;
}
......@@ -2711,7 +2735,7 @@ footer hr {
margin-bottom: 0.5rem;
}
.product-info .location>span {
.product-info .location > span {
color: #808080;
font-size: 16px;
}
......@@ -2769,7 +2793,7 @@ footer hr {
padding: 1rem 0;
}
.image-gallery-thumbnail+.image-gallery-thumbnail {
.image-gallery-thumbnail + .image-gallery-thumbnail {
margin-left: 1rem;
border-radius: 12px;
}
......@@ -2778,7 +2802,7 @@ footer hr {
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;
......@@ -2794,13 +2818,18 @@ footer hr {
font-size: 0.833vw;
}
.btn-check:focus+.btn,
/* .btn-check:focus + .btn,
.btn:focus,
button:focus:not(:focus-visible) {
box-shadow: none;
background-color: transparent;
}
.active-on-day .btn-check:focus + .active-on-day .btn,
.btn:focus,
button:focus:not(:focus-visible).active-on-day {
box-shadow: inherit;
background-color: #00000040;
} */
.availability-wrappper {
display: flex;
align-items: center;
......@@ -2820,7 +2849,7 @@ button:focus:not(:focus-visible) {
color: #000;
}
.availability-wrappper li>span {
.availability-wrappper li > span {
width: 30px;
display: block;
margin-right: 10px;
......@@ -2913,7 +2942,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;
}
......@@ -3141,7 +3170,7 @@ header .top-btn .user-icon .image-container.arrow-d {
scrollbar-width: none;
}
.active>.page-link,
.active > .page-link,
.page-link.active {
background-color: #0070bd;
border-color: #0070bd;
......@@ -3277,7 +3306,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;
}
......@@ -3313,7 +3342,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: block;
}
.page-title-area .banner-bg .image-container>span {
.page-title-area .banner-bg .image-container > span {
height: 100% !important;
}
......@@ -3477,7 +3506,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;
}
......@@ -3593,11 +3622,11 @@ input[type="number"]::-webkit-outer-spin-button {
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;
}
......@@ -3611,6 +3640,7 @@ input[type="number"]::-webkit-outer-spin-button {
padding: 0.3rem 0.5rem;
font-size: 0.677vw;
font-weight: 700;
line-height: inherit !important;
}
.blog-item .info {
......@@ -3821,18 +3851,18 @@ input[type="number"]::-webkit-outer-spin-button {
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;
}
......@@ -3869,7 +3899,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block;
}
.tooltip-btn:hover+.tooltips {
.tooltip-btn:hover + .tooltips {
display: block;
}
......@@ -3904,7 +3934,8 @@ input[type="number"]::-webkit-outer-spin-button {
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;
......@@ -4065,7 +4096,8 @@ img:hover {
margin-top: 1.5rem;
}
.load-more .pagination .page-item {}
.load-more .pagination .page-item {
}
.page-item:not(:first-child) .page-link {
margin-left: 10px;
......@@ -4179,7 +4211,9 @@ footer .footer-link ul {
.suitable-age-group .anticon.anticon-down {
display: none;
}
.vendor-signup .btn-light {
background: #fff;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -4410,7 +4444,7 @@ footer .footer-link ul {
font-size: 4.667vw;
}
.gift-card-amt>ul {
.gift-card-amt > ul {
grid-gap: 10px;
}
......@@ -4486,7 +4520,7 @@ footer .footer-link ul {
}
.gift-card-amt ul li a,
.gift-card-amt ul li label>span {
.gift-card-amt ul li label > span {
font-size: 12px;
}
......@@ -4632,7 +4666,7 @@ footer .footer-link ul {
width: 3.585vw;
}
.header-search>.form-control {
.header-search > .form-control {
font-size: 3vw;
margin-bottom: 1rem;
}
......@@ -4654,7 +4688,7 @@ footer .footer-link ul {
line-height: 4vw;
}
.home-banner-bg>span>span .image {
.home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px;
}
......@@ -4772,7 +4806,7 @@ footer .footer-link ul {
top: 40%;
}
.swiper-nav button .image-container>span {
.swiper-nav button .image-container > span {
width: 10px !important;
}
......@@ -4910,7 +4944,7 @@ footer .footer-link ul {
top: 0.8rem !important;
}
.rbt-menu>.dropdown-item {
.rbt-menu > .dropdown-item {
font-size: 13px;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!