From 7fe1d8c22e7a44e13b3bd5ab4c2e0ca834a618f7 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Tue, 27 Dec 2022 16:35:50 +0400 Subject: [PATCH] =?UTF-8?q?dev=20#13306=20=D0=9F=D0=B5=D1=80=D0=B5=D0=B4?= =?UTF-8?q?=D0=B5=D0=BB=D0=B0=D0=BB=20=D1=80=D0=BE=D1=83=D1=82=D0=B8=D0=BD?= =?UTF-8?q?=D0=B3=20=D1=81=20=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD?= =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=BD=D0=B0=20=D0=B0=D0=BD=D0=B3=D1=83?= =?UTF-8?q?=D0=BB=D1=8F=D1=80=D0=BE=D0=B2=D1=81=D0=BA=D0=B8=D0=B9,=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=8E,=20=D0=B4=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?= =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20404?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular/src/app/app.component.html | 5 +- angular/src/app/app.component.scss | 5 + angular/src/app/app.component.ts | 17 +- angular/src/app/app.module.ts | 28 +- .../app/components/menu/menu.component.html | 54 +++ .../app/components/menu/menu.component.scss | 120 +++++ .../components/menu/menu.component.spec.ts | 23 + .../src/app/components/menu/menu.component.ts | 48 ++ .../components/navbar/navbar.component.html | 4 +- .../components/navbar/navbar.component.scss | 3 +- .../user-data-order.component.scss | 293 ++++++------ .../user-data-order.component.ts | 2 +- .../app/pages/account/account.component.html | 169 ++++--- .../src/app/pages/cart/cart.component.html | 289 ++++++++---- .../src/app/pages/cart/cart.component.scss | 435 +++++++++--------- angular/src/app/pages/cart/cart.component.ts | 27 +- .../pages/not-found/not-found.component.html | 4 +- .../pages/not-found/not-found.component.scss | 31 +- .../pages/not-found/not-found.component.ts | 21 +- .../pages/products/products.component.scss | 19 +- angular/src/styles.scss | 5 + 21 files changed, 1007 insertions(+), 595 deletions(-) create mode 100644 angular/src/app/components/menu/menu.component.html create mode 100644 angular/src/app/components/menu/menu.component.scss create mode 100644 angular/src/app/components/menu/menu.component.spec.ts create mode 100644 angular/src/app/components/menu/menu.component.ts diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html index 0680b43..6ce22ed 100644 --- a/angular/src/app/app.component.html +++ b/angular/src/app/app.component.html @@ -1 +1,4 @@ - + +
+ +
diff --git a/angular/src/app/app.component.scss b/angular/src/app/app.component.scss index e69de29..a7f13ad 100644 --- a/angular/src/app/app.component.scss +++ b/angular/src/app/app.component.scss @@ -0,0 +1,5 @@ +:host { + .layout { + padding: 0 16px 16px; + } +} \ No newline at end of file diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts index 127ed3c..6265732 100644 --- a/angular/src/app/app.component.ts +++ b/angular/src/app/app.component.ts @@ -1,10 +1,23 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { PrimeNGConfig } from 'primeng/api'; +import * as ConfigActions from './state/config/config.actions' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { title = 'Demo stand'; + + constructor(private primengConfig: PrimeNGConfig, + private store: Store) {} + + ngOnInit() { + this.primengConfig.ripple = true; + this.store.dispatch(ConfigActions.getConfig()); + } + + } diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts index 90df20a..a6b3eea 100644 --- a/angular/src/app/app.module.ts +++ b/angular/src/app/app.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -53,6 +53,17 @@ import { ConfigEffects } from './state/config/config.effects'; import {PaginatorModule} from 'primeng/paginator'; import {InputTextModule} from 'primeng/inputtext'; import { ChangeQuantityComponent } from './components/change-quantity/change-quantity.component'; +import { MenuComponent } from './components/menu/menu.component'; +import { SidebarModule } from 'primeng/sidebar'; +import {RippleModule} from 'primeng/ripple'; + +const routes: Routes = [ + { path: '', redirectTo: 'products', pathMatch: 'full' }, + { path: 'products', component: ProductsComponent }, + // { path: 'cart', component: CartComponent }, + { path: 'account', component: AccountComponent }, + { path: '**', component: NotFoundComponent } +]; @NgModule({ declarations: [ @@ -76,18 +87,13 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua CheckboxGroupComponent, UserDataOrderComponent, InfoComponent, - ChangeQuantityComponent + ChangeQuantityComponent, + MenuComponent ], imports: [ BrowserModule, AppRoutingModule, - RouterModule.forRoot([ - { - path: '**', - component: MainComponent - }, - // { path: '**', component: NotFoundComponent } - ]), + RouterModule.forRoot(routes), InputMaskModule, ProgressSpinnerModule, FormsModule, @@ -119,7 +125,9 @@ import { ChangeQuantityComponent } from './components/change-quantity/change-qua StoreModule.forRoot({config: configReducer}), EffectsModule.forRoot([ConfigEffects]), PaginatorModule, - InputTextModule + InputTextModule, + SidebarModule, + RippleModule ], providers: [DialogService, MessageService, MessagingService ], bootstrap: [AppComponent] diff --git a/angular/src/app/components/menu/menu.component.html b/angular/src/app/components/menu/menu.component.html new file mode 100644 index 0000000..f53eacf --- /dev/null +++ b/angular/src/app/components/menu/menu.component.html @@ -0,0 +1,54 @@ + diff --git a/angular/src/app/components/menu/menu.component.scss b/angular/src/app/components/menu/menu.component.scss new file mode 100644 index 0000000..3ae4fc9 --- /dev/null +++ b/angular/src/app/components/menu/menu.component.scss @@ -0,0 +1,120 @@ +:host { + .main-menu-container { + // position: fixed; + // width: 100%; + // bottom: 0; + // left: 0; + // margin: 0; + // z-index: 777; + // height: 57px; + // border-top: solid 1px #dfdfdf; + // background-color: #fff; + + ul { + display: flex; + height: 100%; + font-size: 14px; + flex-wrap: nowrap; + flex-direction: row; + gap: 32px; + + li { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 4px; + font-size: 14px; + font-weight: 600; + letter-spacing: 2px; + color: #b5b5b9; + transition: color 0.3s ease; + cursor: pointer; + + &.active { + color: #252525; + + a { + border-bottom: 2px solid #e16f38; + } + } + + &:hover { + color: #252525; + + a { + border-bottom: 2px solid #e16f38; + + } + } + a { + border-bottom: 2px solid #e16f3800; + } + + & .mat-icon { + display: none; + + &.is-active { + color: #000; + } + } + + &.is-active { + color: #000; + } + + &.cart { + position: relative; + + &::before { + content: attr(data-counter); + color: #fff; + position: absolute; + right: -18px; + top: -8px; + background: #d7120b; + border-radius: 50px; + min-width: 1.2rem; + line-height: 1.2rem; + font-size: 0.8rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + } + } + } + } + + @media screen and (max-width: 600px) { + .main-menu-container { + position: fixed; + width: 100%; + bottom: 0; + left: 0; + margin: 0; + z-index: 777; + height: 57px; + border-top: solid 1px #dfdfdf; + background-color: #fff; + + ul { + li { + &.cart { + &::before { + right: 34px; + top: 5px; + } + } + + & .mat-icon { + display: block; + } + } + } + } + } +} diff --git a/angular/src/app/components/menu/menu.component.spec.ts b/angular/src/app/components/menu/menu.component.spec.ts new file mode 100644 index 0000000..fc9c05d --- /dev/null +++ b/angular/src/app/components/menu/menu.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuComponent } from './menu.component'; + +describe('MenuComponent', () => { + let component: MenuComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MenuComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angular/src/app/components/menu/menu.component.ts b/angular/src/app/components/menu/menu.component.ts new file mode 100644 index 0000000..c8a7df2 --- /dev/null +++ b/angular/src/app/components/menu/menu.component.ts @@ -0,0 +1,48 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { PageListMain } from 'src/app/app.constants'; +import { Page } from 'src/app/interface/data'; +import { CartService } from 'src/app/services/cart.service'; + +@Component({ + selector: 'app-menu', + templateUrl: './menu.component.html', + styleUrls: ['./menu.component.scss'], +}) +export class MenuComponent implements OnInit { + @Output() toggleMenu = new EventEmitter(); + readonly mainPageList = PageListMain; + public cartCount = 0; + + constructor( + private router: Router, + private route: ActivatedRoute, + private cartService: CartService + ) {} + + ngOnInit(): void { + this.cartCount = this.cartService.cartCount; + this.cartService.cartCount$.subscribe({ + next: (count) => { + this.cartCount = count; + document + .querySelectorAll('.cart')[0] + .setAttribute('data-counter', this.cartCount.toString()); + }, + }); + } + + changeMainPage(page: Page, event?: MouseEvent): void { + if (event) { + event.preventDefault(); + } + if (page.resName === 'cart') { + this.toggleMenu.emit() + return + } + this.router.navigate([page.resName], { + // relativeTo: this.route, + // queryParamsHandling: 'merge', + }); + } +} diff --git a/angular/src/app/components/navbar/navbar.component.html b/angular/src/app/components/navbar/navbar.component.html index 61857c5..4f42c89 100644 --- a/angular/src/app/components/navbar/navbar.component.html +++ b/angular/src/app/components/navbar/navbar.component.html @@ -1,4 +1,6 @@
Логотип - Меню + + +
diff --git a/angular/src/app/components/navbar/navbar.component.scss b/angular/src/app/components/navbar/navbar.component.scss index ab13549..2ca90e0 100644 --- a/angular/src/app/components/navbar/navbar.component.scss +++ b/angular/src/app/components/navbar/navbar.component.scss @@ -1,6 +1,6 @@ .container-navbar { box-sizing: border-box; - padding: 0 32px; + padding: 0 54px; width: 100%; height: 54px; // background: #09467f; @@ -11,7 +11,6 @@ img { height: 26px; - margin-left: 4px; } .menu { diff --git a/angular/src/app/components/user-data-order/user-data-order.component.scss b/angular/src/app/components/user-data-order/user-data-order.component.scss index c97f8b4..d1eddc4 100644 --- a/angular/src/app/components/user-data-order/user-data-order.component.scss +++ b/angular/src/app/components/user-data-order/user-data-order.component.scss @@ -1,160 +1,159 @@ :host { - .woocommerce-shipping-fields__field-wrapper { - margin: 8px auto 0 auto; - max-width: 400px; + .woocommerce-shipping-fields__field-wrapper { + margin: 8px auto 0 auto; + max-width: 400px; + } + + .order_form__title { + font-weight: 700; + font-size: 18px; + margin-bottom: 12px; + } + + input { + width: 100%; + color: #000000; + border: 1px solid #000000; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol; + font-size: 1rem; + color: #495057; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #ced4da; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + -webkit-appearance: none; + appearance: none; + border-radius: 4px; + &.ng-dirty.ng-invalid { + border-color: red; } - - - .order_form__title { - font-weight: 700; - font-size: 18px; - margin-bottom: 12px; + &.ng-invalid.ng-touched { + border-color: red; } + } - input { + p { + margin-top: 0; + margin-bottom: 1rem; + } + + textarea { + width: 100%; + height: 52px; + color: #000000; + border: 1px solid #000000; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol; + font-size: 1rem; + color: #495057; + background: #ffffff; + padding: 0.5rem 0.75rem; + border: 1px solid #ced4da; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + -webkit-appearance: none; + appearance: none; + border-radius: 4px; + } + + .terminal-list-container { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin: 8px 0 16px; + + .terminal-container { + width: calc(50% - 8px); + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + border: solid #09467f 1px; + border-radius: 16px; + overflow: hidden; + padding-bottom: 16px; + opacity: 0.5; + text-align: center; + + &.selected { + opacity: 1; + } + + img { width: 100%; - color: #000000; - border: 1px solid #000000; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol; - font-size: 1rem; - color: #495057; - background: #ffffff; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - transition: background-color .15s, border-color .15s, box-shadow .15s; - -webkit-appearance: none; - appearance: none; - border-radius: 4px; - &.ng-dirty.ng-invalid { - border-color: red; - } - &.ng-invalid.ng-touched { - border-color: red; - } - } + height: 120px; + object-fit: cover; + } - p { - margin-top: 0; - margin-bottom: 1rem; - } + &__name { + } - textarea { - width: 100%; - height: 52px; - color: #000000; - border: 1px solid #000000; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol; - font-size: 1rem; - color: #495057; - background: #ffffff; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - transition: background-color .15s, border-color .15s, box-shadow .15s; - -webkit-appearance: none; - appearance: none; - border-radius: 4px; - } - - .terminal-list-container { - display: flex; - flex-wrap: wrap; - gap: 16px; - margin: 8px 0 16px; - - .terminal-container { - width: calc(50% - 8px); - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - border: solid #09467f 1px; - border-radius: 16px; - overflow: hidden; - padding-bottom: 16px; - opacity: .5; - text-align: center; - - &.selected { - opacity: 1; - } - - img { - width: 100%; - height: 120px; - object-fit: cover; - } - - &__name {} - - &__address { - font-size: 14px; - } - } - } - - .terminal-list-label { - margin-left: 8px; + &__address { font-size: 14px; + } + } + } + + .terminal-list-label { + margin-left: 8px; + font-size: 14px; + } + + .form-row-wide { + display: flex; + flex-direction: column; + } + + #deliveryDate { + margin-left: 8px; + margin-bottom: 4px; + display: block; + font-size: 14px; + } + + .bootom-info { + position: fixed; + width: 100%; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + bottom: 0; + padding: 18px; + background: #fff; + z-index: 3; + border-top: solid 1px #e7e7e7; + + .subtotal { + font-weight: 600; + font-size: 20px; + display: flex; + flex-direction: column; + + .products-count { + font-size: 12px; + font-weight: 400; + } } - .form-row-wide { - display: flex; - flex-direction: column; + .elementor-button--checkout { + background-color: #09467f; + color: #fff; + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + border: none; + padding: 12px; + font-size: 12px; + cursor: pointer; } - - #deliveryDate { - margin-left: 8px; - margin-bottom: 4px; - display: block; - font-size: 14px; - } - + } + @media screen and (min-width: 650px) { .bootom-info { - position: fixed; - bottom: 58px; - width: 100%; - display: flex; - padding: 12px 18px; - justify-content: space-between; - left: 0; - align-items: center; - background: #fff; - z-index: 9999; - - .subtotal { - font-weight: 600; - font-size: 20px; - display: flex; - flex-direction: column; - - .products-count { - font-size: 12px; - font-weight: 400; - } - } - - .elementor-button--checkout { - background-color: #09467f; - color: #fff; - border-radius: 6px; - display: flex; - justify-content: center; - align-items: center; - border: none; - padding: 12px; - font-size: 12px; - cursor: pointer; - } - + width: 450px; + right: 0; + left: auto; } - @media screen and (min-width: 550px) { - .bootom-info { - bottom: 84px; - width: 500px; - left: 50%; - transform: translate(-50%, 0); - border: solid 1px #dfdfdf; - border-radius: 12px; - } - } -} \ No newline at end of file + } +} diff --git a/angular/src/app/components/user-data-order/user-data-order.component.ts b/angular/src/app/components/user-data-order/user-data-order.component.ts index b1cdd93..6789719 100644 --- a/angular/src/app/components/user-data-order/user-data-order.component.ts +++ b/angular/src/app/components/user-data-order/user-data-order.component.ts @@ -84,7 +84,7 @@ export class UserDataOrderComponent implements OnInit { this.checkoutConfig = value } }) - this.deliverData.deliveryDate = moment().add(this.checkoutConfig.timeDelivery.changeTime.defaultValue, 'minutes').toDate() + this.deliverData.deliveryDate = moment().add(this.checkoutConfig?.timeDelivery?.changeTime?.defaultValue || 0, 'minutes').toDate() this.paymentMethods = this.checkoutConfig.payments.values this.deliverData.paymentMethod = this.paymentMethods[this.checkoutConfig.payments.default] diff --git a/angular/src/app/pages/account/account.component.html b/angular/src/app/pages/account/account.component.html index 1f0ce90..0bbf351 100644 --- a/angular/src/app/pages/account/account.component.html +++ b/angular/src/app/pages/account/account.component.html @@ -1,112 +1,97 @@ -
- -
- - + -
- - - - - - - - - - - - - - +
+ + +
  • +
    + Иконка меню +
    + Выход +
    +
    +
    • + + - - v{{ version }} - - - +
    -

    {{message.summary}}

    -

    {{message.detail}}

    +

    {{ message.summary }}

    +

    {{ message.detail }}

    - +
    - +
    - \ No newline at end of file + diff --git a/angular/src/app/pages/cart/cart.component.html b/angular/src/app/pages/cart/cart.component.html index 9b76e8d..49a16e7 100644 --- a/angular/src/app/pages/cart/cart.component.html +++ b/angular/src/app/pages/cart/cart.component.html @@ -1,104 +1,215 @@ -
    -
    -
    -
    -
    + +
    +
    +
    +
    +
    +
    + {{ product.name }} + {{ product.name }} +
    +
    + {{ product.name }} +
    + +
    + {{ option.name }}: +
    +
    +

    + {{ option.quantity }} × {{ product.currency_symbol + }}{{ (option.price ?? 0) * option.quantity }} +

    +
    +     +
    +
    -
    - {{product.name}} - {{product.name}} -
    -
    - {{product.name}} -
    - -
    {{option.name}}:
    -
    -

    {{option.quantity}} × {{product.currency_symbol}}{{(option.price ?? 0) * option.quantity}}

    -
    -     -
    -
    - -
    - - {{product.amount}} × - - - {{product.currency_symbol}} - {{product.finalPrice}} - +
    + + {{ product.amount }} × + + + {{ + product.currency_symbol + }} + {{ product.finalPrice }} + + - -
    -
    - - -
    -
    - + +
    +
    + - +
    +
    + + +
    -
    -
    - +
    + +
    +
    -
    +
    - -
    -
    -
    - Товаров: {{order.products.length}} - {{order.products[0].currency_symbol}}{{order.price}} -
    -
    - - Оформление заказа - +
    +
    + Товаров: {{ order.products.length }} + {{ + order.products[0].currency_symbol + }}{{ order.price }} +
    +
    + + Оформление заказа + +
    -
    - - -
    -
    - -

    {{message.summary}}

    -

    {{message.detail}}

    -
    -
    -
    - + + +
    +
    + +

    {{ message.summary }}

    +

    {{ message.detail }}

    -
    - +
    +
    + +
    +
    + +
    -
    -     -     -
    - - - -
    - -
    -
    -
    Корзина пустая.
    -
    \ No newline at end of file + + +
    + +
    + +
    +
    + Корзина пустая. +
    +
    + diff --git a/angular/src/app/pages/cart/cart.component.scss b/angular/src/app/pages/cart/cart.component.scss index 0a888fc..7fa17da 100644 --- a/angular/src/app/pages/cart/cart.component.scss +++ b/angular/src/app/pages/cart/cart.component.scss @@ -1,234 +1,235 @@ :host { - .cart { - margin-top: 16px; - margin-bottom: 100px; - max-width: 400px; - margin-left: auto; - margin-right: auto; + .cart { + margin-top: 16px; + margin-bottom: 100px; + max-width: 400px; + margin-left: auto; + margin-right: auto; + } + + .elementor-menu-cart { + &__product { + grid-template-columns: 71px auto; + grid-template-rows: var( + --price-quantity-position--grid-template-rows, + auto auto + ); + position: relative; + display: grid; + padding-bottom: 0; + padding-right: 30px; + + .variation { + display: grid; + grid-template-columns: max-content auto; + margin: 10px 8px; + color: var(--product-variations-color, #373a3c); + + dt { + grid-column-start: 1; + font-weight: 700; + } + + dd { + grid-column-start: 2; + -webkit-margin-start: 5px; + margin-inline-start: 5px; + margin-bottom: 0.5rem; + margin-left: 6px; + } + } } - .elementor-menu-cart { - &__product { - grid-template-columns: 71px auto; - grid-template-rows: var(--price-quantity-position--grid-template-rows, auto auto); - position: relative; - display: grid; - padding-bottom: 0; - padding-right: 30px; + &__product-image { + grid-row-start: 1; + grid-row-end: 3; + width: 100%; - .variation { - display: grid; - grid-template-columns: max-content auto; - margin: 10px 8px; - color: var(--product-variations-color, #373a3c); - - dt { - grid-column-start: 1; - font-weight: 700; - } - - dd { - grid-column-start: 2; - -webkit-margin-start: 5px; - margin-inline-start: 5px; - margin-bottom: 0.5rem; - margin-left: 6px; - } - } - } - - &__product-image { - grid-row-start: 1; - grid-row-end: 3; - width: 100%; - - img { - border-radius: 6px; - object-fit: cover; - } - } - - &__product-name { - grid-column-start: 2; - grid-column-end: 3; - margin: 0; - font-size: 14px; - padding-left: 20px; - } - - &__product-price { - font-size: 14px; - padding-left: 20px; - grid-column-start: 2; - grid-column-end: 3; - -ms-flex-item-align: var(--price-quantity-position--align-self, end); - align-self: var(--price-quantity-position--align-self, end); - font-weight: 400; - } - - &__product-remove { - color: #818a91; - width: var(--remove-item-button-size, 22px); - height: var(--remove-item-button-size, 22px); - border-radius: var(--remove-item-button-size, 22px); - border: 1px solid var(--remove-item-button-color, #d4d4d4); - text-align: center; - overflow: hidden; - position: absolute; - top: 0px; - right: 0; - bottom: 20px; - -webkit-transition: .3s; - -o-transition: .3s; - transition: .3s; - - &::before, - &::after { - content: ""; - position: absolute; - height: 1px; - width: 50%; - top: 50%; - left: 25%; - margin-top: -1px; - background: var(--remove-item-button-color, #d4d4d4); - z-index: 1; - -webkit-transition: .3s; - -o-transition: .3s; - transition: .3s; - } - - &::before { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - } - - &::after { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - } - - &>a { - display: block; - z-index: 2; - width: 100%; - height: 100%; - overflow: hidden; - opacity: 0; - position: absolute; - } - } - - &__bottom-info { - position: fixed; - width: 100%; - left: 0; - display: flex; - justify-content: space-between; - align-items: center; - bottom: 58px; - padding: 18px; - background: #fff; - z-index: 3; - } - - &__subtotal { - font-weight: 600; - font-size: 20px; - display: flex; - flex-direction: column; - - & .products-count { - font-size: 12px; - font-weight: 400; - } - } - - &__footer-buttons { - a { - padding: 12px; - display: block; - width: fit-content; - background: #09467f; - border-radius: 4px; - text-decoration: none; - color: #fff; - font-size: 12px; - } - } + img { + border-radius: 6px; + object-fit: cover; + } } - .product-thumbnail { - background: #eee; - border-radius: 9px; - height: 70px; + &__product-name { + grid-column-start: 2; + grid-column-end: 3; + margin: 0; + font-size: 14px; + padding-left: 20px; } - .product-change-amount { - width: 50px; - height: 30px; - margin-top: 4px; - border-radius: 5px; - display: flex; - border: solid #cbcbcb 1px; - color: #525252; - cursor: pointer; - user-select: none; - - &__symbol { - width: 50%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - border-right: solid #cbcbcb 1px; - } + &__product-price { + font-size: 14px; + padding-left: 20px; + grid-column-start: 2; + grid-column-end: 3; + -ms-flex-item-align: var(--price-quantity-position--align-self, end); + align-self: var(--price-quantity-position--align-self, end); + font-weight: 400; } - .cart-product { - &__supplements { - position: absolute; - right: 0; - bottom: 26px; - padding: 8px; - background: #f9b004; - color: #fff; - border-radius: 4px; - cursor: pointer; - } - } + &__product-remove { + color: #818a91; + width: var(--remove-item-button-size, 22px); + height: var(--remove-item-button-size, 22px); + border-radius: var(--remove-item-button-size, 22px); + border: 1px solid var(--remove-item-button-color, #d4d4d4); + text-align: center; + overflow: hidden; + position: absolute; + top: 0px; + right: 0; + bottom: 20px; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; - .woocommerce-mini-cart__empty-message { - text-align: center; - margin-top: 16px; - } + &::before, + &::after { + content: ""; + position: absolute; + height: 1px; + width: 50%; + top: 50%; + left: 25%; + margin-top: -1px; + background: var(--remove-item-button-color, #d4d4d4); + z-index: 1; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + } - hr { - width: 80%; - margin: 14px auto; - border-top: solid #d1d1d1 1px; - } + &::before { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } - .clear-cart { - padding: 8px; - border: none; - border-radius: 4px; - background: #d7120b; - color: #fff; - margin: 32px auto; + &::after { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + } + + & > a { display: block; + z-index: 2; + width: 100%; + height: 100%; + overflow: hidden; + opacity: 0; + position: absolute; + } } - @media screen and (min-width: 550px) { - .elementor-menu-cart__bottom-info { - bottom: 84px; - width: 500px; - left: 50%; - transform: translate(-50%, 0); - border: solid 1px #dfdfdf; - border-radius: 12px; - } + &__bottom-info { + position: fixed; + width: 100%; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + bottom: 0; + padding: 18px; + background: #fff; + z-index: 3; + border-top: solid 1px #e7e7e7; } -} \ No newline at end of file + + &__subtotal { + font-weight: 600; + font-size: 20px; + display: flex; + flex-direction: column; + + & .products-count { + font-size: 12px; + font-weight: 400; + } + } + + &__footer-buttons { + a { + padding: 12px; + display: block; + width: fit-content; + background: #09467f; + border-radius: 4px; + text-decoration: none; + color: #fff; + font-size: 12px; + } + } + } + + .product-thumbnail { + background: #eee; + border-radius: 9px; + height: 70px; + } + + .product-change-amount { + width: 50px; + height: 30px; + margin-top: 4px; + border-radius: 5px; + display: flex; + border: solid #cbcbcb 1px; + color: #525252; + cursor: pointer; + user-select: none; + + &__symbol { + width: 50%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + border-right: solid #cbcbcb 1px; + } + } + + .cart-product { + &__supplements { + position: absolute; + right: 0; + bottom: 26px; + padding: 8px; + background: #f9b004; + color: #fff; + border-radius: 4px; + cursor: pointer; + } + } + + .woocommerce-mini-cart__empty-message { + text-align: center; + margin-top: 16px; + } + + hr { + width: 80%; + margin: 14px auto; + border-top: solid #d1d1d1 1px; + } + + .clear-cart { + padding: 8px; + border: none; + border-radius: 4px; + background: #d7120b; + color: #fff; + margin: 32px auto; + display: block; + } + + @media screen and (min-width: 650px) { + .elementor-menu-cart__bottom-info { + width: 450px; + right: 0; + left: auto; + } + } +} diff --git a/angular/src/app/pages/cart/cart.component.ts b/angular/src/app/pages/cart/cart.component.ts index f6f37dd..17c658a 100644 --- a/angular/src/app/pages/cart/cart.component.ts +++ b/angular/src/app/pages/cart/cart.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core'; import { MessageService } from 'primeng/api'; import { Order } from 'src/app/models/order'; import { OrderProduct } from 'src/app/models/order-product'; @@ -16,6 +16,9 @@ export class CartComponent implements OnInit { public orderConfirmed = false; public order!: Order; public price!: number; + public visibleSidebar: boolean = false; + public isFullScreen!: boolean; + public width!: number; constructor( private orderService: OrderService, @@ -24,9 +27,31 @@ export class CartComponent implements OnInit { ) { } ngOnInit(): void { + this.width = window.innerWidth; + this.changeDullScreenMode() this.loadCart() } + // Изменение размера окна + @HostListener('window:resize', ['$event']) + onResize(event: any) { + this.width = event.target.innerWidth; + this.changeDullScreenMode() + } + + toggleSideBar(): void{ + this.visibleSidebar = !this.visibleSidebar; + this.loadCart() + } + + changeDullScreenMode() { + if (this.width < 650) { + this.isFullScreen = true + } else { + this.isFullScreen = false + } + } + async loadCart(): Promise { this.loading = true; this.order = await this.orderService.getOrder(true); diff --git a/angular/src/app/pages/not-found/not-found.component.html b/angular/src/app/pages/not-found/not-found.component.html index 65401b6..ff0d28c 100644 --- a/angular/src/app/pages/not-found/not-found.component.html +++ b/angular/src/app/pages/not-found/not-found.component.html @@ -1,8 +1,8 @@
    -

    404

    Упс, что-то пошло не так!

    - + Перейти на главную +
    diff --git a/angular/src/app/pages/not-found/not-found.component.scss b/angular/src/app/pages/not-found/not-found.component.scss index 0f45331..7b47baa 100644 --- a/angular/src/app/pages/not-found/not-found.component.scss +++ b/angular/src/app/pages/not-found/not-found.component.scss @@ -1,27 +1,30 @@ :host { .not-found-page { + height: calc(100vh - 70px); &__container { text-align: center; - margin-top: 32px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; h1 { - font-size: 108px; + font-size: 136px; font-weight: 600; - color: #09467f; + color: #252525; } p { - margin: 16px 0; + margin: 48px 0; font-size: 14px; } - button { - background-color: #09467f; - color: #fff; - border-radius: 8px; - display: flex; - justify-content: center; - align-items: center; - padding: 12px; - margin: 0 auto; - border: 0; + a { + letter-spacing: 1px; + color: #252525; + border-bottom: 2px solid #252525; + font-weight: 600; } } } diff --git a/angular/src/app/pages/not-found/not-found.component.ts b/angular/src/app/pages/not-found/not-found.component.ts index 94e3953..2e01498 100644 --- a/angular/src/app/pages/not-found/not-found.component.ts +++ b/angular/src/app/pages/not-found/not-found.component.ts @@ -1,20 +1,23 @@ import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-not-found', templateUrl: './not-found.component.html', - styleUrls: ['./not-found.component.scss'] + styleUrls: ['./not-found.component.scss'], }) export class NotFoundComponent implements OnInit { + constructor(private router: Router, private route: ActivatedRoute) {} - constructor(private router: Router) { } + ngOnInit(): void {} - ngOnInit(): void { + routeHome(event: MouseEvent) { + if (event) { + event.preventDefault(); + } + this.router.navigate(['/'], { + relativeTo: this.route, + queryParamsHandling: 'merge', + }); } - - routeHome() { - this.router.navigate(['/']); - } - } diff --git a/angular/src/app/pages/products/products.component.scss b/angular/src/app/pages/products/products.component.scss index cff19de..c1ce23f 100644 --- a/angular/src/app/pages/products/products.component.scss +++ b/angular/src/app/pages/products/products.component.scss @@ -112,6 +112,7 @@ margin: 0; font-size: 30px; font-weight: 500; + max-width: 150px; } button { @@ -234,17 +235,21 @@ @media screen and (max-width: 631px) { .products-container { - max-width: 306px; - } - } - - @media screen and (max-width: 450px) { - .products-container { - max-width: none; + max-width: 400px; &__item { width: 100%; } } } + + // @media screen and (max-width: 631px) { + // .products-container { + // // max-width: none; + + // &__item { + // width: 100%; + // } + // } + // } } \ No newline at end of file diff --git a/angular/src/styles.scss b/angular/src/styles.scss index d43a3e0..7dfca5e 100644 --- a/angular/src/styles.scss +++ b/angular/src/styles.scss @@ -186,6 +186,11 @@ p-toast[key="c"] .p-toast { bottom: 57px; } +.p-sidebar-right { + width: 450px !important; + max-width: 85% !important; +} + @media screen and (min-width: 550px) { p-toast[key="c"] .p-toast { bottom: 73px;