diff --git a/src/App.module.scss b/src/App.module.scss index 5ff8f1f..d1d7517 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,3 +1,4 @@ .app { height: 100%; + width: 100%; } diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index 3fcd186..231f76e 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +#root { + width: 100%; +} + html { background-color: var(--background-color); font-color: var(--text-color); diff --git a/src/components/home/ExcursionCard.module.scss b/src/components/home/ExcursionCard.module.scss index 91e00a5..3928551 100644 --- a/src/components/home/ExcursionCard.module.scss +++ b/src/components/home/ExcursionCard.module.scss @@ -15,7 +15,7 @@ .cardImageWrapper { overflow: hidden; - height: 240px; + height: 20em; width: 100%; } @@ -23,3 +23,12 @@ height: 100%; width: auto; } + +.description { + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + /* количество строк */ + -webkit-box-orient: vertical; + overflow: hidden; +} diff --git a/src/components/home/ExcursionCard.tsx b/src/components/home/ExcursionCard.tsx index 1024b93..85d4e51 100644 --- a/src/components/home/ExcursionCard.tsx +++ b/src/components/home/ExcursionCard.tsx @@ -17,11 +17,11 @@ export default function ExcursionCard({ title, description, imageUrl, city, minP return
{title}
-

{title}

-

город: {city}

-

стоимость: {cost}

-

{description}

-

Человек: от {minPeople} до {maxPeople}

+

{title}

+ город: {city} + стоимость: {cost} + {description} + Человек: от {minPeople} до {maxPeople}
}; diff --git a/src/components/home/Filters.module.scss b/src/components/home/Filters.module.scss index f15166a..90e1402 100644 --- a/src/components/home/Filters.module.scss +++ b/src/components/home/Filters.module.scss @@ -6,5 +6,6 @@ .filters { display: flex; + align-items: end; gap: 24px; } diff --git a/src/components/home/Filters.tsx b/src/components/home/Filters.tsx index f3b129e..d8ca02d 100644 --- a/src/components/home/Filters.tsx +++ b/src/components/home/Filters.tsx @@ -25,9 +25,9 @@ export default function Filters({ onChangeFilter }: IFiltersProps) { >
setFilter({ ...filter, city: e.target.value })} /> - + +e.target.value} placeholder='10' /> +
- } diff --git a/src/components/home/Listing.module.scss b/src/components/home/Listing.module.scss index cafb4b4..69ac876 100644 --- a/src/components/home/Listing.module.scss +++ b/src/components/home/Listing.module.scss @@ -1,3 +1,11 @@ +.gridContainer { + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; +} + .excursionsGrid { height: fit-content; width: 100%; @@ -7,7 +15,8 @@ justify-content: space-evenly; } -.loader { - background-color: red; - height: 30px; +@media(max-width:768px) { + .excursionsGrid { + grid-template-columns: 1fr + } } diff --git a/src/components/home/Listing.tsx b/src/components/home/Listing.tsx index b667b17..4a078fc 100644 --- a/src/components/home/Listing.tsx +++ b/src/components/home/Listing.tsx @@ -4,6 +4,7 @@ import type { IExcursionCard } from '@/types'; import { useEffect, useRef, useState, useCallback } from 'react'; import type { IExcursionsFilter } from '@/types'; import ApiService from '@/services/apiService'; +import Loader from '@/components/ui/Loader/Loader'; const LIMIT = 3; @@ -71,22 +72,28 @@ const Listing = (props: IListingProps) => { }, [excursions]) return ( -
-
- { - excursions.map((excursion, index) => ( - setCardRef(el, index)} - minPeople={excursion.minCountPeople} - maxPeople={excursion.maxCountPeople} - /> - )) - } -
-
{isLoading ? 'loading...' : ''}
-
+ <> + {!!excursions.length && +
+
+ { + excursions.map((excursion, index) => ( + setCardRef(el, index)} + minPeople={excursion.minCountPeople} + maxPeople={excursion.maxCountPeople} + /> + )) + } +
+
+ } + { + isLoading && + } + ); } diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss index 578bd16..3edce29 100644 --- a/src/components/ui/Button/Button.module.scss +++ b/src/components/ui/Button/Button.module.scss @@ -1,4 +1,6 @@ -.buttonContainer {} +.buttonContainer { + height: fit-content; +} .buttonOutlineContainer { background-color: var(--background-color); @@ -17,6 +19,8 @@ cursor: pointer; gap: 8px; width: fit-content; + height: fit-content; + justify-content: center; &:hover { background-color: grey; diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index 3c50a81..26e3b13 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -13,7 +13,7 @@ interface ButtonProps { export default function Button({ children, onClick, onKeyUp, iconAfter, outline, className }: ButtonProps) { return ( - + +
+ Сортировка: + +