Skip to content

Commit

Permalink
fixed css
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgmman
mgmman committed Nov 5, 2024
1 parent 50da93f commit 11d1b4d
Show file tree
Hide file tree
Showing 5 changed files with 298 additions and 284 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 27 additions & 25 deletions src/Pages/favorites-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,32 @@ export function FavoritesPage({
offers,
}: FavoritesPageProps): React.JSX.Element {
return (
<Layout showFooter>
<main className="page__main page__main--favorites">
<Helmet>
<title>6 cities - favorites</title>
</Helmet>
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
{Map.groupBy(offers, (o) => o.city.name)
.entries()
.map(([cityName, offersInCity]) => (
<OfferGroup
key={cityName}
cityName={cityName}
offers={offersInCity}
/>
))
.toArray()}
;
</ul>
</section>
</div>
</main>
</Layout>
<div className="page">
<Layout showFooter>
<main className="page__main page__main--favorites">
<Helmet>
<title>6 cities - favorites</title>
</Helmet>
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
{Map.groupBy(offers, (o) => o.city.name)
.entries()
.map(([cityName, offersInCity]) => (
<OfferGroup
key={cityName}
cityName={cityName}
offers={offersInCity}
/>
))
.toArray()}
;
</ul>
</section>
</div>
</main>
</Layout>
</div>
);
}
202 changes: 102 additions & 100 deletions src/Pages/main-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,108 +13,110 @@ interface MainPageProps {
export function MainPage({ offers }: MainPageProps): React.JSX.Element {
const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
return (
<Layout showFooter>
<main className="page__main page__main--index">
<Helmet>6 cities</Helmet>
<h1 className="visually-hidden">Cities</h1>
<div className="tabs">
<section className="locations container">
<ul className="locations__list tabs__list">
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Paris</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Cologne</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Brussels</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item tabs__item--active">
<span>Amsterdam</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Hamburg</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Dusseldorf</span>
</a>
</li>
</ul>
</section>
</div>
<div className="cities">
<div className="cities__places-container container">
<section className="cities__places places">
<h2 className="visually-hidden">Places</h2>
<b className="places__found">
{offers.length} places to stay in Amsterdam
</b>
<form className="places__sorting" action="#" method="get">
<span className="places__sorting-caption">Sort by</span>
<span className="places__sorting-type" tabIndex={0}>
Popular
<svg className="places__sorting-arrow" width="7" height="4">
<use xlinkHref="#icon-arrow-select"></use>
</svg>
</span>
<ul className="places__options places__options--custom places__options--opened">
<li
className="places__option places__option--active"
tabIndex={0}
>
Popular
</li>
<li className="places__option" tabIndex={0}>
Price: low to high
</li>
<li className="places__option" tabIndex={0}>
Price: high to low
</li>
<li className="places__option" tabIndex={0}>
Top rated first
</li>
</ul>
</form>
<OffersList
offers={offers}
onActiveOfferChange={(offer: Nullable<Offer>) =>
setActiveOffer(offer)
}
isOnMainPage
/>
<div className="page page--gray page--main">
<Layout showFooter>
<main className="page__main page__main--index">
<Helmet>6 cities</Helmet>
<h1 className="visually-hidden">Cities</h1>
<div className="tabs">
<section className="locations container">
<ul className="locations__list tabs__list">
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Paris</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Cologne</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Brussels</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item tabs__item--active">
<span>Amsterdam</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Hamburg</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Dusseldorf</span>
</a>
</li>
</ul>
</section>
<div className="cities__right-section">
<Map
city={offers[0].city}
points={offers.map((x) => ({
location: x.location,
id: x.id,
}))}
selectedPoint={
activeOffer
? {
location: activeOffer?.location,
id: activeOffer?.id,
}
: undefined
}
isOnMainPage
/>
</div>
<div className="cities">
<div className="cities__places-container container">
<section className="cities__places places">
<h2 className="visually-hidden">Places</h2>
<b className="places__found">
{offers.length} places to stay in Amsterdam
</b>
<form className="places__sorting" action="#" method="get">
<span className="places__sorting-caption">Sort by</span>
<span className="places__sorting-type" tabIndex={0}>
Popular
<svg className="places__sorting-arrow" width="7" height="4">
<use xlinkHref="#icon-arrow-select"></use>
</svg>
</span>
<ul className="places__options places__options--custom places__options--opened">
<li
className="places__option places__option--active"
tabIndex={0}
>
Popular
</li>
<li className="places__option" tabIndex={0}>
Price: low to high
</li>
<li className="places__option" tabIndex={0}>
Price: high to low
</li>
<li className="places__option" tabIndex={0}>
Top rated first
</li>
</ul>
</form>
<OffersList
offers={offers}
onActiveOfferChange={(offer: Nullable<Offer>) =>
setActiveOffer(offer)
}

Check failure on line 94 in src/Pages/main-page.tsx

View workflow job for this annotation

GitHub Actions / Check 

Unexpected newline before '}'
isOnMainPage
/>
</section>
<div className="cities__right-section">
<Map
city={offers[0].city}
points={offers.map((x) => ({
location: x.location,
id: x.id,
}))}
selectedPoint={
activeOffer
? {
location: activeOffer?.location,

Check failure on line 108 in src/Pages/main-page.tsx

View workflow job for this annotation

GitHub Actions / Check 

Expected indentation of 24 spaces but found 26
id: activeOffer?.id,

Check failure on line 109 in src/Pages/main-page.tsx

View workflow job for this annotation

GitHub Actions / Check 

Expected indentation of 24 spaces but found 26
}

Check failure on line 110 in src/Pages/main-page.tsx

View workflow job for this annotation

GitHub Actions / Check 

Expected indentation of 22 spaces but found 24
: undefined
}
isOnMainPage
/>
</div>
</div>
</div>
</div>
</main>
</Layout>
</main>
</Layout>
</div>
);
}
Loading

0 comments on commit 11d1b4d

Please sign in to comment.