sdarbinyan/marketplaces
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some style changes

Browse Source
This commit is contained in:
sdarbinyan
2026-02-14 18:38:25 +04:00
parent 9154660a01
commit 61f441f6b2
8 changed files with 221 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/header/header.component.html
View File

@@ -139,7 +139,7 @@
</svg>
</a>
<a (click)="closeMenu(); navigateToSearch()" class="dexar-mobile-item" style="cursor: pointer;">
<a (click)="navigateToCatalog()" class="dexar-mobile-item" style="cursor: pointer;">
<svg width="24" height="24" viewBox="0 0 31 31" fill="none">
<path d="M1.9375 4.84375C1.9375 3.23867 3.23867 1.9375 4.84375 1.9375L10.6562 1.9375C12.2613 1.9375 13.5625 3.23867 13.5625 4.84375V10.6562C13.5625 12.2613 12.2613 13.5625 10.6562 13.5625H4.84375C3.23867 13.5625 1.9375 12.2613 1.9375 10.6562L1.9375 4.84375ZM4.84375 3.875C4.30872 3.875 3.875 4.30872 3.875 4.84375V10.6562C3.875 11.1913 4.30872 11.625 4.84375 11.625H10.6562C11.1913 11.625 11.625 11.1913 11.625 10.6562V4.84375C11.625 4.30872 11.1913 3.875 10.6562 3.875H4.84375ZM17.4375 4.84375C17.4375 3.23867 18.7387 1.9375 20.3438 1.9375L26.1562 1.9375C27.7613 1.9375 29.0625 3.23867 29.0625 4.84375V10.6562C29.0625 12.2613 27.7613 13.5625 26.1562 13.5625H20.3438C18.7387 13.5625 17.4375 12.2613 17.4375 10.6562V4.84375ZM20.3438 3.875C19.8087 3.875 19.375 4.30872 19.375 4.84375V10.6562C19.375 11.1913 19.8087 11.625 20.3438 11.625H26.1562C26.6913 11.625 27.125 11.1913 27.125 10.6562V4.84375C27.125 4.30872 26.6913 3.875 26.1562 3.875H20.3438ZM1.9375 20.3438C1.9375 18.7387 3.23867 17.4375 4.84375 17.4375H10.6562C12.2613 17.4375 13.5625 18.7387 13.5625 20.3438V26.1562C13.5625 27.7613 12.2613 29.0625 10.6562 29.0625H4.84375C3.23867 29.0625 1.9375 27.7613 1.9375 26.1562L1.9375 20.3438ZM4.84375 19.375C4.30872 19.375 3.875 19.8087 3.875 20.3438V26.1562C3.875 26.6913 4.30872 27.125 4.84375 27.125H10.6562C11.1913 27.125 11.625 26.6913 11.625 26.1562V20.3438C11.625 19.8087 11.1913 19.375 10.6562 19.375H4.84375ZM17.4375 20.3438C17.4375 18.7387 18.7387 17.4375 20.3438 17.4375H26.1562C27.7613 17.4375 29.0625 18.7387 29.0625 20.3438V26.1562C29.0625 27.7613 27.7613 29.0625 26.1562 29.0625H20.3438C18.7387 29.0625 17.4375 27.7613 17.4375 26.1562V20.3438ZM20.3438 19.375C19.8087 19.375 19.375 19.8087 19.375 20.3438V26.1562C19.375 26.6913 19.8087 27.125 20.3438 27.125H26.1562C26.6913 27.125 27.125 26.6913 27.125 26.1562V20.3438C27.125 19.8087 26.6913 19.375 26.1562 19.375H20.3438Z" fill="#497671" />
</svg>

9
src/app/components/header/header.component.ts
View File

@@ -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);
});
}
}

12
src/app/pages/category/category.component.html
View File

@@ -67,7 +67,17 @@
@if (items().length === 0 && !loading()) {
<div class="no-items">
<p>В этой категории пока нет товаров</p>
<div class="no-items-icon">
<svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7H4C3.44772 7 3 7.44772 3 8V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V8C21 7.44772 20.5523 7 20 7Z" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 7V5C16 4.46957 15.7893 3.96086 15.4142 3.58579C15.0391 3.21071 14.5304 3 14 3H10C9.46957 3 8.96086 3.21071 8.58579 3.58579C8.21071 3.96086 8 4.46957 8 5V7" stroke="#a1b4b5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12V16" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
<path d="M10 14H14" stroke="#d3dad9" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<h3>Упс! Здесь пока пусто</h3>
<p>В этой категории ещё нет товаров, но скоро они появятся</p>
<a routerLink="/" class="no-items-btn">На главную</a>
</div>
}

56
src/app/pages/category/category.component.scss
View File

@@ -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;

16
src/app/pages/category/subcategories.component.html
View File

@@ -18,6 +18,7 @@
<h2>{{ parentName() }}</h2>
</header>
@if (subcategories().length > 0) {
<div class="categories-grid">
@for (cat of subcategories(); track trackByCategoryId($index, cat)) {
<a [routerLink]="['/category', cat.categoryID]" class="category-card">
@@ -34,5 +35,20 @@
</a>
}
</div>
} @else {
<div class="no-subcats">
<div class="no-subcats-icon">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="7" height="7" rx="1.5" stroke="#a1b4b5" stroke-width="1.5"/>
<rect x="14" y="3" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
<rect x="14" y="14" width="7" height="7" rx="1.5" stroke="#d3dad9" stroke-width="1.5"/>
</svg>
</div>
<h3>Упс! Подкатегорий пока нет</h3>
<p>В этом разделе ещё нет подкатегорий, но скоро они появятся</p>
<a routerLink="/" class="no-subcats-btn">На главную</a>
</div>
}
}
</div>

57
src/app/pages/category/subcategories.component.scss
View File

@@ -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;

6
src/app/pages/search/search.component.html
View File

@@ -117,6 +117,12 @@
@if (!searchQuery) {
<div class="empty-state">
<div class="empty-state-icon">
<svg width="56" height="56" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#d3dad9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2929 18.2929C18.6834 17.9024 19.3166 17.9024 19.7071 18.2929L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L18.2929 19.7071C17.9024 19.3166 17.9024 18.6834 18.2929 18.2929Z" fill="#d3dad9" />
</svg>
</div>
<p>Введите запрос для поиска товаров</p>
</div>
}

63
src/app/pages/search/search.component.scss
View File

@@ -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;
.empty-state {
display: flex;
justify-content: center;
}
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;
}
}