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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -80,7 +80,7 @@ function onStart(){
{{shop.open_time}}
</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>
<svg width="18" height="17" viewBox="0 0 18 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -92,7 +92,7 @@ function onStart(){
+993 {{shop.phone}}
</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>
<svg width="16" height="15" viewBox="0 0 16 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
@ -108,7 +108,7 @@ function onStart(){
</svg>
</span>
{{shop.instagram_name}}
</a>
</h6>
</div>
<div class="post_info-txt wow fadeInUp" data-wow-duration=".3s" data-wow-delay=".23s">
{{shop.description}}
@ -136,26 +136,7 @@ function onStart(){
<div class="post_slider">
{% for shop in others %}
<div class="rest_item wow fadeInRight" data-wow-duration=".3s"
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>
{% partial 'home/shop_item' shop=shop %}
{% endfor %}
</div>

View File

@ -1,22 +1,20 @@
==
<a href="{{ url('/') }}/shop/{{shop.id}}" >
<div class="rest_item">
<div class="rest_item-photo">
<img src="{{shop.badge.path}}" alt="restaurant-photo" />
</div>
<a href="{{ url('/') }}/shop/{{shop.id}}" class="rest_item">
<div class="rest_item-photo">
<img src="{{shop.badge.path}}" alt="restaurant-photo" />
</div>
<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-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>
<a>
</a>
<div class="rest_item-row">
<div class="rest_item-floor">
{{shop.floor}} Этаж
</div>
</div>
</div>