From 208d01b1fe9d06770af380f206a0fb9ce42a68db Mon Sep 17 00:00:00 2001
From: kalpitk <kkothari1999@gmail.com>
Date: Mon, 17 Jun 2019 20:45:58 +0530
Subject: [PATCH] Fix sidebar not opening first time
Summary:
On devices with <992px width (sm, xs), sidebar doesn't open when swh-push-menu is clicked first time.
This was due to webapp-utils.js:5 setting collapseSidebar to false by default on all devices.
Reviewers: #reviewers, vlorentz, anlambert
Reviewed By: #reviewers, vlorentz, anlambert
Subscribers: anlambert, vlorentz
Differential Revision: https://forge.softwareheritage.org/D1583
---
swh/web/assets/src/bundles/browse/browse-utils.js | 4 +++-
swh/web/assets/src/bundles/webapp/webapp-utils.js | 10 ++++++++--
swh/web/assets/src/utils/constants.js | 4 ++++
3 files changed, 15 insertions(+), 3 deletions(-)
create mode 100644 swh/web/assets/src/utils/constants.js
diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js
index d7be7839b..3cce9854a 100644
--- 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 @@ $(document).ready(() => {
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
index 50f2d5ed8..340d9d3bc 100644
--- 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 @@ Layout.prototype.fixLayoutHeight = () => {
};
$(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('DOMContentLoaded', () => {
});
$(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 @@ $(document).ready(() => {
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
index 000000000..166e1dc11
--- /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;
--
GitLab