feat(mobile/landscape): Makes disappear the header menu

This commit is contained in:
sovanna 2020-01-15 12:06:18 +01:00
parent 475eb92d82
commit 952eccd560
5 changed files with 58 additions and 14 deletions

View File

@ -225,3 +225,14 @@ img.kf25 {
// Extra large devices (large desktops, 1200px and up) // Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { @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%;
}
}

View File

@ -184,7 +184,8 @@
} }
#root-shop, #root-shop>div { #root-shop, #root-shop>div {
height: calc(100vh - 50px); /*height: calc(100vh - 50px);*/
height: 100%;
} }
#root-shop .productItem { #root-shop .productItem {
@ -255,8 +256,10 @@
border-top-right-radius: 30px; border-top-right-radius: 30px;
width: 80px; width: 80px;
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
margin-bottom: 15px; margin-bottom: -25px;
margin-left: -1.3rem; margin-left: -1.3rem;
position: relative;
z-index: 1;
} }
#root-shop .mobileBtnDisplaySideMenu button, #root-shop .mobileBtnDisplaySideMenu button,
@ -296,6 +299,7 @@
background-color: rgba(0, 0, 0, .8); background-color: rgba(0, 0, 0, .8);
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 10;
} }
#root-shop .layout>aside.aside { #root-shop .layout>aside.aside {
@ -321,6 +325,10 @@
flex: 1; flex: 1;
max-width: 100%; max-width: 100%;
} }
.should-disappear {
display: none!important;
}
} }
/* /*
##Device = Most of the Smartphones Mobiles (Portrait) ##Device = Most of the Smartphones Mobiles (Portrait)

2
static/js/jquery-3.3.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -756,14 +756,6 @@ class OrderPanel extends React.PureComponent {
return ( return (
<section className="panel"> <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> <h2>{title}</h2>
<div className="control"> <div className="control">
@ -772,6 +764,14 @@ class OrderPanel extends React.PureComponent {
{crateMode} {crateMode}
</div> </div>
{isMobile ? (
<div className="mobileBtnDisplaySideMenu">
<button onClick={onClickToggleMobileSideMenu}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
</div>
) : null}
{crate} {crate}
<section className="summary"> <section className="summary">

View File

@ -49,7 +49,7 @@
<!-- HEADER --> <!-- HEADER -->
<div class="container-fluid shadow th sticky-top"> <div class="container-fluid container-header shadow th sticky-top">
<header class="container"> <header class="container">
@ -83,9 +83,9 @@
<div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown"> <div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
{% for tmp_page in subsection.pages %} {% for tmp_page in subsection.pages %}
{% if tmp_page.extra.menu_item and tmp_page.extra.menu_item == "th1" %} {% 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 %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
@ -179,7 +179,7 @@
<!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> --> <!-- <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/popper-1.14.7.min.js', cachebust=true) }}"></script>
<script src="{{ get_url(path='js/bootstrap-4.3.1.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>
<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 %} {% block js %}
{% endblock %} {% endblock %}