Some ui fixes
This commit is contained in:
parent
7ef34e8fd4
commit
aa083e741e
|
|
@ -77,7 +77,11 @@
|
|||
// Navs ================
|
||||
.nav {
|
||||
&.active {
|
||||
top: 90px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ======================
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue