mirror of
https://github.com/gristlabs/grist-core.git
synced 2026-03-02 04:09:24 +00:00
(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:
@@ -157,10 +157,12 @@ export const testId: TestId = makeTestId('test-');
|
||||
// Min width for normal screen layout (in px). Note: <768px is bootstrap's definition of small
|
||||
// screen (covers phones, including landscape, but not tablets).
|
||||
const mediumScreenWidth = 768;
|
||||
const smallScreenWidth = 576; // Anything below this is extra-small (e.g. portrait phones).
|
||||
|
||||
// Fractional width for max-query follows https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
|
||||
export const mediaSmall = `(max-width: ${mediumScreenWidth - 0.02}px)`;
|
||||
export const mediaNotSmall = `(min-width: ${mediumScreenWidth}px)`;
|
||||
export const mediaXSmall = `(max-width: ${smallScreenWidth - 0.02}px)`;
|
||||
|
||||
export const mediaDeviceNotSmall = `(min-device-width: ${mediumScreenWidth}px)`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user