(core) Make mobile the default mode.

Summary:
- Make unsupported browser warning into an unobtrusive one-liner, similar in
  style to notifications.
- Move browser warning details into a support page, linked from "Learn more" link.
- Show different mobile and desktop warnings.
- Once dismissed, remember dismissal for a year rather than just for the session.
- Turn the Sign-In button (for anon users) into a menu (for the sake of exposing
  the Toggle Mobile Mode option)
- Improve styling of HomeIntro screens when on small screen.
- Flip the default for setting mobile viewport to true

Test Plan: Added minor unittest for localStorageBoolObs; fixed other affected tests.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2738
This commit is contained in:
Dmitry S
2021-02-25 11:11:59 -05:00
parent 31ffd21b4e
commit d8d1a91beb
8 changed files with 119 additions and 76 deletions

View File

@@ -39,22 +39,20 @@
</div>
<div id="browser-check-problem" style="display: none;">
<div class="browser-check-wrapper">
<div class="browser-check-message">
<h4>
Grist may not work well in your browser.
</h4>
<p>
The best experience is with modern Firefox or Chrome on the desktop.
Other modern browsers will work to the degree they are standards compliant.
</p>
</div>
<div class="browser-check-options">
<a href="#" id="browser-check-problem-dismiss">Try it anyway</a>
<a href="https://www.mozilla.org/en-US/firefox/new/">Get Firefox</a>
<a href="https://www.google.com/chrome/">Get Chrome</a>
</div>
</div>
<table class="browser-check-wrapper"><tr>
<td class="browser-check-message">
<span class="browser-check-desktop">
Grist works best on modern Firefox or Chrome.
</span>
<span class="browser-check-mobile">
Grist mobile support is a work in progress.
</span>
<a href="https://support.getgrist.com/browser-support" target="_blank">Learn more</a>
</td>
<td>
<div class="browser-check-close" id="browser-check-problem-dismiss">Dismiss</div>
</td>
</tr></table>
</div>
<!-- INSERT CONFIG -->