Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import * as baseStyles from '../ui/foundations/banner_page.module.css';
       4              : import * as styles from './narrow_screen_warning.module.css';
       5              : 
       6              : import { Button, ButtonVariant } from '../ui/foundations/button.js';
       7              : import { CompactNavBar } from './navbar.js';
       8              : 
       9            1 : const NARROW_SCREEN_QUERY = '(max-width: 799px)';
      10              : 
      11            1 : export function useNarrowScreenWarning(settingsReady: boolean, narrowScreenLayout: boolean): boolean {
      12            1 :     const [narrow, setNarrow] = React.useState(() => window.matchMedia(NARROW_SCREEN_QUERY).matches);
      13            1 :     React.useEffect(() => {
      14            1 :         const media = window.matchMedia(NARROW_SCREEN_QUERY);
      15            1 :         const update = () => setNarrow(media.matches);
      16            1 :         update();
      17            1 :         media.addEventListener('change', update);
      18            1 :         return () => media.removeEventListener('change', update);
      19            1 :     }, []);
      20            1 :     return settingsReady && narrow && !narrowScreenLayout;
      21            1 : }
      22              : 
      23            1 : export function NarrowScreenWarning(props: { onEnable: () => void }) {
      24            1 :     return (
      25            1 :         <div className={baseStyles.page} data-electron-drag-region>
      26            1 :             <CompactNavBar />
      27            1 :             <main className={`${baseStyles.banner_and_content_container} ${styles.foreground}`}>
      28            1 :                 <section className={`${baseStyles.card} ${styles.card}`} aria-labelledby="narrow-screen-title">
      29            1 :                     <div className={baseStyles.card_header}>
      30            1 :                         <div className={baseStyles.card_header_left_container}>
      31            1 :                             <h1 id="narrow-screen-title" className={`${baseStyles.card_header_left_title} ${styles.title}`}>
      32              :                                 Narrow Screen
      33            1 :                             </h1>
      34            1 :                         </div>
      35            1 :                     </div>
      36            1 :                     <div className={baseStyles.card_section}>
      37            1 :                         <div className={`${baseStyles.section_entries} ${styles.description}`}>
      38            1 :                             <p>Narrow screen sizes are not fully supported yet. For the best experience, use a wider window or a desktop browser.</p>
      39            1 :                             <p>You can enable the experimental narrow screen layout to continue anyway. This hides the warning and can be turned off in the internal app settings.</p>
      40            1 :                             <Button variant={ButtonVariant.Primary} onClick={props.onEnable}>
      41              :                                 Enable Narrow Screen Layout
      42            1 :                             </Button>
      43            1 :                         </div>
      44            1 :                     </div>
      45            1 :                 </section>
      46            1 :             </main>
      47            1 :         </div>
      48              :     );
      49            1 : }