gristlabs_grist-core/app/client/ui/viewport.ts
Dmitry S d8d1a91beb (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
2021-02-25 11:31:43 -05:00

26 lines
1021 B
TypeScript

import {isIOS} from 'app/client/lib/browserInfo';
import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
import {dom} from 'grainjs';
export const viewportEnabled = localStorageBoolObs('viewportEnabled', true);
export function toggleViewport() {
viewportEnabled.set(!viewportEnabled.get());
if (!viewportEnabled.get()) {
// Removing the meta tag doesn't cause mobile browsers to reload automatically.
location.reload();
}
}
export function addViewportTag() {
dom.update(document.head,
dom.maybe(viewportEnabled, () => {
// For the maximum-scale=1 advice, see https://stackoverflow.com/a/46254706/328565. On iOS,
// it prevents the auto-zoom when an input is focused, but does not prevent manual
// pinch-to-zoom. On Android, it's not needed, and would prevent manual zoom.
const viewportContent = "width=device-width,initial-scale=1.0" + (isIOS() ? ",maximum-scale=1" : "");
return dom('meta', {name: "viewport", content: viewportContent});
})
);
}