From ea63515f74612c6ca6ec9ea72366fece7b179c97 Mon Sep 17 00:00:00 2001 From: gofnnp Date: Mon, 19 Dec 2022 07:51:11 +0400 Subject: [PATCH] =?UTF-8?q?dev=20#13306=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D0=BB=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/navbar/navbar.component.html | 3 +- .../components/navbar/navbar.component.scss | 27 ++- .../app/components/navbar/navbar.component.ts | 9 + .../product-modal.component.scss | 21 +- .../app/pages/account/account.component.html | 2 +- .../app/pages/account/account.component.scss | 8 +- .../app/pages/account/account.component.ts | 4 +- .../pages/products/products.component.html | 88 ++++++-- .../pages/products/products.component.scss | 197 ++++++++++++++++-- .../app/pages/products/products.component.ts | 40 +++- angular/src/assets/logo-black.png | Bin 0 -> 6094 bytes angular/src/styles.scss | 24 +++ 12 files changed, 363 insertions(+), 60 deletions(-) create mode 100644 angular/src/assets/logo-black.png diff --git a/angular/src/app/components/navbar/navbar.component.html b/angular/src/app/components/navbar/navbar.component.html index 8517cdf..61857c5 100644 --- a/angular/src/app/components/navbar/navbar.component.html +++ b/angular/src/app/components/navbar/navbar.component.html @@ -1,3 +1,4 @@
- Логотип + Логотип + Меню
diff --git a/angular/src/app/components/navbar/navbar.component.scss b/angular/src/app/components/navbar/navbar.component.scss index 81e18fe..ab13549 100644 --- a/angular/src/app/components/navbar/navbar.component.scss +++ b/angular/src/app/components/navbar/navbar.component.scss @@ -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; + } + } } \ No newline at end of file diff --git a/angular/src/app/components/navbar/navbar.component.ts b/angular/src/app/components/navbar/navbar.component.ts index 6a9bec8..e498267 100644 --- a/angular/src/app/components/navbar/navbar.component.ts +++ b/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') + } + } + } diff --git a/angular/src/app/components/product-modal/product-modal.component.scss b/angular/src/app/components/product-modal/product-modal.component.scss index 572e41d..7ac6c09 100644 --- a/angular/src/app/components/product-modal/product-modal.component.scss +++ b/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; - 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); } diff --git a/angular/src/app/pages/account/account.component.html b/angular/src/app/pages/account/account.component.html index 676384c..1f0ce90 100644 --- a/angular/src/app/pages/account/account.component.html +++ b/angular/src/app/pages/account/account.component.html @@ -2,7 +2,7 @@ woocommerce: true, 'auth-page': showAuthoriztion }"> -