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 { ParticleFlowBackground } from '../ui/particle_flow/particle_flow_background.js';
       8              : import { CompactNavBar } from './navbar.js';
       9              : 
      10            1 : const NARROW_SCREEN_QUERY = '(max-width: 799px)';
      11              : 
      12            1 : export function useNarrowScreenWarning(settingsReady: boolean, narrowScreenLayout: boolean): boolean {
      13            1 :     const [narrow, setNarrow] = React.useState(() => window.matchMedia(NARROW_SCREEN_QUERY).matches);
      14            1 :     React.useEffect(() => {
      15            1 :         const media = window.matchMedia(NARROW_SCREEN_QUERY);
      16            1 :         const update = () => setNarrow(media.matches);
      17            1 :         update();
      18            1 :         media.addEventListener('change', update);
      19            1 :         return () => media.removeEventListener('change', update);
      20            1 :     }, []);
      21            1 :     return settingsReady && narrow && !narrowScreenLayout;
      22            1 : }
      23              : 
      24            1 : export function NarrowScreenWarning(props: { onEnable: () => void }) {
      25            1 :     return (
      26            1 :         <div className={`${baseStyles.page} ${styles.page}`} data-electron-drag-region>
      27            1 :             <ParticleFlowBackground />
      28            1 :             <CompactNavBar />
      29            1 :             <main className={`${baseStyles.banner_and_content_container} ${styles.foreground}`}>
      30            1 :                 <section className={`${baseStyles.card} ${styles.card}`} aria-labelledby="narrow-screen-title">
      31            1 :                     <div className={baseStyles.card_header}>
      32            1 :                         <div className={baseStyles.card_header_left_container}>
      33            1 :                             <h1 id="narrow-screen-title" className={`${baseStyles.card_header_left_title} ${styles.title}`}>
      34              :                                 Narrow Screen
      35            1 :                             </h1>
      36            1 :                         </div>
      37            1 :                     </div>
      38            1 :                     <div className={baseStyles.card_section}>
      39            1 :                         <div className={`${baseStyles.section_entries} ${styles.description}`}>
      40            1 :                             <p>Narrow screen sizes are not fully supported yet. For the best experience, use a wider window or a desktop browser.</p>
      41            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>
      42            1 :                             <Button variant={ButtonVariant.Primary} onClick={props.onEnable}>
      43              :                                 Enable Narrow Screen Layout
      44            1 :                             </Button>
      45            1 :                         </div>
      46            1 :                     </div>
      47            1 :                 </section>
      48            1 :             </main>
      49            1 :         </div>
      50              :     );
      51            1 : }