forked from M-Labs/web2019
feat(mobile/landscape): Makes disappear the header menu
This commit is contained in:
parent
475eb92d82
commit
952eccd560
|
@ -225,3 +225,14 @@ img.kf25 {
|
|||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (min-width: 1200px) {
|
||||
}
|
||||
|
||||
/*
|
||||
##Device = Low Resolution Tablets, Mobiles (Landscape)
|
||||
##Screen = B/w 481px to 767px
|
||||
*/
|
||||
@media (min-width: 481px) and (max-width: 767px) {
|
||||
|
||||
#root-shop, #root-shop>div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
|
@ -184,7 +184,8 @@
|
|||
}
|
||||
|
||||
#root-shop, #root-shop>div {
|
||||
height: calc(100vh - 50px);
|
||||
/*height: calc(100vh - 50px);*/
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root-shop .productItem {
|
||||
|
@ -255,8 +256,10 @@
|
|||
border-top-right-radius: 30px;
|
||||
width: 80px;
|
||||
padding: 5px 0 5px 10px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: -25px;
|
||||
margin-left: -1.3rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#root-shop .mobileBtnDisplaySideMenu button,
|
||||
|
@ -296,6 +299,7 @@
|
|||
background-color: rgba(0, 0, 0, .8);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#root-shop .layout>aside.aside {
|
||||
|
@ -321,6 +325,10 @@
|
|||
flex: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.should-disappear {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
##Device = Most of the Smartphones Mobiles (Portrait)
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -756,14 +756,6 @@ class OrderPanel extends React.PureComponent {
|
|||
return (
|
||||
<section className="panel">
|
||||
|
||||
{isMobile ? (
|
||||
<div className="mobileBtnDisplaySideMenu">
|
||||
<button onClick={onClickToggleMobileSideMenu}>
|
||||
<img src="/images/shop/icon-add.svg" alt="add" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<h2>{title}</h2>
|
||||
|
||||
<div className="control">
|
||||
|
@ -772,6 +764,14 @@ class OrderPanel extends React.PureComponent {
|
|||
{crateMode}
|
||||
</div>
|
||||
|
||||
{isMobile ? (
|
||||
<div className="mobileBtnDisplaySideMenu">
|
||||
<button onClick={onClickToggleMobileSideMenu}>
|
||||
<img src="/images/shop/icon-add.svg" alt="add" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{crate}
|
||||
|
||||
<section className="summary">
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<!-- HEADER -->
|
||||
|
||||
<div class="container-fluid shadow th sticky-top">
|
||||
<div class="container-fluid container-header shadow th sticky-top">
|
||||
|
||||
<header class="container">
|
||||
|
||||
|
@ -83,9 +83,9 @@
|
|||
<div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
|
||||
{% for tmp_page in subsection.pages %}
|
||||
{% if tmp_page.extra.menu_item and tmp_page.extra.menu_item == "th1" %}
|
||||
<a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
|
||||
<a class="dropdown-item pt-2 pb-2 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
|
||||
{% else %}
|
||||
<a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
|
||||
<a class="dropdown-item pt-2 pb-2 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
@ -179,7 +179,7 @@
|
|||
|
||||
<!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
|
||||
|
||||
<script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
|
||||
<script src="{{ get_url(path='js/jquery-3.3.1.min.js', cachebust=true) }}"></script>
|
||||
<script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
|
||||
<script src="{{ get_url(path='js/bootstrap-4.3.1.min.js', cachebust=true) }}"></script>
|
||||
|
||||
|
@ -209,6 +209,29 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var mywindow = $(window);
|
||||
var mypos = mywindow.scrollTop();
|
||||
var up = false;
|
||||
var newscroll;
|
||||
var navbarSupportedContent = $('#navbarSupportedContent');
|
||||
mywindow.scroll(function () {
|
||||
newscroll = mywindow.scrollTop();
|
||||
if (!navbarSupportedContent.hasClass('show')) {
|
||||
if (newscroll > (mypos + 30) && !up) {
|
||||
$('.container-header').stop().fadeOut();
|
||||
up = !up;
|
||||
} else if(newscroll < (mypos + 30) && up) {
|
||||
$('.container-header').stop().fadeIn();
|
||||
up = !up;
|
||||
}
|
||||
}
|
||||
// mypos = newscroll;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% block js %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
Loading…
Reference in New Issue