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

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;

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

@@ -18,21 +18,37 @@
<h2>{{ parentName() }}</h2>
</header>
<div class="categories-grid">
@for (cat of subcategories(); track trackByCategoryId($index, cat)) {
<a [routerLink]="['/category', cat.categoryID]" class="category-card">
<div class="category-image">
@if (cat.icon) {
<img [src]="cat.icon" [alt]="cat.name" loading="lazy" decoding="async" />
} @else {
<div class="category-fallback">{{ cat.name.charAt(0) }}</div>
}
</div>
<div class="category-info">
<h3 class="category-name">{{ cat.name }}</h3>
</div>
</a>
}
</div>
@if (subcategories().length > 0) {
<div class="categories-grid">
@for (cat of subcategories(); track trackByCategoryId($index, cat)) {
<a [routerLink]="['/category', cat.categoryID]" class="category-card">
<div class="category-image">
@if (cat.icon) {
<img [src]="cat.icon" [alt]="cat.name" loading="lazy" decoding="async" />
} @else {
<div class="category-fallback">{{ cat.name.charAt(0) }}</div>
}
</div>
<div class="category-info">
<h3 class="category-name">{{ cat.name }}</h3>
</div>
</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>
}

65
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;
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;
}
}