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

Some ui fixes

This commit is contained in:
Amanmyrat 2023-08-14 13:25:34 +05:00
parent 7ef34e8fd4
commit aa083e741e
7 changed files with 90 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,7 +77,11 @@
// Navs ================ // Navs ================
.nav { .nav {
&.active { &.active {
top: 90px; top: 100px;
}
&.fixed {
top: 100px;
} }
} }

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

@ -691,9 +691,11 @@
flex-wrap: wrap; flex-wrap: wrap;
max-width: 1350px; max-width: 1350px;
margin: 0 auto; margin: 0 auto;
position: relative;
&.active { &.active {
display: flex !important; display: flex !important;
animation: tabActive .3s linear;
} }
} }
@ -704,6 +706,8 @@
border: 2px solid rgba(41, 41, 41, 0.5); border: 2px solid rgba(41, 41, 41, 0.5);
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
background: #fff; background: #fff;
display: block;
position: relative;
@include transition; @include transition;
// max-height: 0; // max-height: 0;
@ -712,9 +716,11 @@
&-photo { &-photo {
width: 100%; width: 100%;
height: 290px; height: 290px;
display: block;
img { img {
@include ImgCov; @include ImgCov;
display: block;
} }
} }
@ -855,6 +861,18 @@
} }
} }
@keyframes tabActive {
0% {
top: 40px;
opacity: .3;
}
100% {
top: 0;
opacity: 1;
}
}
// Restaurant end ====================== // Restaurant end ======================

8
themes/berkarar/assets/css/components/3-page/post.scss
View File

@ -30,13 +30,16 @@
padding: 10px 20px; padding: 10px 20px;
background: $yellow; background: $yellow;
border-radius: 5px; border-radius: 5px;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
text-transform: uppercase; text-transform: uppercase;
color: $gray; color: $gray;
margin-right: 30px; margin-right: 30px;
margin: 15px 30px 15px 0; margin: 15px 20px 15px 0;
min-height: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -57,7 +60,7 @@
} }
} }
&:hover { &.hov:hover {
color: $yellow; color: $yellow;
background: $gray; background: $gray;
@ -91,6 +94,7 @@
width: 500px; width: 500px;
// height: 500px; // height: 500px;
margin-left: 60px; margin-left: 60px;
display: block;
img { img {
@include ImgCon; @include ImgCon;

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

@ -1992,11 +1992,14 @@ input[type=date]::-webkit-calendar-picker-indicator {
flex-wrap: wrap; flex-wrap: wrap;
max-width: 1350px; max-width: 1350px;
margin: 0 auto; margin: 0 auto;
position: relative;
} }
.rest_block.active { .rest_block.active {
display: -webkit-box !important; display: -webkit-box !important;
display: -ms-flexbox !important; display: -ms-flexbox !important;
display: flex !important; display: flex !important;
-webkit-animation: tabActive 0.3s linear;
animation: tabActive 0.3s linear;
} }
.rest_item { .rest_item {
width: calc(33.33% - 54px); width: calc(33.33% - 54px);
@ -2004,6 +2007,8 @@ input[type=date]::-webkit-calendar-picker-indicator {
border: 2px solid rgba(41, 41, 41, 0.5); border: 2px solid rgba(41, 41, 41, 0.5);
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
background: #fff; background: #fff;
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;
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; -moz-transition: all 0.2s ease-in-out 0s;
@ -2011,12 +2016,14 @@ input[type=date]::-webkit-calendar-picker-indicator {
.rest_item-photo { .rest_item-photo {
width: 100%; width: 100%;
height: 290px; height: 290px;
display: block;
} }
.rest_item-photo img { .rest_item-photo img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
-o-object-fit: cover; -o-object-fit: cover;
display: block;
} }
.rest_item-info { .rest_item-info {
background: #171717; background: #171717;
@ -2165,6 +2172,27 @@ input[type=date]::-webkit-calendar-picker-indicator {
color: #7D7D7D; color: #7D7D7D;
} }
@-webkit-keyframes tabActive {
0% {
top: 40px;
opacity: 0.3;
}
100% {
top: 0;
opacity: 1;
}
}
@keyframes tabActive {
0% {
top: 40px;
opacity: 0.3;
}
100% {
top: 0;
opacity: 1;
}
}
.tabItem { .tabItem {
display: none; display: none;
} }
@ -2939,7 +2967,8 @@ input[type=date]::-webkit-calendar-picker-indicator {
text-transform: uppercase; text-transform: uppercase;
color: #292929; color: #292929;
margin-right: 30px; margin-right: 30px;
margin: 15px 30px 15px 0; margin: 15px 20px 15px 0;
min-height: 20px;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -2967,14 +2996,14 @@ input[type=date]::-webkit-calendar-picker-indicator {
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; -moz-transition: all 0.2s ease-in-out 0s;
} }
.post_info-cnt:hover { .post_info-cnt.hov:hover {
color: #FFB100; color: #FFB100;
background: #292929; background: #292929;
} }
.post_info-cnt:hover span path { .post_info-cnt.hov:hover span path {
fill: #FFB100; fill: #FFB100;
} }
.post_info-cnt:hover span rect { .post_info-cnt.hov:hover span rect {
stroke: #FFB100; stroke: #FFB100;
} }
.post_info-cnt:last-child { .post_info-cnt:last-child {
@ -2990,6 +3019,7 @@ input[type=date]::-webkit-calendar-picker-indicator {
.post_photo { .post_photo {
width: 500px; width: 500px;
margin-left: 60px; margin-left: 60px;
display: block;
} }
.post_photo img { .post_photo img {
width: 100%; width: 100%;
@ -3652,7 +3682,10 @@ input[type=date]::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
.nav.active { .nav.active {
top: 90px; top: 100px;
}
.nav.fixed {
top: 100px;
} }
.menu.active { .menu.active {
top: 149px; top: 149px;

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

@ -34,7 +34,7 @@ function sleep(time) {
window.onscroll = function () { window.onscroll = function () {
scrollPosition = Math.round(window.scrollY); scrollPosition = Math.round(window.scrollY);
if (scrollPosition > 500) { if (scrollPosition > 200) {
document.querySelector('.header').classList.add('fixed'); document.querySelector('.header').classList.add('fixed');
document.querySelector('.nav').classList.add('fixed'); document.querySelector('.nav').classList.add('fixed');
} else { } else {

27
themes/berkarar/pages/shop.htm
View File

@ -80,7 +80,7 @@ function onStart(){
{{shop.open_time}} {{shop.open_time}}
</h6> </h6>
<a href="tel:+993 61 616161" class="post_info-cnt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".17s"> <a href="tel:+993 61 616161" class="post_info-cnt wow hov fadeInUp" data-wow-duration=".3s" data-wow-delay=".17s">
<span> <span>
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" <svg width="18" height="17" viewBox="0 0 18 17" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -92,7 +92,7 @@ function onStart(){
+993 {{shop.phone}} +993 {{shop.phone}}
</a> </a>
<a href="{{shop.instagram_link}}" class="post_info-cnt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".2s"> <h6 class="post_info-cnt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".2s">
<span> <span>
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" <svg width="16" height="15" viewBox="0 0 16 15" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -108,7 +108,7 @@ function onStart(){
</svg> </svg>
</span> </span>
{{shop.instagram_name}} {{shop.instagram_name}}
</a> </h6>
</div> </div>
<div class="post_info-txt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".23s"> <div class="post_info-txt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".23s">
{{shop.description}} {{shop.description}}
@ -136,26 +136,7 @@ function onStart(){
<div class="post_slider"> <div class="post_slider">
{% for shop in others %} {% for shop in others %}
<div class="rest_item wow fadeInRight" data-wow-duration=".3s" {% partial 'home/shop_item' shop=shop %}
data-wow-delay=".1s">
<a href="{{ url('/') }}/shop/{{shop.id}}" class="rest_item-photo">
<img src="{{shop.badge.path}}" alt="restaurant-photo" />
</a>
<div class="rest_item-info">
<h5 class="rest_item-title">{{shop.name}}</h5>
<p class="rest_item-txt">
{{shop.category.top_category.name}}, {{shop.category.name}}
</p>
<div class="rest_item-row">
<div class="rest_item-floor">
{{shop.floor}} Этаж
</div>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>

10
themes/berkarar/partials/home/shop_item.htm
View File

@ -1,12 +1,13 @@
== ==
<a href="{{ url('/') }}/shop/{{shop.id}}" > <a href="{{ url('/') }}/shop/{{shop.id}}" class="rest_item">
<div class="rest_item">
<div class="rest_item-photo"> <div class="rest_item-photo">
<img src="{{shop.badge.path}}" alt="restaurant-photo" /> <img src="{{shop.badge.path}}" alt="restaurant-photo" />
</div> </div>
<div class="rest_item-info"> <div class="rest_item-info">
<h5 class="rest_item-title">{{shop.name}}</h5> <h5 class="rest_item-title">
{{shop.name}}
</h5>
<p class="rest_item-txt"> <p class="rest_item-txt">
{{shop.category.top_category.name}}, {{shop.category.name}} {{shop.category.top_category.name}}, {{shop.category.name}}
</p> </p>
@ -15,9 +16,6 @@
<div class="rest_item-floor"> <div class="rest_item-floor">
{{shop.floor}} Этаж {{shop.floor}} Этаж
</div> </div>
<a>
</a>
</div>
</div> </div>
</div> </div>
</a> </a>