TPS
/
Berkarar
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed front end css

This commit is contained in:
Amanmyrat 2022-09-26 09:58:01 +05:00
parent a49b8c5006
commit f345b66f2b
8 changed files with 275 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
themes/berkarar/assets/css/components/2-layout/footer.scss
View File

@ -45,6 +45,7 @@
line-height: 1.2;
color: $yellow;
margin-bottom: 25px;
display: block;
}
&-link {

11
themes/berkarar/assets/css/components/2-layout/header.scss
View File

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

165
themes/berkarar/assets/css/components/2-layout/responsive.scss
View File

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

7
themes/berkarar/assets/css/components/3-page/home.scss
View File

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

102
themes/berkarar/assets/css/main.css
View File

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

8
themes/berkarar/assets/js/main.js
View File

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

26
themes/berkarar/partials/site/header.htm
View File

@ -41,11 +41,29 @@ function onStart(){
<div class="header_item">
{% if user %}
<a href="{{ 'profile'|page}}"><h6 class="header_item-link modBtn">{{user.name}}</h6></a>
<div class="user">
<h6 class="user_title">
{{user.name}}
<a data-request="onLogout" data-request-data="redirect: '/'" class="header_item-link modBtn">
Выйти
</a>
<span>
<svg width="12" height="7" viewBox="0 0 12 7" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.99844 6.3334C5.80373 6.33378 5.61503 6.26597 5.46511 6.14173L0.465106 1.97507C0.294926 1.83362 0.187905 1.63036 0.167589 1.41C0.147272 1.18965 0.215324 0.970247 0.356773 0.800067C0.498222 0.629886 0.701481 0.522866 0.921836 0.50255C1.14219 0.482233 1.36159 0.550284 1.53177 0.691733L5.99844 4.42507L10.4651 0.825067C10.5503 0.755846 10.6484 0.704152 10.7537 0.672959C10.859 0.641766 10.9694 0.631688 11.0786 0.643304C11.1878 0.65492 11.2936 0.688001 11.39 0.740646C11.4863 0.79329 11.5713 0.864461 11.6401 0.950067C11.7164 1.03575 11.7742 1.13627 11.8099 1.24533C11.8455 1.3544 11.8583 1.46965 11.8473 1.58387C11.8364 1.69809 11.802 1.80881 11.7462 1.90911C11.6905 2.00941 11.6146 2.09711 11.5234 2.16673L6.52344 6.19173C6.3692 6.29633 6.18436 6.34621 5.99844 6.3334Z"
fill="white" />
</svg>
</span>
</h6>
<div class="user_group">
<a href="{{ 'profile'|page}}" class="user_profile user-link">
Profile
</a>
<a data-request="onLogout" data-request-data="redirect: '/'" class="user_logout user-link">
Logout
</a>
</div>
</div>
{% else %}
<h6 class="header_item-link modBtn" data-tab="#login">Вход</h6>

15
themes/berkarar/partials/site/navigation.htm
View File

@ -64,6 +64,21 @@ function onStart(){
</button>
</form>
<div class="mobile_buttons">
<div class="row">
<a href="#" class="mobile_buttons-link">Подробней о нас</a>
<a href="#" class="mobile_buttons-link">Контакты</a>
<a href="#" class="mobile_buttons-link">Схема ТРЦ</a>
</div>
<h4 class="mobile_user-link logout">
{% if user %}
<span>{{user.name}}</span>
<a href="{{ 'profile'|page}}">Profile</a>
<a data-request="onLogout" data-request-data="redirect: '/'" >Выйти</a>
{% endif %}
</h4>
</div>
<div class="menu_box">
{% for item in category_settings %}
<div class="menu_col">