From f345b66f2bbe6c6b8131b7035226b6bd58be0002 Mon Sep 17 00:00:00 2001 From: Amanmyrat Date: Mon, 26 Sep 2022 09:58:01 +0500 Subject: [PATCH] fixed front end css --- .../css/components/2-layout/footer.scss | 1 + .../css/components/2-layout/header.scss | 11 +- .../css/components/2-layout/responsive.scss | 165 ++++++++++++++---- .../assets/css/components/3-page/home.scss | 7 +- themes/berkarar/assets/css/main.css | 102 +++++++++-- themes/berkarar/assets/js/main.js | 8 +- themes/berkarar/partials/site/header.htm | 28 ++- themes/berkarar/partials/site/navigation.htm | 15 ++ 8 files changed, 275 insertions(+), 62 deletions(-) diff --git a/themes/berkarar/assets/css/components/2-layout/footer.scss b/themes/berkarar/assets/css/components/2-layout/footer.scss index fb06c11..67755a6 100644 --- a/themes/berkarar/assets/css/components/2-layout/footer.scss +++ b/themes/berkarar/assets/css/components/2-layout/footer.scss @@ -45,6 +45,7 @@ line-height: 1.2; color: $yellow; margin-bottom: 25px; + display: block; } &-link { diff --git a/themes/berkarar/assets/css/components/2-layout/header.scss b/themes/berkarar/assets/css/components/2-layout/header.scss index c3bac16..905d040 100644 --- a/themes/berkarar/assets/css/components/2-layout/header.scss +++ b/themes/berkarar/assets/css/components/2-layout/header.scss @@ -97,14 +97,17 @@ &.active { span { - transform: rotate(25deg); + // transform: rotate(25deg); + background: none; &::before { - content: none; + transform: rotate(45deg); + top: 0; } &::after { - transform: rotate(-25deg); + transform: rotate(-45deg); + bottom: 0; } } } @@ -324,10 +327,8 @@ } } } - } - .m-rl { margin: 0 40px; } diff --git a/themes/berkarar/assets/css/components/2-layout/responsive.scss b/themes/berkarar/assets/css/components/2-layout/responsive.scss index ee23d92..67d2c9b 100644 --- a/themes/berkarar/assets/css/components/2-layout/responsive.scss +++ b/themes/berkarar/assets/css/components/2-layout/responsive.scss @@ -84,40 +84,107 @@ height: calc(100% - 130px); } - .mobile_buttons { - display: flex; - align-items: center; - justify-content: space-around; - padding: 40px; - background: $black; - border-radius: 5px; - margin-bottom: 60px; - - &-link { - font-weight: 700; - font-size: 20px; - line-height: 1.4; - color: #fff; - margin-right: 10px; + .mobile { + &_buttons { display: block; + margin-bottom: 60px; - &:last-child { - margin-right: 0; + .row { + display: flex; + align-items: center; + justify-content: space-around; + padding: 40px; + background: $black; + border-radius: 5px; } - a { + &-link { font-weight: 700; font-size: 20px; line-height: 1.4; color: #fff; margin-right: 10px; display: block; - margin: 40px 0 0 0; - display: none; + &:last-child { + margin-right: 0; + } + + a { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + margin-right: 10px; + display: block; + margin: 40px 0 0 0; + + display: none; + + &.active { + display: block; + } + } + } + + + } + + &_user { + &-link { + width: calc(100% - 40px); + text-align: center; + margin-top: 20px; + + padding: 30px 20px; + background: $black; + display: block; + position: relative; &.active { + span { + &::after { + transform: rotate(180deg); + top: 20%; + } + } + } + + span { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: inline-block; + cursor: pointer; + position: relative; + + &::after { + content: ''; + background: url("../images/svg/mouse-arrow.svg") no-repeat center; + background-size: contain; + width: 15px; + height: 15px; + position: absolute; + top: 50%; + right: -40px; + @include transformY; + @include transition; + } + } + + a { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; display: block; + margin: 40px 0 0 0; + display: none; + + &.active { + display: block; + } } } } @@ -443,7 +510,7 @@ height: 400px; &-name { - font-size: 18px; + font-size: 17px; } &-floor { @@ -514,6 +581,8 @@ } &-input { + width: calc(100% - 166px); + input { padding: 15px 20px; } @@ -610,7 +679,7 @@ height: 370px; &-name { - font-size: 16px; + font-size: 15px; padding: 15px 10px; } @@ -721,10 +790,12 @@ // Menu ================ .menu { .mobile_buttons { - justify-content: center; - flex-wrap: wrap; - align-items: unset; - padding: 20px 30px; + .row { + justify-content: center; + flex-wrap: wrap; + align-items: unset; + padding: 20px 30px; + } &-link { font-size: 16px; @@ -1146,16 +1217,38 @@ height: calc(100% - 85px); } - .mobile_buttons { - background: none; + .mobile { + &_buttons { + background: none; - &-link { - flex-direction: column; - width: calc(100% - 30px); - margin: 0 0 15px; - padding: 20px 15px; - background: #171717; - font-size: 18px; + .row { + background: none; + padding: 0; + } + + &-link { + flex-direction: column; + width: calc(100% - 30px); + margin: 0 0 15px; + padding: 20px 15px; + background: #171717; + font-size: 18px; + } + } + + &_user { + &-link { + padding: 15px 20px; + margin-top: 5px; + + span { + font-size: 18px; + } + + a { + font-size: 18px; + } + } } } @@ -1170,7 +1263,7 @@ } &-input { - width: calc(100% - 110px); + width: calc(100% - 99px); margin-right: 0; input { diff --git a/themes/berkarar/assets/css/components/3-page/home.scss b/themes/berkarar/assets/css/components/3-page/home.scss index e90e60a..ef65543 100644 --- a/themes/berkarar/assets/css/components/3-page/home.scss +++ b/themes/berkarar/assets/css/components/3-page/home.scss @@ -261,15 +261,18 @@ transform-origin: right; @include transition; + max-width: 130px; max-height: 0; overflow: hidden; opacity: 0; + + text-align: center; } &-name { font-weight: 700; - font-size: 22px; - line-height: 27px; + font-size: 18px; + line-height: 1.3; text-transform: lowercase; color: $black; background: #fff; diff --git a/themes/berkarar/assets/css/main.css b/themes/berkarar/assets/css/main.css index ede1d86..ab71d49 100644 --- a/themes/berkarar/assets/css/main.css +++ b/themes/berkarar/assets/css/main.css @@ -251,15 +251,17 @@ input[type=date]::-webkit-calendar-picker-indicator { background: #fff; } .header .burger.active span { - -webkit-transform: rotate(25deg); - transform: rotate(25deg); + background: none; } .header .burger.active span::before { - content: none; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + top: 0; } .header .burger.active span::after { - -webkit-transform: rotate(-25deg); - transform: rotate(-25deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + bottom: 0; } .header .burger span { display: block; @@ -1135,6 +1137,7 @@ input[type=date]::-webkit-calendar-picker-indicator { line-height: 1.2; color: #FFB100; margin-bottom: 25px; + display: block; } .footer_col-link { display: block; @@ -1466,14 +1469,16 @@ input[type=date]::-webkit-calendar-picker-indicator { -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; + max-width: 130px; max-height: 0; overflow: hidden; opacity: 0; + text-align: center; } .shops_item-name { font-weight: 700; - font-size: 22px; - line-height: 27px; + font-size: 18px; + line-height: 1.3; text-transform: lowercase; color: #171717; background: #fff; @@ -3448,6 +3453,10 @@ input[type=date]::-webkit-calendar-picker-indicator { height: calc(100% - 130px); } .menu .mobile_buttons { + display: block; + margin-bottom: 60px; + } + .menu .mobile_buttons .row { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -3459,7 +3468,6 @@ input[type=date]::-webkit-calendar-picker-indicator { padding: 40px; background: #171717; border-radius: 5px; - margin-bottom: 60px; } .menu .mobile_buttons-link { font-weight: 700; @@ -3485,6 +3493,59 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu .mobile_buttons-link a.active { display: block; } + .menu .mobile_user-link { + width: calc(100% - 40px); + text-align: center; + margin-top: 20px; + padding: 30px 20px; + background: #171717; + display: block; + position: relative; + } + .menu .mobile_user-link.active span::after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + top: 20%; + } + .menu .mobile_user-link span { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: inline-block; + cursor: pointer; + position: relative; + } + .menu .mobile_user-link span::after { + content: ""; + background: url("../images/svg/mouse-arrow.svg") no-repeat center; + background-size: contain; + width: 15px; + height: 15px; + position: absolute; + top: 50%; + right: -40px; + transform: translateY(-50%); + -moz-ransform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -webkit-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + -moz-transition: all 0.2s ease-in-out 0s; + } + .menu .mobile_user-link a { + font-weight: 700; + font-size: 20px; + line-height: 1.4; + color: #fff; + display: block; + margin: 40px 0 0 0; + display: none; + } + .menu .mobile_user-link a.active { + display: block; + } .menu_box { -ms-flex-wrap: wrap; flex-wrap: wrap; @@ -3691,7 +3752,7 @@ input[type=date]::-webkit-calendar-picker-indicator { height: 400px; } .shops_item-name { - font-size: 18px; + font-size: 17px; } .shops_item-floor { font-size: 28px; @@ -3741,6 +3802,9 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu_search-title { font-size: 32px; } + .menu_search-input { + width: calc(100% - 166px); + } .menu_search-input input { padding: 15px 20px; } @@ -3815,7 +3879,7 @@ input[type=date]::-webkit-calendar-picker-indicator { height: 370px; } .shops_item-name { - font-size: 16px; + font-size: 15px; padding: 15px 10px; } .shops_item-floor { @@ -3876,7 +3940,7 @@ input[type=date]::-webkit-calendar-picker-indicator { height: 35px; } - .menu .mobile_buttons { + .menu .mobile_buttons .row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; @@ -4195,6 +4259,10 @@ input[type=date]::-webkit-calendar-picker-indicator { .menu .mobile_buttons { background: none; } + .menu .mobile_buttons .row { + background: none; + padding: 0; + } .menu .mobile_buttons-link { -webkit-box-orient: vertical; -webkit-box-direction: normal; @@ -4206,6 +4274,16 @@ input[type=date]::-webkit-calendar-picker-indicator { background: #171717; font-size: 18px; } + .menu .mobile_user-link { + padding: 15px 20px; + margin-top: 5px; + } + .menu .mobile_user-link span { + font-size: 18px; + } + .menu .mobile_user-link a { + font-size: 18px; + } .menu_search-title { font-size: 28px; } @@ -4214,7 +4292,7 @@ input[type=date]::-webkit-calendar-picker-indicator { font-size: 14px; } .menu_search-input { - width: calc(100% - 110px); + width: calc(100% - 99px); margin-right: 0; } .menu_search-input input { diff --git a/themes/berkarar/assets/js/main.js b/themes/berkarar/assets/js/main.js index 2ac55cc..0bde70b 100644 --- a/themes/berkarar/assets/js/main.js +++ b/themes/berkarar/assets/js/main.js @@ -17,7 +17,7 @@ let lang_box = document.querySelector('.lang_box'); let mobile_link = document.querySelectorAll('.mobile_buttons-link'); let logout = document.querySelector('.logout'); -let logout_link = document.querySelector('.logout a'); +let logout_link = document.querySelectorAll('.logout a'); // let movie_link = document.querySelectorAll('.movie_item-link'); @@ -85,7 +85,11 @@ if (burger != undefined) { if (logout != undefined) { logout.addEventListener('click', function () { sleep(2).then(() => { - logout_link.classList.toggle('active'); + logout.classList.toggle('active'); + + logout_link.forEach(p => { + p.classList.toggle('active'); + }) }) }); } diff --git a/themes/berkarar/partials/site/header.htm b/themes/berkarar/partials/site/header.htm index 51f29e3..0786bfa 100644 --- a/themes/berkarar/partials/site/header.htm +++ b/themes/berkarar/partials/site/header.htm @@ -41,11 +41,29 @@ function onStart(){
{% if user %} -
{{user.name}}
 - - - Выйти - +
+
+ {{user.name}} + + + + + + +
+ +
+ + + Logout + +
+
{% else %}
Вход
diff --git a/themes/berkarar/partials/site/navigation.htm b/themes/berkarar/partials/site/navigation.htm index 75efb77..c4264ee 100644 --- a/themes/berkarar/partials/site/navigation.htm +++ b/themes/berkarar/partials/site/navigation.htm @@ -64,6 +64,21 @@ function onStart(){ +
+
+ Подробней о нас + Контакты + Схема ТРЦ +
+

+ {% if user %} + {{user.name}} + Profile + Выйти + {% endif %} +

+
+
{% for item in category_settings %}