NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] odoo_theme: hide searchbar on scroll in mobile

Browse Source
This commit is contained in:
Elisabeth Dickinson 2021-05-25 14:36:55 +02:00 committed by Antoine Vandevenne (anv)
parent e1adedc2e5
commit 74e7da5694
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
extensions/odoo_theme/static/js/menu.js
View File

@ -47,14 +47,21 @@
}
};
document.addEventListener('scroll', () => {
// Allow to hide the searchbar when the page is scrolled in mobile.
_flagHeaderWithScrollPosition();
});
/**
* Mobile: Toggle open/close sidebar on click of nav button (&& on swipe left to right?).
*
*
* `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
* the `show` (Bootstrap) class.
* Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
* Sidebar receives the `o-mobile-show` class.
* Add/Remove the class `o_header_scrolled` on the header according to the scroll position.
*/
const _flagHeaderWithScrollPosition = () => {
const header = document.querySelector('.o_main_header');
if (this.scrollY > 0) {
header.classList.add('o_header_scrolled');
} else {
header.classList.remove('o_header_scrolled');
}
};
})();

14
extensions/odoo_theme/static/style.scss
View File

@ -73,15 +73,27 @@ header.o_main_header{
}
.o_search_wrapper {
display: flex;
opacity: 1;
@include transition(opacity .3s);
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: 100%;
padding: 0 10px;
top: calc(100% + 30px);
top: calc(100% + 15px);
}
}
&.o_header_scrolled {
.o_search_wrapper {
@include media-breakpoint-down(lg) {
opacity: 0;
}
}
}
.highlight-link {
margin-bottom: 0;
padding: 0 1rem;