32 lines
1.5 KiB
TypeScript
32 lines
1.5 KiB
TypeScript
import type { ReactElement, ReactNode } from "react";
|
|
|
|
/**
|
|
* The narrowest viewport the Signage management UI is designed for.
|
|
*
|
|
* Signage's dashboard is a timeline editor, a slot table, a live preview, and a display roster shown
|
|
* together. Compressing that into a phone would not make it usable, it would make it a different
|
|
* product — the mobile application this release deliberately does not build. So below this width the
|
|
* operator is told plainly where to go instead of being handed a broken layout.
|
|
*
|
|
* The switch is a CSS media query rather than a measured width in JavaScript: both branches are
|
|
* always in the DOM and always in the accessibility tree, so a screen reader and a test find the
|
|
* same content regardless of how the environment reports its viewport.
|
|
*/
|
|
export const SIGNAGE_MIN_DESKTOP_WIDTH_PX = 1024;
|
|
|
|
export function DesktopOnly({ children }: { readonly children: ReactNode }): ReactElement {
|
|
return (
|
|
<>
|
|
<div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
|
|
<h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
|
|
<p className="signage-narrow-notice__body">
|
|
{`Open the Ekklesia Dashboard on a display at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, channels, and playback.`}
|
|
</p>
|
|
</div>
|
|
<div className="signage-desktop" data-testid="signage-desktop">
|
|
{children}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|