Browse Source

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

master
sovanna 8 months ago
parent
commit
952eccd560
5 changed files with 58 additions and 14 deletions
  1. +11
    -0
      sass/css/_layout.scss
  2. +10
    -2
      static/css/order-hardware.css
  3. +2
    -0
      static/js/jquery-3.3.1.min.js
  4. +8
    -8
      static/js/shop.jsx
  5. +27
    -4
      templates/_base.html

+ 11
- 0
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%;
}
}

+ 10
- 2
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
- 0
static/js/jquery-3.3.1.min.js
File diff suppressed because it is too large
View File


+ 8
- 8
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">


+ 27
- 4
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 %}



Loading…
Cancel
Save