From c46adbf0e112b396eafe3807679e666b15149458 Mon Sep 17 00:00:00 2001 From: lootboxer <> Date: Wed, 2 Jul 2025 14:04:32 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BD=D0=BE=D1=80=D0=BC=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20?= =?UTF-8?q?=D0=BB=D0=BE=D0=B0=D0=B4=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.module.scss | 1 + src/assets/styles/main.scss | 4 ++ src/components/home/ExcursionCard.module.scss | 11 +++- src/components/home/ExcursionCard.tsx | 10 ++-- src/components/home/Filters.module.scss | 1 + src/components/home/Filters.tsx | 4 +- src/components/home/Listing.module.scss | 15 ++++-- src/components/home/Listing.tsx | 39 +++++++++------ src/components/ui/Button/Button.module.scss | 6 ++- src/components/ui/Button/Button.tsx | 2 +- src/components/ui/Loader/Loader.module.scss | 27 ++++++++++ src/components/ui/Loader/Loader.tsx | 11 ++++ .../ui/NumberRageInput/NumberRageInput.tsx | 4 ++ src/constants/index.ts | 50 +++++++++---------- src/pages/Home.module.scss | 7 +++ src/pages/Home.tsx | 27 ++++++---- 16 files changed, 154 insertions(+), 65 deletions(-) create mode 100644 src/components/ui/Loader/Loader.module.scss create mode 100644 src/components/ui/Loader/Loader.tsx 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 ( - + +
+ Сортировка: + +