Skip to content

Jay Mehta / zango-frontend

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

updated details gallery page

1 parent de99cb72
Inline Side-by-side
Showing 3 changed files with 86 additions and 68 deletions
components/detail/Detail.js
......@@ -45,10 +45,10 @@ const Detail = () => {
</div>
</div>
<div className="row">
<div className="col-xl-5">
<div className="col-xl-6">
<DetailGallery activityById={activityById}></DetailGallery>
</div>
<div className="col-xl-7 listing-wrapper">
<div className="col-xl-6 listing-wrapper">
<DetailInfo activityById={activityById}></DetailInfo>
</div>
</div>
......
components/home/Testimonial.js
......@@ -4,7 +4,7 @@ import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import StarRatings from 'react-star-ratings';
import StarRatings from "react-star-ratings";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
......@@ -16,7 +16,7 @@ import "swiper/css/navigation";
const Testimonial = ({ testimonial }) => {
const [rating, setRating] = useState(0);
const handleRatingChange = (newRating) => {
const handleRatingChange = newRating => {
setRating(newRating);
};
return (
......@@ -50,16 +50,16 @@ const Testimonial = ({ testimonial }) => {
</span>
</div>
<div className="rating">
<StarRatings
rating={rating}
starRatedColor="#ffe200" // Set the rated color to yellow
starHoverColor="#ffe200" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
name='rating'
starDimension="16px" // Set star width and height
/>
{/* <p>You rated this: {rating} stars</p> */}
<StarRatings
rating={rating}
starRatedColor="#ffe200" // Set the rated color to yellow
starHoverColor="#ffe200" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
name="rating"
starDimension="16px" // Set star width and height
/>
{/* <p>You rated this: {rating} stars</p> */}
{/* <a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
......
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;
......@@ -845,7 +845,7 @@ span.form-error,
user-select: none;
}
.check-container input:checked~.checkmark:after {
.check-container input:checked ~ .checkmark:after {
display: block;
}
......@@ -873,7 +873,7 @@ span.form-error,
width: 0;
}
.check-container input:checked~.checkmark {
.check-container input:checked ~ .checkmark {
background-color: #fff;
}
......@@ -1009,7 +1009,7 @@ span.form-error,
justify-content: center;
}
.btn-edit>span:first-child {
.btn-edit > span:first-child {
margin-top: 0.2rem;
}
......@@ -1087,7 +1087,7 @@ span.form-error,
color: #808080;
}
.card-booking-content>p:last-child {
.card-booking-content > p:last-child {
margin-bottom: 0;
}
......@@ -1130,7 +1130,7 @@ span.form-error,
color: #808080;
}
.card-booking-content .description>span {
.card-booking-content .description > span {
color: #646464;
text-decoration: underline;
}
......@@ -1140,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;
}
......@@ -1176,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));
......@@ -1186,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));
......@@ -1335,7 +1335,7 @@ span.form-error,
}
/* vendor dashboar */
.bg-z-primary{
.bg-z-primary {
background-color: #242932;
}
......@@ -1367,7 +1367,7 @@ span.form-error,
align-items: center;
}
.primary-sidebar ul li a>span {
.primary-sidebar ul li a > span {
flex: 0 0 auto;
}
......@@ -1376,7 +1376,6 @@ span.form-error,
padding-top: 5px;
}
.sidebarContainer {
display: flex;
}
......@@ -1421,7 +1420,7 @@ span.form-error,
align-items: center;
}
.sidebar ul li a>span {
.sidebar ul li a > span {
flex: 0 0 auto;
}
......@@ -1575,12 +1574,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;
}
......@@ -1592,7 +1591,7 @@ span.form-error,
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
.radioContainer input:checked ~ .checkmark:after {
display: block;
}
......@@ -2072,7 +2071,7 @@ span.form-error,
margin-left: 4px;
}
.product-info .wishlist-share>div {
.product-info .wishlist-share > div {
margin-bottom: 1rem;
}
......@@ -2083,7 +2082,7 @@ span.form-error,
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;
......@@ -2119,7 +2118,7 @@ span.form-error,
margin-bottom: 10px;
}
.browse-experiences-item .info .detail>div {
.browse-experiences-item .info .detail > div {
margin-bottom: 0.4rem;
}
......@@ -2654,7 +2653,7 @@ footer hr {
line-height: 2.083vw;
}
.product-info .price>span {
.product-info .price > span {
color: #808080;
font-size: 14px;
}
......@@ -2665,7 +2664,7 @@ footer hr {
margin-bottom: 0.5rem;
}
.product-info .location>span {
.product-info .location > span {
color: #808080;
font-size: 16px;
}
......@@ -2701,18 +2700,30 @@ footer hr {
}
.image-gallery-thumbnail {
width: 25%;
width: 23%;
}
.image-gallery-content .image-gallery-slide .image-gallery-image {
/* max-height: 100%; */
border-radius: 8px;
}
.image-gallery-thumbnail .image-gallery-thumbnail-image,
.image-gallery-slide.image-gallery-center {
border-radius: 8px;
overflow: hidden;
}
.image-gallery-thumbnails {
padding: 1rem 0;
}
.image-gallery-thumbnail + .image-gallery-thumbnail {
margin-left: 1rem;
border-radius: 12px;
}
.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;
......@@ -2728,7 +2739,7 @@ footer hr {
font-size: 0.833vw;
}
.btn-check:focus+.btn,
.btn-check:focus + .btn,
.btn:focus,
button:focus:not(:focus-visible) {
box-shadow: none;
......@@ -2748,7 +2759,7 @@ button:focus:not(:focus-visible) {
margin: 0.5rem;
}
.availability-wrappper li>span {
.availability-wrappper li > span {
width: 30px;
display: block;
margin-right: 10px;
......@@ -2836,7 +2847,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;
}
......@@ -2971,7 +2982,7 @@ button:focus:not(:focus-visible) {
scrollbar-width: none;
}
.active>.page-link,
.active > .page-link,
.page-link.active {
background-color: #0070bd;
border-color: #0070bd;
......@@ -3107,7 +3118,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;
}
......@@ -3143,7 +3154,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;
}
......@@ -3307,7 +3318,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;
}
......@@ -3423,11 +3434,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;
}
......@@ -3651,18 +3662,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;
}
......@@ -3699,7 +3710,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block;
}
.tooltip-btn:hover+.tooltips {
.tooltip-btn:hover + .tooltips {
display: block;
}
......@@ -3729,7 +3740,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;
......@@ -3889,7 +3901,8 @@ img:hover {
margin-bottom: 4rem;
}
.load-more .pagination .page-item {}
.load-more .pagination .page-item {
}
.page-item:not(:first-child) .page-link {
margin-left: 10px;
......@@ -3917,7 +3930,9 @@ img:hover {
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-wrapper .product-info {
padding-left: 2rem;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -4010,6 +4025,9 @@ img:hover {
}
@media (max-width: 1023px) {
.listing-wrapper .product-info {
padding-left: 0;
}
.browse-experiences-item .img-wrapper .image-container .image {
height: 120px !important;
}
......@@ -4129,7 +4147,7 @@ img:hover {
font-size: 4.667vw;
}
.gift-card-amt>ul {
.gift-card-amt > ul {
grid-gap: 10px;
}
......@@ -4205,7 +4223,7 @@ img:hover {
}
.gift-card-amt ul li a,
.gift-card-amt ul li label>span {
.gift-card-amt ul li label > span {
font-size: 12px;
}
......@@ -4351,7 +4369,7 @@ img:hover {
width: 3.585vw;
}
.header-search>.form-control {
.header-search > .form-control {
font-size: 3vw;
margin-bottom: 1rem;
}
......@@ -4373,7 +4391,7 @@ img:hover {
line-height: 4vw;
}
.home-banner-bg>span>span .image {
.home-banner-bg > span > span .image {
border-radius: 0 0 20px 20px;
}
......@@ -4491,7 +4509,7 @@ img:hover {
top: 40%;
}
.swiper-nav button .image-container>span {
.swiper-nav button .image-container > span {
width: 10px !important;
}
......@@ -4629,7 +4647,7 @@ img:hover {
top: 0.8rem !important;
}
.rbt-menu>.dropdown-item {
.rbt-menu > .dropdown-item {
font-size: 13px;
}
......@@ -4659,4 +4677,4 @@ img:hover {
.carousal-c {
padding: 0 1rem;
}
}
\ No newline at end of file
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!