M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
sass/css/_layout.scss
View File

@ -224,4 +224,15 @@ 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%;
}
}

12
static/css/order-hardware.css
View File

@ -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)

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

File diff suppressed because one or more lines are too long

16
static/js/shop.jsx
View File

@ -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">

31
templates/_base.html
View File

@ -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 %}