[WEB-3397] - Mobile Responsiveness V1

app/components/ChartDateRangeModal.js

@@ -18,9 +18,13 @@ import {
 } from './elements/Dialog';
 import { MediumTitle, Caption, Body1 } from './elements/FontStyles';
 import i18next from '../core/language';
+import { breakpoints } from '../themes/baseTheme';
+import { DesktopOnly } from './mediaqueries';
 
 const t = i18next.t.bind(i18next);
 
+const MOBILE_BREAKPOINT_QUERY = `@media screen and (max-width: ${breakpoints[1]})`;
+
 export const ChartDateRangeModal = (props) => {
   const {
     chartType,
@@ -157,9 +161,13 @@ export const ChartDateRangeModal = (props) => {
         <Box px={3}>
           <Box mb={5}>
             <Body1 mb={2}>{t('Number of days (most recent)')}</Body1>
-            <Flex id="days-chart">
+            <Flex
+              id="days-chart"
+              sx={{ [MOBILE_BREAKPOINT_QUERY]: { flexDirection: 'column' } }}
+            >
               {map(presetDaysOptions, (days, i) => (
                 <Button
+                  sx={{ [MOBILE_BREAKPOINT_QUERY]: { padding: '16px 0', marginBottom: '8px' }, }}
                   mr={2}
                   variant="chip"
                   id={`days-chart-${i}`}
@@ -174,7 +182,7 @@ export const ChartDateRangeModal = (props) => {
               ))}
             </Flex>
           </Box>
-          <Box mb={3}>
+          <DesktopOnly sx={{ marginBottom: 3 }}>
             <Body1 mb={2}>{t('Or select a custom date range ({{maxDays}} days max)', { maxDays })}</Body1>
             <DateRangePicker
               startDate={dates.startDate}
@@ -196,7 +204,7 @@ export const ChartDateRangeModal = (props) => {
                 },
               }}
             />
-          </Box>
+          </DesktopOnly>
           {errors && (
             <Caption mt={2} sx={{ color: 'feedback.danger' }} id="chart-dates-error">
               {errors}

app/components/chart/basics.js

@@ -200,6 +200,12 @@ class Basics extends Component {
       return '';
     }
 
+    const endpointsRange = _.get(props, 'data.data.current.endpoints.range', []);
+
+    if (endpointsRange[0] <= 0 || endpointsRange[1] <= 0) {
+      return '';
+    }
+
     const timePrefs = _.get(props, 'data.timePrefs', {});
     let timezone;
     if (!timePrefs.timezoneAware) {
@@ -210,8 +216,8 @@ class Basics extends Component {
     }
 
     const dtMask = t('MMM D, YYYY');
-    return sundial.formatInTimezone(_.get(props, 'data.data.current.endpoints.range', [])[0], timezone, dtMask) +
-      ' - ' + sundial.formatInTimezone(_.get(props, 'data.data.current.endpoints.range', [])[1] - 1, timezone, dtMask);
+    return sundial.formatInTimezone(endpointsRange[0], timezone, dtMask) +
+      ' - ' + sundial.formatInTimezone(endpointsRange[1] - 1, timezone, dtMask);
   }
 
   isMissingBasics = (props = this.props) => {

app/components/chart/bgLog.js

@@ -82,6 +82,11 @@ class BgLogChart extends Component {
 
   mountChart = (node, props = {}) => {
     this.log('Mounting...');
+
+    // When on mobile, the chart will be hidden and therefore have zero width and height.
+    // This safety check prevents an error from occurring in tideline due to the zeroes.
+    if (!node?.offsetHeight || !node?.offsetWidth) return;
+
     this.chart = chartBgLogFactory(node, props);
     this.chart.node = node;
     this.bindEvents();

app/components/chart/daily.js

@@ -119,7 +119,14 @@ const DailyChart = withTranslation(null, { withRef: true })(class DailyChart ext
 
   mountChart = (props = this.props) => {
     this.log('Mounting...');
-    this.chart = chartDailyFactory(ReactDOM.findDOMNode(this), _.pick(props, this.chartOpts))
+
+    const node = ReactDOM.findDOMNode(this);
+
+    // When on mobile, the chart will be hidden and therefore have zero width and height.
+    // This safety check prevents an error from occurring in tideline due to the zeroes.
+    if (!node?.offsetHeight || !node?.offsetWidth) return;
+
+    this.chart = chartDailyFactory(node, _.pick(props, this.chartOpts))
       .setupPools();
     this.bindEvents();
   };

app/components/chart/header.js

@@ -6,6 +6,8 @@ import { withTranslation } from 'react-i18next';
 import DateRangeRoundedIcon from '@material-ui/icons/DateRangeRounded';
 import PrintRoundedIcon from '@material-ui/icons/PrintRounded';
 import colorPalette from '../../themes/colorPalette';
+import Button from '../elements/Button';
+import { DesktopOnly, MobileOnly } from '../mediaqueries';
 
 import Icon from '../elements/Icon';
 import { Box } from 'theme-ui';
@@ -121,8 +123,10 @@ const Header = withTranslation()(class Header extends Component {
       'patient-data-subnav-hidden': this.props.chartType === 'no-data',
     });
 
+    const canSelectDateRange = _.includes(['basics', 'daily'], this.props.chartType);
+
     return (
-      <Box sx={{ gap: 2 }} className="grid patient-data-subnav">
+      <Box sx={{ gap: 2 }} className="grid patient-data-subnav" data-chart-type={this.props.chartType}>
         <div className="app-no-print patient-data-subnav-left">
             <a href="" className={basicsLinkClass} onClick={this.props.onClickBasics}>{t('Basics')}</a>
             <a href="" className={dayLinkClass} onClick={this.props.onClickOneDay}>{t('Daily')}</a>
@@ -132,24 +136,46 @@ const Header = withTranslation()(class Header extends Component {
         </div>
         <div className="patient-data-subnav-center" id="tidelineLabel">
           {this.renderNavButton(backClass, this.props.onClickBack, this.props.iconBack)}
-          <div className={dateLinkClass}>
-            {this.props.title}
-            {_.includes(['basics', 'daily'], this.props.chartType) && (
-              <Icon
-                variant="default"
-                sx={{
-                  ml: 2,
-                  mt: -1,
-                  color: colorPalette.primary.bluePrimary00,
-                  outline: 'none',
-                  '&:hover': { color: 'grays.6' },
-                }}
-                label="Choose custom date range"
-                icon={DateRangeRoundedIcon}
-                onClick={this.props.onClickChartDates}
-              />
-            )}
-          </div>
+          <DesktopOnly>
+            <div className={dateLinkClass}>
+              <span>{this.props.title}</span>
+              {canSelectDateRange && (
+                <Icon
+                  variant="default"
+                  sx={{
+                    ml: 2,
+                    mt: -1,
+                    color: colorPalette.primary.bluePrimary00,
+                    outline: 'none',
+                    '&:hover': { color: 'grays.6' },
+                  }}
+                  label="Choose custom date range"
+                  icon={DateRangeRoundedIcon}
+                  onClick={this.props.onClickChartDates}
+                />
+              )}
+            </div>
+          </DesktopOnly>
+          <MobileOnly>
+            <div className={dateLinkClass}>
+              {
+                canSelectDateRange
+                ? <Button
+                    onClick={this.props.onClickChartDates}
+                    sx={{
+                      backgroundColor: colorPalette.neutrals.white,
+                      color: colorPalette.primary.blueGreyDark,
+                      border: `1px solid ${colorPalette.primary.blueGreyDark}`,
+                      padding: '8px 48px',
+                      margin: '16px 0',
+                    }}
+                  >
+                    {this.props.title}
+                  </Button>
+                : <Box my={3} sx={{ fontSize: 1 }}>{this.props.title}</Box>
+              }
+            </div>
+          </MobileOnly>
           {this.renderNavButton(nextClass, this.props.onClickNext, this.props.iconNext)}
           {this.renderNavButton(mostRecentClass, this.props.onClickMostRecent, this.props.iconMostRecent)}
         </div>

app/components/chart/settings.js

@@ -9,6 +9,7 @@ import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRo
 import DateRangeRoundedIcon from '@material-ui/icons/DateRangeRounded';
 import AddRoundedIcon from '@material-ui/icons/AddRounded';
 import launchCustomProtocol from 'custom-protocol-detection';
+import { DesktopOnly } from '../mediaqueries';
 
 import {
   bindPopover,
@@ -658,15 +659,18 @@ const Settings = ({
                     {patientData?.dataSources?.length > 0 ? renderDataConnections() : renderDeviceConnectionCard()}
                   </Box>
                 )}
-                <Divider my={4} />
-                <MediumTitle mb={2} sx={{ color: 'black' }}>{t('Therapy Settings')}</MediumTitle>
-
-                {selectedSettingsId ? (
-                  <>
-                    {renderDeviceSettingsSelectionUI()}
-                    {renderChart()}
-                  </>
-                ) : renderMissingSettingsMessage()}
+
+                <DesktopOnly>
+                  <Divider my={4} />
+                  <MediumTitle mb={2} sx={{ color: 'black' }}>{t('Therapy Settings')}</MediumTitle>
+
+                  {selectedSettingsId ? (
+                    <>
+                      {renderDeviceSettingsSelectionUI()}
+                      {renderChart()}
+                    </>
+                  ) : renderMissingSettingsMessage()}
+                </DesktopOnly>
               </Box>
 
               <Button

app/components/datasources/DataConnectionsModal.js

@@ -26,6 +26,7 @@ import { useIsFirstRender, usePrevious } from '../../core/hooks';
 import i18next from '../../core/language';
 import { URL_TIDEPOOL_EXTERNAL_DATA_CONNECTIONS, URL_UPLOADER_DOWNLOAD_PAGE } from '../../core/constants';
 import PatientEmailModal from './PatientEmailModal';
+import { DesktopOnly } from '../mediaqueries';
 
 const t = i18next.t.bind(i18next);
 
@@ -129,7 +130,9 @@ export const DataConnectionsModal = (props) => {
         </DialogTitle>
 
         <DialogContent>
-          <PatientDetails mb={3} patient={patientData} />
+          <DesktopOnly>
+            <PatientDetails mb={3} patient={patientData} />
+          </DesktopOnly>
           <Subheading sx={{ fontWeight: 'bold'}}>{t('Connect a Device Account')}</Subheading>
 
           <Box mb={3}>

app/components/elements/Card/Card.js

@@ -12,6 +12,7 @@ export function Card(props) {
     <Box
       onClick={onClick}
       variant={variant}
+      sx={{ height: '100%' }}
     >
       {bannerImage && (
         <Flex className="card-banner-image">

app/components/elements/Dialog.js

@@ -13,11 +13,14 @@ const t = i18next.t.bind(i18next);
 
 import {
   borders,
+  breakpoints,
   radii,
   space,
   shadows,
 } from '../../themes/baseTheme';
 
+const MOBILE_BREAKPOINT = breakpoints[1];
+
 /* Dialog Title Start */
 export function DialogTitle(props) {
   const {
@@ -101,12 +104,21 @@ const StyledDialogContent = styled(Box)`
   }
 
   overflow-y: auto;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
+    // The (A) title bar and (B) actions footer are each 64px in height
+    min-height: calc(100% - 64px - 64px);
+  }
 `;
 
 export function DialogContent({ sx = {}, ...props }) {
   return <StyledDialogContent
     p={4}
-    sx={{ borderBottom: props.divider ? borders.divider : 'unset', ...sx }}
+    sx={{
+      borderBottom: props.divider ? borders.divider : 'unset',
+      [`@media screen and (max-width: ${breakpoints[1]})`]: { minWidth: '100vw' },
+      ...sx,
+    }}
     {...props}
   />;
 }
@@ -123,8 +135,16 @@ DialogContent.defaultProps = {
 
 /* Dialog Actions Start */
 const StyledDialogActions = styled(Flex)`
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
+    gap: 16px;
+  }
+
   button {
     margin-left: ${space[2]}px;
+
+    @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
+      margin: 0;
+    }
   }
 
   margin-top: 0;
@@ -159,6 +179,12 @@ const StyledDialog = styled(MuiDialog)`
     border: ${borders.modal};
     box-shadow: ${shadows.large};
     border-radius: ${radii.default}px;
+
+    @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
+      margin: 0;
+      height: 100%;
+      max-height: 100%;
+    }
   }
 `;
 

app/components/elements/TextInput.js

@@ -6,14 +6,21 @@ import cx from 'classnames';
 
 import { Caption } from './FontStyles';
 import { Icon } from './Icon';
-import { fontWeights, shadows } from '../../themes/baseTheme';
+import { fontWeights, shadows, breakpoints } from '../../themes/baseTheme';
+
+const MOBILE_BREAKPOINT = breakpoints[1];
 
 const StyledWrapper = styled(Flex)`
   position: relative;
   align-items: center;
 
   > input {
     flex: 1;
+
+    // Below 16px, iOS will zoom in when focusing an input field, which is unwanted behaviour
+    @media screen and (max-width: ${MOBILE_BREAKPOINT}) {
+      font-size: 16px;
+    }
   }
 
   .MuiSvgIcon-root {
@@ -53,6 +60,7 @@ export function TextInput(props) {
     required,
     warning: !error && warning,
   });
+
   return (
     <Box sx={{ width, ...sx }} {...themeProps}>
       {label && (

app/components/invitation/invitation.less

@@ -19,7 +19,8 @@
 
 .invitations {
   list-style-type: none;
-  width: 700px;
+  width: 100%;
+  max-width: 700px;
   margin: 0 auto;
   padding: 0px;
 }

app/components/mediaqueries/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import { breakpoints } from '../../themes/baseTheme';
+import { Box } from 'theme-ui';
+
+const DEFAULT_MOBILE_BREAKPOINT = breakpoints[1];
+
+/**
+ * Renders the children only if the viewport width exceeds the specified breakpoint
+ *
+ * @param {String} [breakpoint] Viewport width below which any children will be hidden (e.g. '512px')
+ * @param {Object} [sx] sx prop from theme-ui
+ */
+export const DesktopOnly = styled(Box)`
+  display: block;
+  @media screen and (max-width: ${props => (props.breakpoint || DEFAULT_MOBILE_BREAKPOINT)}) {
+    display: none;
+  }
+`;
+
+/**
+ * Renders the children only if the viewport width is below the specified breakpoint
+ *
+ * @param {String} [breakpoint] Viewport width above which any children will be hidden (e.g. '512px')
+ * @param {Object} [sx] sx prop from theme-ui
+ */
+export const MobileOnly = styled(Box)`
+  display: none;
+  @media screen and (max-width: ${props => (props.breakpoint || DEFAULT_MOBILE_BREAKPOINT)}) {
+    display: block;
+  }
+`;
+
+export default { DesktopOnly, MobileOnly };