diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index dd7fbcc..0daa2b6 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -139,7 +139,7 @@ - + diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 7ee0c93..2806c79 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -37,4 +37,13 @@ export class HeaderComponent { navigateToSearch(): void { this.router.navigate(['/search']); } + + navigateToCatalog(): void { + this.closeMenu(); + this.router.navigate(['/']).then(() => { + setTimeout(() => { + document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' }); + }, 100); + }); + } } diff --git a/src/app/pages/category/category.component.html b/src/app/pages/category/category.component.html index 56c5a08..88ce8e4 100644 --- a/src/app/pages/category/category.component.html +++ b/src/app/pages/category/category.component.html @@ -67,7 +67,17 @@ @if (items().length === 0 && !loading()) {
-

В этой категории пока нет товаров

+
+ + + + + + +
+

Упс! Здесь пока пусто

+

В этой категории ещё нет товаров, но скоро они появятся

+ На главную
} diff --git a/src/app/pages/category/category.component.scss b/src/app/pages/category/category.component.scss index f810fe4..ddb327d 100644 --- a/src/app/pages/category/category.component.scss +++ b/src/app/pages/category/category.component.scss @@ -7,7 +7,6 @@ .error, .loading-initial, -.no-items, .no-more { text-align: center; padding: 60px 20px; @@ -19,6 +18,61 @@ font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } +.no-items { + text-align: center; + padding: 80px 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + .no-items-icon { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f3f9; + border-radius: 50%; + margin-bottom: 24px; + } + + h3 { + font-size: 1.25rem; + font-weight: 700; + color: #1e3c38; + margin: 0 0 8px 0; + } + + p { + font-size: 0.95rem; + color: #697777; + margin: 0 0 24px 0; + max-width: 340px; + line-height: 1.5; + } + + .no-items-btn { + display: inline-flex; + align-items: center; + padding: 10px 28px; + background: #497671; + color: white; + border-radius: 13px; + font-family: "DM Sans", sans-serif; + font-size: 0.9375rem; + font-weight: 600; + text-decoration: none; + transition: background 0.2s ease, transform 0.15s ease; + + &:hover { + background: #3d635f; + transform: translateY(-1px); + } + } +} + .error button { margin-top: 20px; padding: 10px 24px; diff --git a/src/app/pages/category/subcategories.component.html b/src/app/pages/category/subcategories.component.html index 6d6a359..30513ad 100644 --- a/src/app/pages/category/subcategories.component.html +++ b/src/app/pages/category/subcategories.component.html @@ -18,21 +18,37 @@

{{ parentName() }}

-
- @for (cat of subcategories(); track trackByCategoryId($index, cat)) { - -
- @if (cat.icon) { - - } @else { -
{{ cat.name.charAt(0) }}
- } -
-
-

{{ cat.name }}

-
- - } -
+ @if (subcategories().length > 0) { +
+ @for (cat of subcategories(); track trackByCategoryId($index, cat)) { + +
+ @if (cat.icon) { + + } @else { +
{{ cat.name.charAt(0) }}
+ } +
+
+

{{ cat.name }}

+
+ + } +
+ } @else { +
+
+ + + + + + +
+

Упс! Подкатегорий пока нет

+

В этом разделе ещё нет подкатегорий, но скоро они появятся

+ На главную +
+ } } diff --git a/src/app/pages/category/subcategories.component.scss b/src/app/pages/category/subcategories.component.scss index 7d033bf..f33a949 100644 --- a/src/app/pages/category/subcategories.component.scss +++ b/src/app/pages/category/subcategories.component.scss @@ -71,6 +71,62 @@ } } + // Empty subcategories state + .no-subcats { + text-align: center; + padding: 80px 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + .no-subcats-icon { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f3f9; + border-radius: 50%; + margin-bottom: 24px; + } + + h3 { + font-size: 1.25rem; + font-weight: 700; + color: #1e3c38; + margin: 0 0 8px 0; + } + + p { + font-size: 0.95rem; + color: #697777; + margin: 0 0 24px 0; + max-width: 340px; + line-height: 1.5; + } + + .no-subcats-btn { + display: inline-flex; + align-items: center; + padding: 10px 28px; + background: #497671; + color: white; + border-radius: 13px; + font-family: "DM Sans", sans-serif; + font-size: 0.9375rem; + font-weight: 600; + text-decoration: none; + transition: background 0.2s ease, transform 0.15s ease; + + &:hover { + background: #3d635f; + transform: translateY(-1px); + } + } + } + .sub-header { margin-bottom: 28px; @@ -171,6 +227,7 @@ margin: 0; line-height: 1.3; display: -webkit-box; + line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; diff --git a/src/app/pages/search/search.component.html b/src/app/pages/search/search.component.html index 356c6e3..b620c29 100644 --- a/src/app/pages/search/search.component.html +++ b/src/app/pages/search/search.component.html @@ -117,6 +117,12 @@ @if (!searchQuery) {
+
+ + + + +

Введите запрос для поиска товаров

} diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss index b7b989f..7a62fb2 100644 --- a/src/app/pages/search/search.component.scss +++ b/src/app/pages/search/search.component.scss @@ -56,36 +56,71 @@ } .empty-state, -.no-results, .loading-initial { text-align: center; padding: 60px 20px; color: #697777; } -.no-results { - .no-results-icon { - margin-bottom: 20px; - opacity: 0.5; - display: flex; - justify-content: center; - } +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + padding: 80px 20px; - h2 { - font-size: 1.5rem; - color: #1e3c38; - margin-bottom: 12px; + .empty-state-icon { + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f3f9; + border-radius: 50%; + margin-bottom: 20px; } p { - margin: 8px 0; + font-size: 1rem; + color: #a1b4b5; + margin: 0; + } +} + +.no-results { + text-align: center; + padding: 80px 20px; + display: flex; + flex-direction: column; + align-items: center; + + .no-results-icon { + width: 90px; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + background: #f5f3f9; + border-radius: 50%; + margin-bottom: 20px; + } + + h2 { + font-size: 1.25rem; + font-weight: 700; + color: #1e3c38; + margin: 0 0 8px 0; + } + + p { + margin: 4px 0; color: #697777; + font-size: 0.95rem; } .hint { - font-size: 0.9rem; + font-size: 0.875rem; color: #a1b4b5; - margin-top: 16px; + margin-top: 12px; } }