dev #13306

поправил дизайн

angular/src/app/components/navbar/navbar.component.html

@@ -1,3 +1,4 @@
 <div class="container-navbar">
-    <img src="./assets/logo.png" alt="Логотип">
+    <img src="./assets/logo-black.png" alt="Логотип">
+    <span class="menu" (click)="showMenu()">Меню</span>
 </div>

angular/src/app/components/navbar/navbar.component.scss

@@ -1,14 +1,27 @@
 .container-navbar {
     box-sizing: border-box;
-    padding: 7px 0 0 5px;
+    padding: 0 32px;
     width: 100%;
-    height: 39px;
+    height: 54px;
-    background: #09467F;
+    // background: #09467f;
     color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     img {
         height: 26px;
         margin-left: 4px;
     }
+
+    .menu {
+        color: #252525;
+        font-weight: 600;
+        font-size: 14px;
+        letter-spacing: 2px;
+        border-bottom: 2px solid #E16F38;
+        cursor: pointer;
+    }
 }
 
 .title {
@@ -16,3 +29,11 @@
     font-size: 18px;
     margin-left: 12px;
 }
+
+@media screen and (max-width: 549px) {
+    .container-navbar {
+        .menu {
+            display: none;
+        }
+    }
+}

angular/src/app/components/navbar/navbar.component.ts

@@ -12,4 +12,13 @@ export class NavbarComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  showMenu() {
+    const menu = document.getElementsByClassName('main-menu-container')
+    if (menu[0].getAttribute('isShow') === 'true') {
+      menu[0].setAttribute('isShow', 'false')
+    } else {
+      menu[0].setAttribute('isShow', 'true')
+    }
+  }
+
 }

angular/src/app/components/product-modal/product-modal.component.scss

@@ -5,6 +5,8 @@
 
         &>img {
             width: 100%;
+            border-radius: 1.125rem;
+            margin-top: 16px;
         }
 
         &__footer {
@@ -26,10 +28,10 @@
         }
 
         &__add-to-cart {
-            padding: 8px;
+            padding: 8px 26px;
+            background: #C43F00;
             border: none;
-            border-radius: 4px;
+            border-radius: 1.125rem;
-            background-color: #0d457e;
             color: #fff;
         }
 
@@ -37,6 +39,8 @@
             border: 1px solid rgba(128, 128, 128, 0.23);
             margin: 0.5em 0;
             padding-bottom: 6px;
+            border-radius: 1.125rem;
+
             a {
                 width: 100%;
                 display: block;
@@ -44,16 +48,19 @@
                 border-radius: 0.15em;
                 transition: background .3s ease;
             }
+
             .options-container {
                 transition: opacity .5s ease;
                 padding-left: 16px;
                 display: none;
                 opacity: 0;
+
                 &.isShow {
                     display: block;
                     opacity: 1;
                 }
             }
+
             &.no-valid {
                 border-color: #cc0000;
             }
@@ -61,23 +68,29 @@
 
         &__modifier-icon {
             float: right;
-            &::before, &::after {
+
+            &::before,
+            &::after {
                 display: inline-block;
                 font-size: 14px;
                 transition: transform .5s ease;
             }
+
             &::before {
                 content: "\\";
                 transform: rotate(346deg);
             }
+
             &::after {
                 content: "/";
                 transform: rotate(14deg);
             }
+
             &.isShow {
                 &::before {
                     transform: rotate(76deg);
                 }
+
                 &::after {
                     transform: rotate(104deg);
                 }

angular/src/app/pages/account/account.component.html

@@ -2,7 +2,7 @@
   woocommerce: true,
   'auth-page': showAuthoriztion
 }">
-  <nav class="main-menu-container">
+  <nav class="main-menu-container" isShow="false" #menu>
     <ul>
       <ng-container *ngFor="let page of mainPageList; let index = index; let last = last; let first = first;">
         <li *ngIf="page.onSideBar" class="main-menu-container__item" [ngClass]="{

angular/src/app/pages/account/account.component.scss

@@ -167,9 +167,15 @@
         width: 500px;
         left: 50%;
         transform: translate(-50%, 0);
-        bottom: 20px;
         border: solid 1px #dfdfdf;
         border-radius: 12px;
+        box-shadow: 0 0 6px 2px rgb(223 223 223);
+        transition: top .4s cubic-bezier(0.57, -0.43, 0.41, 1.3);
+        top: -60px;
+
+        &[isShow=true] {
+          top: 8px;
+        }
       }
 
       .version {

angular/src/app/pages/account/account.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { CookiesService } from '../../services/cookies.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MainPageCode, Page, PageCode } from '../../interface/data';
@@ -20,6 +20,7 @@ import { CartService } from 'src/app/services/cart.service';
 })
 export class AccountComponent implements OnInit {
   @Output() setUserDataOrderPage = new EventEmitter<null>();
+  @ViewChild('menu', { static: true}) menu!: ElementRef;
   public refSystemId: string = '';
 
   constructor(
@@ -160,6 +161,7 @@ export class AccountComponent implements OnInit {
     if (this.currentPageMain === this.mainPageList[2]) {
       this.checkAuthorization(false)
     }
+    this.menu.nativeElement.setAttribute('isShow', 'false')
   }
 
   changePage(page: Page, event?: MouseEvent): void {

angular/src/app/pages/products/products.component.html

@@ -1,31 +1,87 @@
 <p-toast position="top-center"></p-toast>
 <div *ngIf="!loading; else loadingEl" class="products-container">
     <div class="products-container__filters-container">
-        <label>Категория</label>
+        <!-- <label>Категория</label>
         <p-treeSelect *ngIf="groups" [(ngModel)]="selectedGroup" [options]="groups"
-            (onNodeSelect)="changeGroup()" (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect>
+            (onNodeSelect)="changeGroup()" (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect> -->
-        <label>Пункт выдачи</label>
+        <div class="products-container__categories-container">
+            <div *ngFor="let group of groups; let first = first" (click)="changeGroup(group)" [ngClass]="{
+                    'group-container': true,
+                    'active': group.id === selectedGroup.id,
+                    'non-visible': first
+                }">
+                <span>
+                    {{group.label}}
+                </span>
+            </div>
+        </div>
         <p-treeSelect *ngIf="terminalList" [(ngModel)]="selectedTerminal" [options]="terminalList"
             (onNodeSelect)="changeTerminal()" (onNodeUnselect)="onTerminalUnselect($event)"
             placeholder="Пункт самовывоза" [disabled]="!!cartService.cartCount"></p-treeSelect>
+        <!-- <label>Пункт выдачи</label> -->
     </div>
-    <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="8"
+    <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
         [totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
-        [showPageLinks]="true"></p-paginator>
+        [showPageLinks]="true"></p-paginator> -->
-    <div class="products-container__items">
+    <div *ngIf="selectedGroup && selectedGroup.label !== 'Все'" class="products-container__category-name-container">
-        <div *ngFor="let product of cropList(filterByGroup(), 8)" (click)="addToCart($event, product)" class="products-container__item">
+        <h1>{{selectedGroup.label}}</h1>
-            <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+        <div class="bread-crumbs">
-            <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+            <span class="all" (click)="changeGroup(groups[0])">Все </span>
-            <div class="products-container__name-container">
+            >
-                <p>{{product.name}}</p>
+            <span class="selected-category"> {{selectedGroup.label}}</span>
-                <span>{{product.price}}₽</span>
-            </div>
-            <button class="products-container__add-to-cart">В корзину</button>
         </div>
     </div>
-    <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="8"
+    <ng-container *ngIf="selectedGroup && selectedGroup.label === 'Все'">
+        <div *ngFor="let group of groups.slice(1)" [ngClass]="{
+                'products-container__category-container': true
+            }">
+            <div class="header">
+                <h2>{{group.label}}</h2>
+                <button (click)="changeGroup(group)">
+                    Перейти в категорию
+                </button>
+            </div>
+            <div class="products-container__items">
+                <div *ngFor="let product of filterByGroup(group)" (click)="addToCart($event, product)"
+                    class="products-container__item" #currentCategoryList>
+                    <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+                    <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+                    <div class="products-container__name-container">
+                        <p>{{product.name}}</p>
+                    </div>
+                    <p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur
+                        adipisicing elit.
+                        Odio consequuntur voluptates est.</p>
+                    <div class="products-container__item-footer">
+                        <span>{{product.price}}₽</span>
+                        <button class="products-container__add-to-cart">В корзину</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="selectedGroup && selectedGroup.label !== 'Все'">
+        <div class="products-container__items">
+            <div *ngFor="let product of filterByGroup()" (click)="addToCart($event, product)"
+                class="products-container__item" #currentCategoryList>
+                <img *ngIf="!product.image" src="./assets/no-image.png" alt="{{product.name}}">
+                <img *ngIf="product.image" src="{{product.image}}" alt="{{product.name}}">
+                <div class="products-container__name-container">
+                    <p>{{product.name}}</p>
+                </div>
+                <p class="products-container__product-composition">Lorem ipsum dolor sit amet consectetur adipisicing
+                    elit.
+                    Odio consequuntur voluptates est.</p>
+                <div class="products-container__item-footer">
+                    <span>{{product.price}}₽</span>
+                    <button class="products-container__add-to-cart">В корзину</button>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <!-- <p-paginator [style]="{'background': 'transparent', padding: '8px 0'}" [alwaysShow]="false" [first]="currentPage" [rows]="10"
         [totalRecords]="filterByGroup().length" (onPageChange)="onPageChange($event)" [pageLinkSize]="3"
-        [showPageLinks]="true"></p-paginator>
+        [showPageLinks]="true"></p-paginator> -->
     <p-toast position="bottom-center" key="c" (onClose)="onReject()" [baseZIndex]="5000">
         <ng-template let-message pTemplate="message">
             <div class="flex flex-column" style="flex: 1">

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 {
+            &:hover {
-                font-size: 14px;
+                scale: 1.01;
-                font-weight: 600;
+                border: none;
-                width: 100%;
+
+                img {
+                    box-shadow: 0 0 10px 5px rgb(221 221 221);
+                    border: none;
+                }
             }
         }
 
@@ -59,38 +166,82 @@
             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%;
+            padding: 8px 26px;
-            height: 30px;
+            background: #C43F00;
-            background: #09467f;
             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 {
+            max-width: 902px;
-                width: calc(33% - 10px);
+        }
+    }
+
+    @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 {
+            max-width: 306px;
-                width: calc(50% - 8px);
-            }
         }
     }
 
-    @media screen and (max-width: 351px) {
+    @media screen and (max-width: 450px) {
         .products-container {
+            max-width: none;
+
             &__item {
                 width: 100%;
             }

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,6 +99,12 @@ 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]
+          }
+        })
       }
     })
   }
@@ -104,9 +113,12 @@ export class ProductsComponent implements OnInit {
     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,11 +163,19 @@ 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
   }
 

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