diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js --- a/swh/web/assets/src/bundles/browse/browse-utils.js +++ b/swh/web/assets/src/bundles/browse/browse-utils.js @@ -5,6 +5,8 @@ * See top-level LICENSE file for more information */ +import {BREAKPOINT_SM} from 'utils/constants'; + $(document).ready(() => { $('.dropdown-submenu a.dropdown-item').on('click', e => { @@ -24,7 +26,7 @@ html: true, placement: function() { const width = $(window).width(); - if (width < 768) { + if (width < BREAKPOINT_SM) { return 'top'; } else { return 'right'; diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js --- a/swh/web/assets/src/bundles/webapp/webapp-utils.js +++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js @@ -1,6 +1,7 @@ import objectFitImages from 'object-fit-images'; import {Layout} from 'admin-lte'; import {selectText} from 'utils/functions'; +import {BREAKPOINT_MD} from 'utils/constants'; let collapseSidebar = false; let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed'); @@ -23,6 +24,11 @@ }; $(document).on('DOMContentLoaded', () => { + // set state to collapsed on smaller devices + if ($(window).width() < BREAKPOINT_MD) { + collapseSidebar = true; + } + // restore previous sidebar state (collapsed/expanded) if (collapseSidebar) { // hack to avoid animated transition for collapsing sidebar @@ -42,7 +48,7 @@ }); $(document).on('collapsed.lte.pushmenu', event => { - if ($('body').width() > 980) { + if ($('body').width() >= BREAKPOINT_MD) { $('.swh-words-logo-swh').css('visibility', 'visible'); } }); @@ -71,7 +77,7 @@ ensureNoFooterOverflow(); $(window).resize(function() { ensureNoFooterOverflow(); - if ($('body').hasClass('sidebar-collapse') && $('body').width() > 980) { + if ($('body').hasClass('sidebar-collapse') && $('body').width() >= BREAKPOINT_MD) { $('.swh-words-logo-swh').css('visibility', 'visible'); } }); diff --git a/swh/web/assets/src/utils/constants.js b/swh/web/assets/src/utils/constants.js new file mode 100644 --- /dev/null +++ b/swh/web/assets/src/utils/constants.js @@ -0,0 +1,4 @@ +// Constants defining Bootstrap Breakpoints +export const BREAKPOINT_SM = 768; +export const BREAKPOINT_MD = 992; +export const BREAKPOINT_LG = 1200;