Add 404 page and minor fixes

This commit is contained in:
Amanmyrat 2023-08-11 15:31:54 +05:00
parent 307dee2abb
commit 63eadb54cc
26 changed files with 620 additions and 587 deletions

View File

@ -47,6 +47,10 @@ body {
&.active {
overflow: hidden;
}
display: flex;
flex-direction: column;
min-height: 100vh;
}
body.active {

View File

@ -1,6 +1,7 @@
// Footer =====================
.footer {
padding: 80px 0;
margin: auto 0 0 0;
background: $gray;
&_box {
@ -20,7 +21,7 @@
right: -40px;
height: 100%;
width: 1px;
background: #fff;
background: #8E8E8E;
}
&:last-child {
@ -66,7 +67,7 @@
&_navs {
display: flex;
justify-content: space-between;
border-top: 1px solid #fff;
border-top: 1px solid #8E8E8E;
margin-top: 50px;
padding-top: 50px;
@ -85,7 +86,7 @@
}
p {
font-size: 12px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: #fff;
@ -105,8 +106,8 @@
span {
display: block;
width: 16px;
height: 16px;
width: 20px;
height: 20px;
margin-right: 10px;
svg {
@ -123,7 +124,7 @@
}
.copyright {
font-size: 12px;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 24px;
@ -139,7 +140,7 @@
}
a {
font-size: 12px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: #fff;
@ -158,8 +159,8 @@
span {
display: block;
width: 16px;
height: 16px;
width: 20px;
height: 20px;
margin-right: 10px;
svg {

View File

@ -8,7 +8,7 @@
position: relative;
top: 0;
&.active {
&.fixed {
position: fixed;
top: 0;
left: 0;
@ -189,7 +189,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
padding: 12px 15px;
padding: 15px 12px;
background: #fff;
border-radius: 10px;
@ -365,7 +365,7 @@
padding: 20px 0;
background: $black;
&.active {
&.fixed {
position: fixed;
top: 110px;
left: 0;
@ -394,7 +394,8 @@
// margin-right: 0;
// }
a {
a,
h6 {
font-weight: 700;
font-size: 12px;
line-height: 15px;
@ -545,10 +546,6 @@
margin-bottom: 20px;
}
.mobile_buttons {
display: none;
}
&::-webkit-scrollbar {
display: none;
}
@ -619,7 +616,7 @@
}
&_col {
width: calc(20% - 80px);
width: calc(20% - 64px);
margin-right: 80px;
position: relative;
display: block;
@ -631,7 +628,7 @@
right: -40px;
height: 100%;
width: 1px;
background: #fff;
background: #8E8E8E;
}
&:last-child {
@ -652,7 +649,7 @@
&-title {
font-weight: 700;
font-size: 14px;
font-size: 16px;
line-height: 1.2;
color: $yellow;
margin-bottom: 25px;
@ -662,7 +659,7 @@
display: block;
margin-bottom: 20px;
font-weight: 700;
font-size: 14px;
font-size: 16px;
line-height: 1.2;
color: #FFFFFF;
@include transition;
@ -739,68 +736,3 @@
}
// Menu end ===================
// Mobile ====================
.mobile {
&_navs {
display: flex;
justify-content: space-between;
margin-bottom: 70px;
&-list {
width: calc(50% - 50px);
background: #292929;
padding: 20px;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
li {
margin: 0 30px 20px 0;
}
a {
font-size: 13px;
font-weight: 400;
line-height: 1.3;
color: #fff;
text-transform: uppercase;
}
}
}
&_profile {
background: #292929;
width: calc(50% - 50px);
padding: 20px;
border-radius: 5px;
// display: flex;
// flex-wrap: wrap;
&-title {
width: 100%;
color: #FFF;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #fff;
text-align: center;
}
&-link {
text-align: center;
color: #FFF;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
display: block;
margin-bottom: 25px;
}
}
}
// Mobile end ================

View File

@ -55,11 +55,6 @@
height: 40px;
}
.burger {
width: 40px;
height: 40px;
}
.lang {
&_current {
padding: 10px;
@ -504,6 +499,25 @@
padding: 0 20px;
}
// Menu =======================
.menu {
&_box {
flex-wrap: wrap;
}
&_col {
width: calc(33.33% - 80px);
&:nth-child(3) {
&::after {
display: none;
}
}
}
}
// Menu end ===================
// Restaurants ================
.rest {
&.page {
@ -652,55 +666,10 @@
.menu {
&.active {
top: 90px;
height: calc(100% - 90px);
height: calc(100% - 89px);
}
.mobile {
&_buttons {
display: block;
margin-bottom: 25px;
.row {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
background: $black;
border-radius: 5px;
}
&-link {
font-weight: 700;
font-size: 18px;
line-height: 1.4;
color: #fff;
margin-right: 10px;
display: block;
&:last-child {
margin-right: 0;
}
a {
font-weight: 700;
font-size: 18px;
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);
@ -785,35 +754,6 @@
// Menu end ================
// Mobile ====================
.mobile {
&_navs {
flex-direction: column;
&-list {
width: calc(100% - 40px);
margin-bottom: 25px;
}
}
&_profile {
width: calc(100% - 40px);
&-title {
font-size: 16px;
margin-bottom: 30px;
padding-bottom: 15px;
}
&-link {
font-size: 16px;
margin-bottom: 15px;
}
}
}
// Mobile end ================
// Shops ======================
.shops {
&_item {
@ -876,6 +816,23 @@
// Footer end ==================
// 404 ======================
.error {
padding: 50px 0;
&_icon {
display: none;
}
&_info {
align-items: center;
text-align: center;
width: 100%;
}
}
// 404 end ==================
}
@ -885,14 +842,6 @@
// Menu ====================
.menu {
.mobile_buttons {
justify-content: space-between;
&-link {
font-size: 18px;
}
}
&_search {
padding-top: 30px;
@ -1125,25 +1074,81 @@
width: calc(100% - 210px);
height: 35px;
}
.burger {
height: 32px;
border-radius: 50%;
span {
margin-right: 0;
}
p {
display: none;
}
}
}
// Header end ============
// Menu ================
.menu {
.mobile_buttons {
.row {
justify-content: center;
flex-wrap: wrap;
align-items: unset;
padding: 20px 30px;
&_col {
margin: 0;
width: 100%;
&:last-child {
margin-bottom: 0;
}
&:nth-child(3) {
margin-right: 0;
&::after {
content: none;
}
}
&::after {
content: none;
}
&-group {
margin-bottom: 15px;
&:last-child {
margin-bottom: 15px;
}
}
&-title {
font-size: 18px;
}
&-box {
overflow: hidden;
max-height: 0;
@include transition;
&::-webkit-scrollbar {
display: none;
}
}
&-link {
font-size: 16px;
width: calc(50% - 20px);
margin: 15px 10px;
text-align: center;
position: relative;
padding-left: 50px;
&::before {
content: '';
position: absolute;
top: 50%;
left: 20px;
@include transformY;
width: 10px;
height: 10px;
background: url("../images/svg/nav_link-arrow.png") no-repeat center;
}
}
}
@ -1151,6 +1156,7 @@
&_navs {
margin-top: 30px;
padding-top: 30px;
padding-bottom: 20px;
}
}
}
@ -1617,6 +1623,27 @@
}
// Result end =============
// 404 ======================
.error {
&_sup-title {
font-size: 60px;
}
&_title {
font-size: 22px;
}
&_txt {
font-size: 14px;
}
&_link {
font-size: 14px;
}
}
// 404 end ==================
}
// 520 ==========================================
@ -1630,6 +1657,19 @@
.header {
padding: 25px 0;
.burger {
height: 28px;
span {
width: 20px;
&::before,
&::after {
width: 20px;
}
}
}
.lang {
&_current {
padding: 8px;
@ -1648,11 +1688,6 @@
.logo {
width: calc(100% - 160px);
}
.burger {
width: 36px;
height: 36px;
}
}
// Header end ============
@ -1664,25 +1699,13 @@
height: calc(100% - 85px);
}
.mobile {
&_buttons {
background: none;
.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;
}
&_col {
&-title {
font-size: 16px;
}
}
.mobile {
&_user {
&-link {
padding: 15px 20px;
@ -1700,21 +1723,27 @@
}
&_search {
flex-direction: column;
&-title {
font-size: 28px;
}
&-btn {
padding: 15px 25px;
padding: 12px 20px;
margin-top: 15px;
font-size: 14px;
width: 100%;
}
&-input {
width: calc(100% - 99px);
width: 100%;
margin-right: 0;
input {
font-size: 14px;
padding: 12px 15px;
width: calc(100% - 30px);
}
}
}

View File

@ -0,0 +1,78 @@
// 404 ===================
.error {
padding: 80px 0 100px;
&_box {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
&_icon {
width: calc(50% - 80px);
img {
@include ImgCon;
}
}
&_info {
width: calc(50% - 80px);
display: flex;
flex-direction: column;
align-items: flex-start;
}
&_sup-title {
font-size: 100px;
font-weight: 700;
line-height: 1.3;
}
&_title {
font-size: 28px;
font-weight: 700;
line-height: 1.3;
color: #FFB100;
margin: 40px 0 25px;
}
&_txt {
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: $gray;
max-width: 400px;
}
&_link {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
padding: 16px 25px;
margin-top: 40px;
background: #FFB100;
border-radius: 5px;
cursor: pointer;
span {
display: block;
margin-left: 10px;
width: 20px;
height: 20px;
svg {
@include ImgCon;
display: block;
}
}
}
}
// 404 end ===============

View File

@ -729,6 +729,13 @@
line-height: 1.3;
text-transform: uppercase;
color: #FFFFFF;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
&-txt {
@ -737,6 +744,14 @@
line-height: 1.2;
color: #FFFFFF;
margin: 10px 0 25px;
min-height: 34px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
&-row {

View File

@ -41,6 +41,14 @@ body {
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body.active {
overflow: hidden;
@ -150,7 +158,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
position: relative;
top: 0;
}
.header.active {
.header.fixed {
position: fixed;
top: 0;
left: 0;
@ -343,7 +351,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
padding: 12px 15px;
padding: 15px 12px;
background: #fff;
border-radius: 10px;
font-weight: 700;
@ -510,7 +518,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
padding: 20px 0;
background: #171717;
}
.nav.active {
.nav.fixed {
position: fixed;
top: 110px;
left: 0;
@ -542,7 +550,8 @@ input[type=date]::-webkit-calendar-picker-indicator {
display: block;
margin-right: 40px;
}
.nav_list li a {
.nav_list li a,
.nav_list li h6 {
font-weight: 700;
font-size: 12px;
line-height: 15px;
@ -559,27 +568,32 @@ input[type=date]::-webkit-calendar-picker-indicator {
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
.nav_list li a span {
.nav_list li a span,
.nav_list li h6 span {
display: block;
width: 20px;
height: 20px;
margin-right: 10px;
}
.nav_list li a span svg {
.nav_list li a span svg,
.nav_list li h6 span svg {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.nav_list li a span svg path {
.nav_list li a span svg path,
.nav_list li h6 span svg path {
-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;
}
.nav_list li a:hover {
.nav_list li a:hover,
.nav_list li h6:hover {
color: #FFB100;
}
.nav_list li a:hover path {
.nav_list li a:hover path,
.nav_list li h6:hover path {
fill: #FFB100;
}
.nav_list li .more {
@ -687,9 +701,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
.menu_wrap {
margin-bottom: 20px;
}
.menu .mobile_buttons {
display: none;
}
.menu::-webkit-scrollbar {
display: none;
}
@ -768,7 +779,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
display: flex;
}
.menu_col {
width: calc(20% - 80px);
width: calc(20% - 64px);
margin-right: 80px;
position: relative;
display: block;
@ -780,7 +791,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
right: -40px;
height: 100%;
width: 1px;
background: #fff;
background: #8E8E8E;
}
.menu_col:last-child {
margin-right: 0;
@ -796,7 +807,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
}
.menu_col-title {
font-weight: 700;
font-size: 14px;
font-size: 16px;
line-height: 1.2;
color: #FFB100;
margin-bottom: 25px;
@ -805,7 +816,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
display: block;
margin-bottom: 20px;
font-weight: 700;
font-size: 14px;
font-size: 16px;
line-height: 1.2;
color: #FFFFFF;
-webkit-transition: all 0.2s ease-in-out 0s;
@ -883,63 +894,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
-moz-transition: all 0.2s ease-in-out 0s;
}
.mobile_navs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 70px;
}
.mobile_navs-list {
width: calc(50% - 50px);
background: #292929;
padding: 20px;
border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mobile_navs-list li {
margin: 0 30px 20px 0;
}
.mobile_navs-list a {
font-size: 13px;
font-weight: 400;
line-height: 1.3;
color: #fff;
text-transform: uppercase;
}
.mobile_profile {
background: #292929;
width: calc(50% - 50px);
padding: 20px;
border-radius: 5px;
}
.mobile_profile-title {
width: 100%;
color: #FFF;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #fff;
text-align: center;
}
.mobile_profile-link {
text-align: center;
color: #FFF;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
display: block;
margin-bottom: 25px;
}
.crumb {
padding: 40px 0 0;
}
@ -1204,6 +1158,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
.footer {
padding: 80px 0;
margin: auto 0 0 0;
background: #292929;
}
.footer_box {
@ -1224,7 +1179,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
right: -40px;
height: 100%;
width: 1px;
background: #fff;
background: #8E8E8E;
}
.footer_col:last-child {
margin-right: 0;
@ -1267,7 +1222,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-top: 1px solid #fff;
border-top: 1px solid #8E8E8E;
margin-top: 50px;
padding-top: 50px;
}
@ -1286,7 +1241,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
margin-bottom: 0;
}
.footer_navs-link p {
font-size: 12px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: #fff;
@ -1300,8 +1255,8 @@ input[type=date]::-webkit-calendar-picker-indicator {
}
.footer_navs-link span {
display: block;
width: 16px;
height: 16px;
width: 20px;
height: 20px;
margin-right: 10px;
}
.footer_navs-link span svg {
@ -1317,7 +1272,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
line-height: 1.3;
}
.footer_navs .copyright {
font-size: 12px;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 24px;
@ -1329,7 +1284,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
margin-bottom: 0;
}
.footer_navs ul a {
font-size: 12px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: #fff;
@ -1351,8 +1306,8 @@ input[type=date]::-webkit-calendar-picker-indicator {
}
.footer_navs ul a span {
display: block;
width: 16px;
height: 16px;
width: 20px;
height: 20px;
margin-right: 10px;
}
.footer_navs ul a span svg {
@ -2073,6 +2028,12 @@ input[type=date]::-webkit-calendar-picker-indicator {
line-height: 1.3;
text-transform: uppercase;
color: #FFFFFF;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.rest_item-txt {
font-weight: 400;
@ -2080,6 +2041,13 @@ input[type=date]::-webkit-calendar-picker-indicator {
line-height: 1.2;
color: #FFFFFF;
margin: 10px 0 25px;
min-height: 34px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.rest_item-row {
display: -webkit-box;
@ -3135,6 +3103,93 @@ input[type=date]::-webkit-calendar-picker-indicator {
margin: -15px -12px;
}
.error {
padding: 80px 0 100px;
}
.error_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.error_icon {
width: calc(50% - 80px);
}
.error_icon img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.error_info {
width: calc(50% - 80px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.error_sup-title {
font-size: 100px;
font-weight: 700;
line-height: 1.3;
}
.error_title {
font-size: 28px;
font-weight: 700;
line-height: 1.3;
color: #FFB100;
margin: 40px 0 25px;
}
.error_txt {
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: #292929;
max-width: 400px;
}
.error_link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
padding: 16px 25px;
margin-top: 40px;
background: #FFB100;
border-radius: 5px;
cursor: pointer;
}
.error_link span {
display: block;
margin-left: 10px;
width: 20px;
height: 20px;
}
.error_link span svg {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
display: block;
}
/* Slider */
.slick-slider {
position: relative;
@ -3584,10 +3639,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
width: 310px;
height: 40px;
}
.header .burger {
width: 40px;
height: 40px;
}
.header .lang_current {
padding: 10px;
}
@ -3835,6 +3886,16 @@ input[type=date]::-webkit-calendar-picker-indicator {
.auto_container {
padding: 0 20px;
}
.menu_box {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu_col {
width: calc(33.33% - 80px);
}
.menu_col:nth-child(3)::after {
display: none;
}
.rest.page {
padding: 40px 0;
}
@ -3933,48 +3994,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
}
.menu.active {
top: 90px;
height: calc(100% - 90px);
}
.menu .mobile_buttons {
display: block;
margin-bottom: 25px;
}
.menu .mobile_buttons .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 20px;
background: #171717;
border-radius: 5px;
}
.menu .mobile_buttons-link {
font-weight: 700;
font-size: 18px;
line-height: 1.4;
color: #fff;
margin-right: 10px;
display: block;
}
.menu .mobile_buttons-link:last-child {
margin-right: 0;
}
.menu .mobile_buttons-link a {
font-weight: 700;
font-size: 18px;
line-height: 1.4;
color: #fff;
margin-right: 10px;
display: block;
margin: 40px 0 0 0;
display: none;
}
.menu .mobile_buttons-link a.active {
display: block;
height: calc(100% - 89px);
}
.menu .mobile_user-link {
width: calc(100% - 40px);
@ -4046,28 +4066,6 @@ input[type=date]::-webkit-calendar-picker-indicator {
.menu_col:nth-child(3)::after {
display: none;
}
.mobile_navs {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mobile_navs-list {
width: calc(100% - 40px);
margin-bottom: 25px;
}
.mobile_profile {
width: calc(100% - 40px);
}
.mobile_profile-title {
font-size: 16px;
margin-bottom: 30px;
padding-bottom: 15px;
}
.mobile_profile-link {
font-size: 16px;
margin-bottom: 15px;
}
.shops_item {
width: calc(50% - 16px);
margin: 10px 8px;
@ -4109,16 +4107,21 @@ input[type=date]::-webkit-calendar-picker-indicator {
-ms-flex-order: 1;
order: 1;
}
.error {
padding: 50px 0;
}
.error_icon {
display: none;
}
.error_info {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
width: 100%;
}
}
@media (max-width: 900px) {
.menu .mobile_buttons {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.menu .mobile_buttons-link {
font-size: 18px;
}
.menu_search {
padding-top: 30px;
}
@ -4277,26 +4280,73 @@ input[type=date]::-webkit-calendar-picker-indicator {
width: calc(100% - 210px);
height: 35px;
}
.menu .mobile_buttons .row {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: unset;
-ms-flex-align: unset;
align-items: unset;
padding: 20px 30px;
.header .burger {
height: 32px;
border-radius: 50%;
}
.menu .mobile_buttons-link {
font-size: 16px;
width: calc(50% - 20px);
margin: 15px 10px;
text-align: center;
.header .burger span {
margin-right: 0;
}
.header .burger p {
display: none;
}
.menu_col {
margin: 0;
width: 100%;
}
.menu_col:last-child {
margin-bottom: 0;
}
.menu_col:nth-child(3) {
margin-right: 0;
}
.menu_col:nth-child(3)::after {
content: none;
}
.menu_col::after {
content: none;
}
.menu_col-group {
margin-bottom: 15px;
}
.menu_col-group:last-child {
margin-bottom: 15px;
}
.menu_col-title {
font-size: 18px;
}
.menu_col-box {
overflow: hidden;
max-height: 0;
-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_col-box::-webkit-scrollbar {
display: none;
}
.menu_col-link {
position: relative;
padding-left: 50px;
}
.menu_col-link::before {
content: "";
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
-moz-ransform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
width: 10px;
height: 10px;
background: url("../images/svg/nav_link-arrow.png") no-repeat center;
}
.menu .footer_navs {
margin-top: 30px;
padding-top: 30px;
padding-bottom: 20px;
}
.shops_tab {
-ms-flex-wrap: wrap;
@ -4632,6 +4682,18 @@ input[type=date]::-webkit-calendar-picker-indicator {
width: 100%;
margin-top: 15px;
}
.error_sup-title {
font-size: 60px;
}
.error_title {
font-size: 22px;
}
.error_txt {
font-size: 14px;
}
.error_link {
font-size: 14px;
}
}
@media (max-width: 520px) {
.auto_container {
@ -4640,6 +4702,15 @@ input[type=date]::-webkit-calendar-picker-indicator {
.header {
padding: 25px 0;
}
.header .burger {
height: 28px;
}
.header .burger span {
width: 20px;
}
.header .burger span::before, .header .burger span::after {
width: 20px;
}
.header .lang_current {
padding: 8px;
}
@ -4653,31 +4724,12 @@ input[type=date]::-webkit-calendar-picker-indicator {
.header .logo {
width: calc(100% - 160px);
}
.header .burger {
width: 36px;
height: 36px;
}
.menu.active {
top: 85px;
height: calc(100% - 85px);
}
.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;
-ms-flex-direction: column;
flex-direction: column;
width: calc(100% - 30px);
margin: 0 0 15px;
padding: 20px 15px;
background: #171717;
font-size: 18px;
.menu_col-title {
font-size: 16px;
}
.menu .mobile_user-link {
padding: 15px 20px;
@ -4689,19 +4741,29 @@ input[type=date]::-webkit-calendar-picker-indicator {
.menu .mobile_user-link a {
font-size: 18px;
}
.menu_search {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.menu_search-title {
font-size: 28px;
}
.menu_search-btn {
padding: 15px 25px;
padding: 12px 20px;
margin-top: 15px;
font-size: 14px;
width: 100%;
}
.menu_search-input {
width: calc(100% - 99px);
width: 100%;
margin-right: 0;
}
.menu_search-input input {
font-size: 14px;
padding: 12px 15px;
width: calc(100% - 30px);
}
.hero_item {
height: 500px;

View File

@ -21,6 +21,7 @@
@import "./components/3-page/contact.scss";
@import "./components/3-page/post.scss";
@import "./components/3-page/result.scss";
@import "./components/3-page/404.scss";
@import "./components/2-layout/slick.scss";
@import "./components/2-layout/slick-theme.scss";

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 708 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 758 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 940 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 698 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 911 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 454 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 395 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 396 KiB

View File

@ -35,11 +35,11 @@ window.onscroll = function () {
scrollPosition = Math.round(window.scrollY);
if (scrollPosition > 500) {
document.querySelector('.header').classList.add('active');
document.querySelector('.nav').classList.add('active');
document.querySelector('.header').classList.add('fixed');
document.querySelector('.nav').classList.add('fixed');
} else {
document.querySelector('.header').classList.remove('active');
document.querySelector('.nav').classList.remove('active');
document.querySelector('.header').classList.remove('fixed');
document.querySelector('.nav').classList.remove('fixed');
}
};
@ -74,8 +74,8 @@ if (burger != undefined) {
burger.addEventListener('click', function () {
sleep(2).then(() => {
menu.classList.toggle('active');
header.classList.add('active');
nav.classList.add('active');
header.classList.toggle('active');
nav.classList.toggle('active');
body.classList.toggle('active');
burger.classList.toggle('active');
})
@ -158,3 +158,24 @@ if (user_title != undefined) {
// Accordion =============================
let accordion = document.getElementsByClassName("accord");
// let i;
// let e;
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.classList.remove("active")
} else {
panel.style.maxHeight = "100000px";
panel.classList.add("active")
}
});
}
// Accordion end =========================

View File

@ -0,0 +1,44 @@
title = "404"
url = "/404"
layout = "default"
is_hidden = 0
==
<!-- Error 404 ========================== -->
<section class="error">
<div class="auto_container">
<div class="error_wrap">
<div class="error_box">
<div class="error_icon">
<img src="{{ 'assets/images/404.png'|theme }}" alt="404-icon">
</div>
<div class="error_info">
<h2 class="error_sup-title">
404
</h2>
<h4 class="error_title">
Что то не так
</h4>
<p class="error_txt">
Этой страницы не существует, либо вы перешли по не коректной ссылке
</p>
<a href="{{'home'|page }}" class="error_link">
Перейти на главную страницу
<span>
<svg width="14" height="13" viewBox="0 0 14 13" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1.16732 7.33342H11.0507L8.02565 10.9668C7.95561 11.051 7.90286 11.1482 7.8704 11.2529C7.83794 11.3576 7.82641 11.4676 7.83647 11.5767C7.85678 11.797 7.9638 12.0003 8.13398 12.1418C8.30416 12.2832 8.52356 12.3513 8.74392 12.3309C8.96428 12.3106 9.16753 12.2036 9.30898 12.0334L13.4756 7.03342C13.5037 6.99365 13.5288 6.95187 13.5507 6.90842C13.5507 6.86675 13.5923 6.84175 13.609 6.80008C13.6468 6.70453 13.6665 6.60282 13.6673 6.50008C13.6665 6.39734 13.6468 6.29563 13.609 6.20008C13.609 6.15842 13.5673 6.13342 13.5507 6.09175C13.5288 6.0483 13.5037 6.00652 13.4756 5.96675L9.30898 0.96675C9.23063 0.872681 9.13251 0.797031 9.02161 0.74518C8.91071 0.693329 8.78974 0.666551 8.66732 0.66675C8.47261 0.666369 8.28391 0.734182 8.13398 0.858416C8.0496 0.928374 7.97985 1.01429 7.92872 1.11125C7.8776 1.2082 7.8461 1.31429 7.83604 1.42344C7.82597 1.53259 7.83754 1.64265 7.87008 1.74732C7.90262 1.85199 7.95548 1.94921 8.02565 2.03342L11.0507 5.66675H1.16732C0.946304 5.66675 0.734342 5.75455 0.578062 5.91083C0.421782 6.06711 0.333984 6.27907 0.333984 6.50008C0.333984 6.7211 0.421782 6.93306 0.578062 7.08934C0.734342 7.24562 0.946304 7.33342 1.16732 7.33342Z"
fill="#292929" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Error 404 end ====================== -->

View File

@ -5,122 +5,6 @@ function onStart(){
}
?>
==
<!-- <div class="auto_container">
<div class="header_wrap">
<div class="header_row">
<div class="header_item">
<div class="burger">
<span></span>
</div>
<a href="{{ 'about'|page}}" class="header_item-link m-rl"> Подробней о нас </a>
<a href="{{ 'contact'|page}}" class="header_item-link">
<span>
<svg
width="18"
height="14"
viewBox="0 0 18 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.8332 0.333252H3.1665C2.50346 0.333252 1.86758 0.596644 1.39874 1.06549C0.929896 1.53433 0.666504 2.17021 0.666504 2.83325V11.1666C0.666504 11.8296 0.929896 12.4655 1.39874 12.9344C1.86758 13.4032 2.50346 13.6666 3.1665 13.6666H14.8332C15.4962 13.6666 16.1321 13.4032 16.6009 12.9344C17.0698 12.4655 17.3332 11.8296 17.3332 11.1666V2.83325C17.3332 2.17021 17.0698 1.53433 16.6009 1.06549C16.1321 0.596644 15.4962 0.333252 14.8332 0.333252ZM14.2748 1.99992L8.99984 5.95825L3.72484 1.99992H14.2748ZM14.8332 11.9999H3.1665C2.94549 11.9999 2.73353 11.9121 2.57725 11.7558C2.42097 11.5996 2.33317 11.3876 2.33317 11.1666V3.04158L8.49984 7.66658C8.64408 7.77477 8.81953 7.83325 8.99984 7.83325C9.18015 7.83325 9.35559 7.77477 9.49984 7.66658L15.6665 3.04158V11.1666C15.6665 11.3876 15.5787 11.5996 15.4224 11.7558C15.2661 11.9121 15.0542 11.9999 14.8332 11.9999Z"
fill="white"
/>
</svg>
</span>
Контакты
</a>
</div>
<a href="{{ 'home'|page}}" class="logo">
<img src="{{ 'assets/images/logo.png'|theme }}" alt="logo"/>
</a>
<div class="header_item">
{% if user %}
<div class="user">
<h6 class="user_title">
{{user.name}}
<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>
{% endif %}
<a href="#" class="header_item-link m-rl">
<span>
<svg
width="16"
height="14"
viewBox="0 0 16 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.0082 1.90825L11.6749 0.408252H10.9915L7.99988 1.74992L5.00821 0.408252H4.96654L4.86654 0.333252H4.36654L1.03321 1.83325C0.86695 1.89696 0.725465 2.01224 0.629488 2.1622C0.533511 2.31217 0.488088 2.48893 0.499876 2.66659V12.8333C0.500108 12.9727 0.535323 13.1098 0.602294 13.2321C0.669266 13.3544 0.765853 13.458 0.883209 13.5333C1.01734 13.6199 1.17353 13.6662 1.33321 13.6666C1.45112 13.666 1.56758 13.6405 1.67488 13.5916L4.66654 12.2499L7.65821 13.5916H7.69988C7.79379 13.6355 7.8962 13.6583 7.99988 13.6583C8.10355 13.6583 8.20596 13.6355 8.29988 13.5916H8.34154L11.3332 12.2499L14.3249 13.5916C14.4322 13.6405 14.5486 13.666 14.6665 13.6666C14.8262 13.6662 14.9824 13.6199 15.1165 13.5333C15.2339 13.458 15.3305 13.3544 15.3975 13.2321C15.4644 13.1098 15.4996 12.9727 15.4999 12.8333V2.66659C15.4995 2.50628 15.453 2.34948 15.3658 2.21498C15.2786 2.08047 15.1544 1.97397 15.0082 1.90825ZM2.16654 3.19992L3.83321 2.45825V10.7916L2.16654 11.5333V3.19992ZM5.49988 2.45825L7.16654 3.19992V11.5333L5.49988 10.7916V2.45825ZM8.83321 3.19992L10.4999 2.45825V10.7916L8.83321 11.5333V3.19992ZM13.8332 11.5333L12.1665 10.7916V2.45825L13.8332 3.19992V11.5333Z"
fill="white"
/>
</svg>
</span>
Схема ТРЦ
</a>
<div class="lang">
<h6 class="lang_current">
<span class="lang_flag">
<img
src="{{ activeLocaleFlag|theme }}"
alt="lang-flag"
/>
</span>
{{activeLocale|upper}}
<span class="lang_arrow">
<svg
width="12"
height="7"
viewBox="0 0 12 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.00039 6.3334C5.80568 6.33378 5.61699 6.26597 5.46706 6.14173L0.467059 1.97507C0.296879 1.83362 0.189858 1.63036 0.169542 1.41C0.149225 1.18965 0.217277 0.970247 0.358726 0.800067C0.500175 0.629886 0.703434 0.522866 0.923789 0.50255C1.14414 0.482233 1.36355 0.550284 1.53373 0.691733L6.00039 4.42507L10.4671 0.825067C10.5523 0.755846 10.6504 0.704152 10.7557 0.672959C10.8609 0.641766 10.9714 0.631688 11.0805 0.643304C11.1897 0.65492 11.2956 0.688001 11.3919 0.740646C11.4883 0.79329 11.5733 0.864461 11.6421 0.950067C11.7184 1.03575 11.7762 1.13627 11.8118 1.24533C11.8475 1.3544 11.8602 1.46965 11.8493 1.58387C11.8383 1.69809 11.8039 1.80881 11.7482 1.90911C11.6925 2.00941 11.6166 2.09711 11.5254 2.16673L6.52539 6.19173C6.37116 6.29633 6.18631 6.34621 6.00039 6.3334Z"
fill="#292929"
/>
</svg>
</span>
</h6>
</div>
</div>
</div>
</div>
</div> -->
<!-- Header =========================== -->
<headar class="header">
<div class="auto_container">

View File

@ -53,17 +53,23 @@ function onStart(){
</li>
<li>
{% if user %}
<!-- <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> -->
<a href="{{ 'profile'|page}}">
<span>
<svg width="16" height="14" viewBox="0 0 16 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15.0082 1.90825L11.6749 0.408252H10.9915L7.99988 1.74992L5.00821 0.408252H4.96654L4.86654 0.333252H4.36654L1.03321 1.83325C0.86695 1.89696 0.725465 2.01224 0.629488 2.1622C0.533511 2.31217 0.488088 2.48893 0.499876 2.66659V12.8333C0.500108 12.9727 0.535323 13.1098 0.602294 13.2321C0.669266 13.3544 0.765853 13.458 0.883209 13.5333C1.01734 13.6199 1.17353 13.6662 1.33321 13.6666C1.45112 13.666 1.56758 13.6405 1.67488 13.5916L4.66654 12.2499L7.65821 13.5916H7.69988C7.79379 13.6355 7.8962 13.6583 7.99988 13.6583C8.10355 13.6583 8.20596 13.6355 8.29988 13.5916H8.34154L11.3332 12.2499L14.3249 13.5916C14.4322 13.6405 14.5486 13.666 14.6665 13.6666C14.8262 13.6662 14.9824 13.6199 15.1165 13.5333C15.2339 13.458 15.3305 13.3544 15.3975 13.2321C15.4644 13.1098 15.4996 12.9727 15.4999 12.8333V2.66659C15.4995 2.50628 15.453 2.34948 15.3658 2.21498C15.2786 2.08047 15.1544 1.97397 15.0082 1.90825ZM2.16654 3.19992L3.83321 2.45825V10.7916L2.16654 11.5333V3.19992ZM5.49988 2.45825L7.16654 3.19992V11.5333L5.49988 10.7916V2.45825ZM8.83321 3.19992L10.4999 2.45825V10.7916L8.83321 11.5333V3.19992ZM13.8332 11.5333L12.1665 10.7916V2.45825L13.8332 3.19992V11.5333Z"
fill="white" />
</svg>
</span>
Профиль
</a>
<!-- <a href="#" data-request="onLogout" data-request-data="redirect: '/'"
class="mobile_profile-link" >Выйти</a> -->
{% else %}
<a href="#" class="modBtn" data-tab="#login">
<h6 class="modBtn" data-tab="#login">
<span>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -86,7 +92,7 @@ function onStart(){
</span>
Вход
</a>
</р6>
{% endif %}
</li>
</ul>
@ -114,64 +120,20 @@ function onStart(){
</button>
</form>
<div class="mobile_buttons">
<div class="row">
<a href="{{'about'|page}}" class="mobile_buttons-link">Подробней о нас</a>
<a href="{{'contact'|page}}" class="mobile_buttons-link">Контакты</a>
<a href="#" class="mobile_buttons-link">Схема ТРЦ</a>
<h4 class="mobile_buttons-link modBtn" data-tab="#login">Вход</h4>
</div>
</div>
<div class="mobile_navs">
<ul class="mobile_navs-list">
<li>
<a href="{{'sales'|page}}" class="mobile_navs-link">Новости и акции</a>
</li>
<li>
<a href="{{ url('/') }}/main-category/{{0}}/all" class="mobile_navs-link">Все магазины</a>
</li>
{% for top_category in categories %}
<li>
<a href="{{ url('/') }}/main-category/{{top_category.id}}/{{top_category.name}}"
class="mobile_navs-link">
{{top_category.name}}
</a>
</li>
{% endfor %}
</ul>
{% if user %}
<span></span>
<a href="">Profile</a>
<div class="mobile_profile">
<h5 class="mobile_profile-title">
{{user.name}}
</h5>
<a href="{{ 'profile'|page}}" class="mobile_profile-link">
Profile
</a>
<a href="#" data-request="onLogout" data-request-data="redirect: '/'"
class="mobile_profile-link" >Выйти</a>
</div>
{% endif %}
</div>
<div class="menu_box">
{% for item in category_settings %}
<div class="menu_col">
{% for key, i in item %}
{% for top_category in top_categories.slice(i.start,1) %}
<div class="menu_col-group">
<a href="{{ url('/') }}/main-category/{{top_category.id}}/{{top_category.name}}" class="footer_col-title">
<a href="{{ url('/') }}/main-category/{{top_category.id}}/{{top_category.name}}" class="menu_col-title accord">
{{top_category.name}}
</a>
{% for category in top_category.getCategories(i.limit) %}
<a href="{{ url('/') }}/category/{{category.id}}/{{category.name}}" class="menu_col-link">{{category.name}}</a>
{% endfor %}
<div class="menu_col-box">
{% for category in top_category.getCategories(i.limit) %}
<a href="{{ url('/') }}/category/{{category.id}}/{{category.name}}" class="menu_col-link">{{category.name}}</a>
{% endfor %}
</div>
</div>
{% endfor %}