Skip to content

Commit

Permalink
add custom scroll to modal window
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnnaTsepilova
AnnaTsepilova committed Apr 25, 2024
1 parent 22da35f commit e627f1f
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 79 deletions.
6 changes: 3 additions & 3 deletions src/components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Footer = () => {
<ul className={css.social_list}>
<li className={css.social_item}>
<a
href="/catalog"
href="/campers-rent-app/catalog"
target="_blank"
rel="noopener noreferrer"
aria-label="facebook"
Expand All @@ -43,7 +43,7 @@ const Footer = () => {
</li>
<li className={css.social_item}>
<a
href="/catalog"
href="/campers-rent-app/catalog"
target="_blank"
rel="noopener noreferrer"
aria-label="instagram"
Expand All @@ -56,7 +56,7 @@ const Footer = () => {
</li>
<li className={css.social_item}>
<a
href="/catalog"
href="/campers-rent-app/catalog"
target="_blank"
rel="noopener noreferrer"
aria-label="youtube"
Expand Down
138 changes: 74 additions & 64 deletions src/components/Modal/ModalAdvert.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,77 +27,87 @@ const ModalAdvert = ({ advert, onModalClose }) => {
</button>

<div className={css.advert_info}>
<div className={css.advert_title}>
<h2 className={css.advert_name}>{advert.name}</h2>
<div className={style.advert_subtitle}>
<div className={style.advert_reviews}>
<svg width={16} height={16}>
<use href={`${svgSprite}#star`}></use>
</svg>
<p>
{advert.rating}({advert.reviews.length}
Reviews)
</p>
</div>
<div className={style.advert_location}>
<svg width={16} height={16}>
<use href={`${svgSprite}#map-pin`}></use>
</svg>
<p>{advert.location}</p>
</div>
</div>
<div className={css.advert_price}>
<h2 className={css.advert_name}>{advert.name}</h2>
<div className={style.advert_subtitle}>
<div className={style.advert_reviews}>
<svg width={16} height={16}>
<use href={`${svgSprite}#star`}></use>
</svg>
<p>
&#8364;
{advert.price}
{advert.rating}({advert.reviews.length}
Reviews)
</p>
</div>
<div className={style.advert_location}>
<svg width={16} height={16}>
<use href={`${svgSprite}#map-pin`}></use>
</svg>
<p>{advert.location}</p>
</div>
</div>
<div className={css.advert_price}>
<p>
&#8364;
{advert.price}
</p>
</div>

<ul className={style.advertItem_gallery}>
{advert.gallery.map(imgUrl => (
<li key={imgUrl}>
<img
className={style.advertItem_img}
src={imgUrl}
alt={advert.name}
width={290}
height={310}
/>
</li>
))}
</ul>
<p className="text">{advert.description}</p>
</div>

<div className={css.advert_details_btns}>
<button
className={`${css.advert_details_btn} subtitle_h3 ${
btnActive === 'features' ? css.row_accent : ''
}`}
onClick={() => setBtnActive('features')}
>
Features
</button>
<button
className={`${css.advert_details_btn} subtitle_h3 ${
btnActive === 'rewiews' ? css.row_accent : ''
}`}
onClick={() => setBtnActive('rewiews')}
>
Reviews
</button>
</div>
<div className={css.advert_details_wrapper}>
<div className={css.advert_details}>
{btnActive === 'features' ? <Features advert={advert} /> : <></>}
{btnActive === 'rewiews' ? (
<Reviews reviews={advert.reviews} />
) : (
<></>
)}
<div className={css.scrollbar_container}>
<div className={css.list_thumb}>
<div className={css.content_margin_right}>
<ul className={style.advertItem_gallery}>
{advert.gallery.map(imgUrl => (
<li key={imgUrl}>
<img
className={style.advertItem_img}
src={imgUrl}
alt={advert.name}
width={290}
height={310}
/>
</li>
))}
</ul>
<p className={`${css.advertItem_descr} text`}>
{advert.description}
</p>

<div className={css.advert_details_btns}>
<button
className={`${css.advert_details_btn} subtitle_h3 ${
btnActive === 'features' ? css.row_accent : ''
}`}
onClick={() => setBtnActive('features')}
>
Features
</button>
<button
className={`${css.advert_details_btn} subtitle_h3 ${
btnActive === 'rewiews' ? css.row_accent : ''
}`}
onClick={() => setBtnActive('rewiews')}
>
Reviews
</button>
</div>
<div className={css.advert_details_wrapper}>
<div className={css.advert_details}>
{btnActive === 'features' ? (
<Features advert={advert} />
) : (
<></>
)}
{btnActive === 'rewiews' ? (
<Reviews reviews={advert.reviews} />
) : (
<></>
)}
</div>
<BookingForm />
</div>
</div>
</div>
<BookingForm />
</div>
</div>
</Modal>
Expand Down
61 changes: 49 additions & 12 deletions src/components/Modal/ModalAdvert.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
height: 100vh;

background: var(--backdrop-bg-color);

overflow-y: scroll;
}

.modal_window {
Expand All @@ -20,14 +22,12 @@
transform: translate(-50%, -50%);

width: 982px;
max-height: 720px;
height: auto;
padding: 40px;
height: 845px;

padding: 40px 16px 40px 40px;

border-radius: 20px;
background-color: var(--white);

overflow: hidden scroll;
}

.modal_close_btn {
Expand Down Expand Up @@ -57,11 +57,7 @@
}

.advert_info {
display: flex;
flex-direction: column;
gap: 24px;

margin-bottom: 44px;
margin-bottom: 24px;
}

.advert_name {
Expand All @@ -72,15 +68,56 @@
line-height: 1.25;
}

.advert_subtitle {
margin-bottom: 16px;
}

.advert_price {
composes: advert_name;

margin-top: 16px;
margin-bottom: 0;
}

.scroll_info {
overflow: hidden scroll;
.advertItem_descr {
margin-top: 24px;
margin-bottom: 44px;
}

.scrollbar_container {
position: relative;
display: flex;
justify-content: flex-start;

width: 100%;
height: 624px;

overflow: hidden;
}

.list_thumb {
position: relative;

width: calc(100% + 24px);
height: 100%;

overflow-y: scroll;
}

.content_margin_right {
margin-right: 16px;
}

.list_thumb::-webkit-scrollbar {
width: 8px;
}

.list_thumb::-webkit-scrollbar-thumb {
width: 8px;
height: 264px;

border-radius: 7px;
background: var(--scroll-color);
}

.advert_details_btns {
Expand Down

0 comments on commit e627f1f

Please sign in to comment.