поправил дизайн
This commit is contained in:
gofnnp 2022-12-19 07:51:11 +04:00
parent 4c614ff492
commit ea63515f74
12 changed files with 363 additions and 60 deletions

View File

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

View File

@ -1,18 +1,39 @@
.container-navbar {
box-sizing: border-box;
padding: 7px 0 0 5px;
padding: 0 32px;
width: 100%;
height: 39px;
background: #09467F;
height: 54px;
// 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 {
font-weight: 400;
font-size: 18px;
margin-left: 12px;
}
@media screen and (max-width: 549px) {
.container-navbar {
.menu {
display: none;
}
}
}

View File

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

View File

@ -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;
background-color: #0d457e;
border-radius: 1.125rem;
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);
}

View File

@ -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]="{

View File

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

View File

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

View File

@ -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>
<label>Пункт выдачи</label>
(onNodeSelect)="changeGroup()" (onNodeUnselect)="onGroupUnselect($event)" placeholder="Группа"></p-treeSelect> -->
<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>
<div class="products-container__items">
<div *ngFor="let product of cropList(filterByGroup(), 8)" (click)="addToCart($event, product)" class="products-container__item">
<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>
<span>{{product.price}}₽</span>
</div>
<button class="products-container__add-to-cart">В корзину</button>
[showPageLinks]="true"></p-paginator> -->
<div *ngIf="selectedGroup && selectedGroup.label !== 'Все'" class="products-container__category-name-container">
<h1>{{selectedGroup.label}}</h1>
<div class="bread-crumbs">
<span class="all" (click)="changeGroup(groups[0])">Все </span>
>
<span class="selected-category"> {{selectedGroup.label}}</span>
</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">

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

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