diff --git a/angular/src/app/pages/products/products.component.scss b/angular/src/app/pages/products/products.component.scss
index f390e5e..cff19de 100644
--- a/angular/src/app/pages/products/products.component.scss
+++ b/angular/src/app/pages/products/products.component.scss
@@ -1,18 +1,44 @@
:host {
.products-container {
width: 100%;
+ max-width: 1208px;
display: flex;
flex-direction: column;
- margin-bottom: 16px;
+ margin: 0 auto 16px;
+
+ &__category-name-container {
+ margin-bottom: 16px;
+
+ h1 {
+ font-size: 30px;
+ font-weight: 500;
+ }
+
+ .bread-crumbs {
+ font-weight: 600;
+ color: #9d9d9d;
+ font-size: 16px;
+
+ .all {
+ margin-right: 4px;
+ cursor: pointer;
+ }
+
+ .selected-category {
+ color: #c43f00;
+ margin-left: 4px;
+ }
+ }
+ }
&__filters-container {
width: 100%;
- max-width: 700px;
margin: 12px auto 24px auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
- flex-direction: column;
+ flex-direction: row;
+ align-items: center;
label {
margin: 8px;
@@ -20,37 +46,118 @@
}
}
+ &__categories-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ font-size: 14px;
+ align-items: center;
+ // margin-left: -24px;
+ overflow-x: auto;
+ width: 100%;
+ margin-right: 16px;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+
+ .group-container {
+ font-weight: 600;
+ padding: 6px 24px;
+ transition: all .5s;
+ border-radius: 1.125rem;
+ cursor: pointer;
+
+ &.non-visible {
+ display: none;
+ }
+
+ &.active {
+ color: #fff;
+ background: #09467f;
+ border: none;
+ // box-shadow: 0 0 10px 5px rgb(221 221 221);
+ }
+
+ &:hover {
+ color: #fff;
+ background: #09467f;
+ border: none;
+ // box-shadow: 0 0 10px 5px rgb(221 221 221);
+ }
+ }
+ }
+
&__items {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
- max-width: 648px;
margin: 0 auto;
+
+ }
+
+ &__category-container {
+ display: flex;
+ flex-direction: column;
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 48px 0 16px;
+
+ h2 {
+ margin: 0;
+ font-size: 30px;
+ font-weight: 500;
+ }
+
+ button {
+ padding: 8px 26px;
+ background: #1D3F5F;
+ border: none;
+ border-radius: 1.125rem;
+ color: #fff;
+ transition: all .3s;
+
+ &:hover {
+ box-shadow: 0 0 10px 5px rgb(211 211 211);
+ }
+ }
+ }
}
&__item {
height: auto;
min-height: 200px;
- width: 150px;
+ width: 290px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-bottom: 38Px;
+ transition: all .3s;
+ cursor: pointer;
img {
width: 100%;
margin: 0 auto;
- height: 150px;
+ height: 190px;
object-fit: cover;
+ border-radius: 1.125rem;
+ transition: all .3s;
}
- p {
- font-size: 14px;
- font-weight: 600;
- width: 100%;
+ &:hover {
+ scale: 1.01;
+ border: none;
+
+ img {
+ box-shadow: 0 0 10px 5px rgb(221 221 221);
+ border: none;
+ }
}
}
@@ -59,40 +166,84 @@
display: flex;
align-items: flex-start;
margin-top: 8px;
+
+ p {
+ font-size: 18px;
+ font-weight: 600;
+ width: 100%;
+ margin-bottom: 6px;
+ }
}
&__add-to-cart {
- width: 100%;
- height: 30px;
- background: #09467f;
+ padding: 8px 26px;
+ background: #C43F00;
border: none;
- border-radius: 4px;
+ border-radius: 1.125rem;
color: #fff;
+ }
+
+ &__item-footer {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
position: absolute;
bottom: 0;
+
+ &>span {
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+
+ &__product-composition {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1.375;
}
}
- @media screen and (max-width: 683px) {
+ // @media screen and (max-width: 1549px) {
+ // .products-container {
+ // &__items {
+ // max-width: 1208px;
+ // }
+ // &__filters-container {
+ // max-width: 1208px;
+ // }
+ // }
+ // }
+
+ @media screen and (max-width: 1243px) {
.products-container {
- &__item {
- width: calc(33% - 10px);
+ max-width: 902px;
+ }
+ }
+
+ @media screen and (max-width: 937px) {
+ .products-container {
+ max-width: 596px;
+
+ &__filters-container {
+ flex-direction: column-reverse;
+ gap: 8px;
}
}
}
- @media screen and (max-width: 517px) {
+ @media screen and (max-width: 631px) {
.products-container {
- &__item {
- width: calc(50% - 8px);
- }
+ max-width: 306px;
}
}
- @media screen and (max-width: 351px) {
+ @media screen and (max-width: 450px) {
.products-container {
+ max-width: none;
+
&__item {
- width: 100%;
+ width: 100%;
}
}
}
diff --git a/angular/src/app/pages/products/products.component.ts b/angular/src/app/pages/products/products.component.ts
index ff932c6..d6ee2c7 100644
--- a/angular/src/app/pages/products/products.component.ts
+++ b/angular/src/app/pages/products/products.component.ts
@@ -8,6 +8,7 @@ import { MessageService } from 'primeng/api';
import { lastValueFrom } from 'rxjs';
import { CartService } from 'src/app/services/cart.service';
import { CookiesService } from 'src/app/services/cookies.service';
+import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-products',
@@ -32,6 +33,8 @@ export class ProductsComponent implements OnInit {
private messageService: MessageService,
public cartService: CartService,
private cookiesService: CookiesService,
+ private router: Router,
+ private route: ActivatedRoute,
) { }
async ngOnInit() {
@@ -39,7 +42,7 @@ export class ProductsComponent implements OnInit {
await this.getTerminalList()
this.getData()
this.messageService.add({
- severity:'info',
+ severity: 'info',
summary: 'В одном заказе могут быть товары только из выбранного пункта выдачи',
life: 5000
});
@@ -66,7 +69,7 @@ export class ProductsComponent implements OnInit {
onConfirm() {
this.messageService.add({
- severity:'info',
+ severity: 'info',
summary: 'В одном заказе могут быть товары только из выбранного пункта выдачи',
life: 5000
});
@@ -76,7 +79,7 @@ export class ProductsComponent implements OnInit {
onReject() {
this.messageService.clear('c');
this.messageService.add({
- severity:'info',
+ severity: 'info',
summary: 'Выберите пункт выдачи. В одном заказе могут быть товары только из выбранного пункта.',
life: 6000
});
@@ -96,17 +99,26 @@ export class ProductsComponent implements OnInit {
this.selectedGroup = this.groups[0]
this.modifiersGroups = value.modifiers_groups
this.modifiers = value.modifiers
+
+ this.route.queryParams.subscribe((params) => {
+ if (params['group']) {
+ this.selectedGroup = this.groups.find((group) => group.label === params['group']) || this.groups[0]
+ }
+ })
}
})
}
onPageChange(event: any) {
- this.currentPage = event.first;
+ this.currentPage = event.first;
}
- filterByGroup() {
+ filterByGroup(group?: Group) {
if (!this.selectedGroup) return []
- if (this.selectedGroup.label === 'Все') return this.products
+ if (this.selectedGroup.label === 'Все') {
+ if (group) return JSON.parse(JSON.stringify(this.products.filter((product) => product.groupId === group.id))).slice(0, 4)
+ return this.products
+ }
return JSON.parse(JSON.stringify(this.products.filter((product) => product.groupId === this.selectedGroup.id)))
}
@@ -151,21 +163,29 @@ export class ProductsComponent implements OnInit {
this.getData()
this.cartService.changeTerminal(this.selectedTerminal);
this.loading = false;
+ this.router.navigate([]);
this.currentPage = 0
}, 0);
}
- changeGroup() {
+ changeGroup(group: Group) {
+ this.selectedGroup = group
+ this.router.navigate([], {
+ queryParams: {
+ group: group.label,
+ },
+ queryParamsHandling: 'merge',
+ });
this.currentPage = 0
}
- onGroupUnselect(event: any) {
+ onGroupUnselect(event: any) {
setTimeout(() => {
- this.selectedGroup = event.node
+ this.selectedGroup = event.node
}, 0);
}
- onTerminalUnselect(event: any) {
+ onTerminalUnselect(event: any) {
setTimeout(() => {
this.selectedTerminal = event.node
this.cartService.changeTerminal(this.selectedTerminal)
diff --git a/angular/src/assets/logo-black.png b/angular/src/assets/logo-black.png
new file mode 100644
index 0000000..6737656
Binary files /dev/null and b/angular/src/assets/logo-black.png differ
diff --git a/angular/src/styles.scss b/angular/src/styles.scss
index 6522f66..d547889 100644
--- a/angular/src/styles.scss
+++ b/angular/src/styles.scss
@@ -20,6 +20,8 @@ table{border-collapse:collapse;border-spacing:0}
font-family: 'Raleway', sans-serif;
}
+$base_color: red;
+
.p-inputtext {
width: 100%;
border: 1px solid #B8DEFF;
@@ -98,6 +100,18 @@ input::-webkit-date-and-time-value {
.p-treeselect {
min-width: 180px;
+ border-radius: 1.125rem;
+ padding: 0 10px;
+ box-shadow: 0 0 6px 2px rgb(221 221 221);
+}
+
+.p-treeselect-panel {
+ border-radius: 1.125rem;
+ top: 44px !important;
+}
+
+.p-tree {
+ border-radius: 1.125rem;
}
.p-tree .p-tree-container .p-treenode {
@@ -109,6 +123,16 @@ input::-webkit-date-and-time-value {
padding: 0;
}
+.p-dialog .p-dialog-header {
+ border-top-right-radius: 1.125rem;
+ border-top-left-radius: 1.125rem;
+}
+
+.p-dialog .p-dialog-content:last-of-type {
+ border-bottom-right-radius: 1.125rem;
+ border-bottom-left-radius: 1.125rem;
+}
+
.text-center {
text-align: center;
}
+ 
+