gristlabs_grist-core/app/client/ui/viewport.ts
Dmitry S 586b6568af (core) Add viewport meta tag conditionally, and show a toggle for it on small devices.
Summary:
- Enable narrow-screen layout for home page
- Clean up margins/spacing on small-screen home page
- Use "<768" as small-screen condition rather than "<=768".
- Include meta-viewport tag conditionally, off by default.
- Include "Toggle Mobile Mode" option in AccountMenu to toggle it on.
- In a test, add an after() clause to restore window size even when test fails

Test Plan: Only tested manually on iPhone (Safari & FF).

Reviewers: paulfitz

Reviewed By: paulfitz

Subscribers: cyprien

Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 14:54:02 -05:00

21 lines
598 B
TypeScript

import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
import {dom} from 'grainjs';
export const viewportEnabled = localStorageBoolObs('viewportEnabled');
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, () =>
dom('meta', {name: "viewport", content: "width=device-width,initial-scale=1.0"})
)
);
}