Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

landing_page: Fix top navigation dropdowns for mobile screens. 

A recent PR introduced a bug where navigation dropdowns on the
landing page would not open for tablet/mobile screens. This
commit fixes that issue by using the proper media query to
differentiate between touch and mouse-based devices.
This commit is contained in:
Eeshan Garg 2021-07-16 10:03:52 -02:30 committed by Tim Abbott
parent fd0ab7c4ec
commit 13e566815d
1 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
static/js/portico/header.js
View File

@ -6,41 +6,39 @@ $(() => {
return false;
});
const is_touchscreen = window.matchMedia("(hover: none)").matches;
$("body").on("click", (e) => {
const $this = $(e.target);
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
const dropdown_label_was_clicked = $this.closest(".dropdown .dropdown-label").length > 0;
const logged_in_pill_was_clicked = $this.closest(".dropdown .dropdown-pill").length > 0;
const clicked_outside_dropdown_content =
!$this.is(".dropdown ul") && $this.closest(".dropdown ul").length === 0;
if (
$this.closest(".dropdown .dropdown-label").length > 0 &&
!$this.closest("ul .dropdown").hasClass("show") &&
window.matchMedia("(max-width: 686px)").matches
) {
if (dropdown_label_was_clicked && !dropdown_is_shown && is_touchscreen) {
$this.closest("ul .dropdown").addClass("show");
} else if (
$this.closest(".dropdown .dropdown-pill").length > 0 &&
!$this.closest("ul .dropdown").hasClass("show")
) {
} else if (logged_in_pill_was_clicked && !dropdown_is_shown) {
$this.closest("ul .dropdown").addClass("show");
} else if (!$this.is(".dropdown ul") && $this.closest(".dropdown ul").length === 0) {
} else if (clicked_outside_dropdown_content) {
$this.closest("ul .dropdown").removeClass("show");
}
});
$(".nav-dropdown").on("mouseover", (e) => {
const $this = $(e.target);
if (
!$this.closest("ul .dropdown").hasClass("show") &&
window.matchMedia("(min-width: 687px)").matches
) {
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
if (!dropdown_is_shown && !is_touchscreen) {
$this.closest("ul .dropdown").addClass("show");
}
});
$(".nav-dropdown").on("mouseout", (e) => {
const $this = $(e.target);
if (
$this.closest("ul .dropdown").hasClass("show") &&
window.matchMedia("(min-width: 687px)").matches
) {
const dropdown_is_shown = $this.closest("ul .dropdown").hasClass("show");
if (dropdown_is_shown && !is_touchscreen) {
$this.closest("ul .dropdown").removeClass("show");
}
});