We found a bug in our top-level nav on certain Samsung phones where
tapping on the dropdowns didn't do anything. As it turns out, trying
to figure out whether touch is enabled on a device using CSS media
queries such as `(hover: none)` is very tricky business! While it
may work on some devices, it may break spectacularly on others.
This commit presents a potential solution to this. Media queries
about widths are a lot more device-independent than hover media
queries. So, this is what we do now:
- We fire click events regardless of whether the top-level nav is in
the vertical sidebar orientation or the horizontal orientation.
Since we are no longer dependent on hover media queries for click
events, this fixes the mobile bug mentioned above because taps or
clicks will always work regardless of device.
- The mouseover/mouseout events are only fired when the header is
in the horizontal orientation and the primary input mechanism
supports hovering over elements. This allows us to support hovering
over menus on desktop. However, since mouseout/mouseover events are
irrelevant for mobile, we are fine on that front since clicks/taps
will still work.
NOTE that the above approach also takes care of weird edge cases where
you have a horizontal orientation on a device such as the iPad Pro that
is flipped in the horizontal position. Since clicks work anyway, these
edge cases are largely taken care of.
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 restructures the top-level navigation on our landing
page using dropdowns in a manner that allows us to advertise some
important pages to our visitors:
- Use cases for companies, open source projects, and communities.
- Miscellaneous pages about the product are now accessible from the
"Product" dropdown.
- "Resources" are a few key resources our users may want to consult
if they need help or support.
ES and TypeScript modules are strict by default and don’t need this
directive. ESLint will remind us to add it to new CommonJS files and
remove it from ES and TypeScript modules.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Prettier would do this anyway, but it’s separated out for a more
reviewable diff. Generated by ESLint.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit was originally automatically generated using `tools/lint
--only=eslint --fix`. It was then modified by tabbott to contain only
changes to a set of files that are unlikely to result in significant
merge conflicts with any open pull request, excluding about 20 files.
His plan is to merge the remaining changes with more precise care,
potentially involving merging parts of conflicting pull requests
before running the `eslint --fix` operation.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This creates a dropdown in place of the normal register/login links
you get when logged out, with an option to go to the app or log out if
that appears you click on the avatar.
A bit more work is needed to make this look really good, but it's a
great start.
Eeshan Garg
Anders Kaseorg
Anders Kaseorg
Vishnu Ks
Brock Whittaker