Make App Responsiveness

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,7 +13,7 @@
 - [ ] Format React code with `npm run format`
 - [ ] Format Python code by running `python3 -m black .` in the top-level of this repository
 - [ ] Thoroughly test your code's functionality, including unintended uses.
-- [ ] Thoroughly test your code's responsiveness by rendering it on different devices, browsers, etc.
+- [ ] Fully test the responsiveness of the feature as documented in the [Responsiveness Testing Guidelines](https://github.com/personalrobotics/feeding_web_interface/blob/main/feedingwebapp/ResponsivenessTesting.md). If you deviate from those guidelines, document above why you deviated and what you did instead.
 - [ ] Consider the user flow between states that this feature introduces, consider different situations that might occur for the user, and ensure that there is no way for the user to get stuck in a loop.
 
 **Before merging a pull request**

feedingwebapp/ResponsivenessTesting.md

@@ -0,0 +1,32 @@
+# Methodology for Testing Responsiveness 
+
+After developing an app feature, make sure to test it on the following setups. Total 4 devices as listed below.
+- **Smartphone:** iPhone 14 Plus [Tyler]; Width: 428 & Height: 926
+    - Landscape
+    - Portrait 
+- **Tablet:** iPad Pro (6th gen 12.9") [Tyler]; Width: 1024 & Height: 1366
+    - Landscape
+    - Portrait
+- **External Monitor:** Width: 4096 & Height: 2304
+- **Laptop:** Width: 2560 & Height: 1600
+    - Full-screen 
+    - Half-screen (vertical split)
+    - Quarter screen 
+
+For the smartphone and laptops, test on Chrome, Firefox, Edge, and Safari. For the tablet and monitor, pick one browser to test it on. 
+
+In total, you will run 23 tests (4 browsers * 1 smartphone * 2 orientations + 1 tablet * 2 orientations + 4 browsers * 3 laptops + 1 monitor). 
+
+In portrait, pages should have their content appear on one screen and not require scrolling. In landscape, scrolling may be unavoidable for some screens, but try to rearrange the content horizontally in order to minimize required scrolling. 
+
+If you don’t have the listed devices available for testing, please “Add custom device” in your browser’s responsive design mode using the width and height of the specific device’s resolution below. Please find the appropriate link from below for each browser's documentation on how to do this *except* Safari: 
+
+1. https://www.ios-resolution.com/
+2. https://support.apple.com/kb/SP748?locale=en_US
+3. Adding custom device in Chrome: https://developer.chrome.com/blog/add-a-new-custom-device-as-a-preset/
+4. Adding custom device in Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/
+5. Adding custom device in Firefox:
+https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/#creating-custom-devices
+
+
+

feedingwebapp/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.43.9",
     "react-native-web": "^0.19.4",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.3.0",
     "react-script-tag": "^1.1.2",
     "react-scripts": "^5.0.1",

feedingwebapp/src/Pages/Footer/Footer.jsx

@@ -3,10 +3,10 @@ import React, { useCallback } from 'react'
 import { MDBFooter } from 'mdb-react-ui-kit'
 import Button from 'react-bootstrap/Button'
 import { View } from 'react-native'
+import { useMediaQuery } from 'react-responsive'
 import Row from 'react-bootstrap/Row'
 // PropTypes is used to validate that the used props are in fact passed to this Component
 import PropTypes from 'prop-types'
-
 // Local imports
 import { MOVING_STATE_ICON_DICT } from '../Constants'
 import { useGlobalState } from '../GlobalState'
@@ -29,140 +29,143 @@ import { useGlobalState } from '../GlobalState'
 const Footer = (props) => {
   // Get the current meal state
   const mealState = useGlobalState((state) => state.mealState)
-
-  // Icons and other parameters for the footer buttons
+  // Icons for the footer buttons
   let pauseIcon = '/robot_state_imgs/pause_button_icon.svg'
   let backIcon = props.backMealState ? MOVING_STATE_ICON_DICT[props.backMealState] : ''
   let resumeIcon = MOVING_STATE_ICON_DICT[mealState]
   let phantomButtonIcon = '/robot_state_imgs/phantom_view_image.svg'
-  // Width of Back and Resume buttons
-  let backResumeButtonWidth = '150px'
-  // Height of all Footer buttons
-  let footerButtonHeight = '100px'
+  // Flag to check if the current orientation is portrait
+  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
+  // sizes for footer buttons and icons (width, height, fontsize)
+  let pauseButtonWidth = '98vw'
+  let backResumeButtonWidth = '47vw'
+  let footerHeight = isPortrait ? '10vh' : '10vw'
+  let pauseFontSize = isPortrait ? '7vh' : '7vw'
+  let backResumeFontSize = '6vw'
+  // Margins around footer buttons
+  let footerLeftRightMargin = isPortrait ? '1.6vh' : '1.6vw'
+  let footerTopBottomMargin = isPortrait ? '0.3vh' : '0.3vw'
+  // A single nested object with all footer buttons' properties
+  const buttonConfig = {
+    pause: {
+      text: 'Pause',
+      icon: pauseIcon,
+      disabled: false,
+      variant: 'danger',
+      callback: props.pauseCallback
+    },
+    back: {
+      text: 'Back',
+      icon: backIcon,
+      disabled: false,
+      variant: 'warning',
+      callback: props.backCallback
+    },
+    resume: {
+      text: 'Resume',
+      icon: resumeIcon,
+      disabled: false,
+      variant: 'success',
+      callback: props.resumeCallback
+    },
+    phantom: {
+      text: null,
+      icon: phantomButtonIcon,
+      disabled: true,
+      variant: 'ghost',
+      callback: null
+    }
+  }
 
   /**
-   * Get the pause text and button to render in footer.
+   * Get the footer text and button to render in footer.
    *
-   * @returns {JSX.Element} the pause text and button
+   * @param {number} config - a single nested object with properties of
+   *
+   * @returns {JSX.Element} the footer text and button
    */
-  const renderPauseButton = useCallback(
-    (callback) => {
+  const renderFooterButton = useCallback(
+    (config) => {
       return (
         <>
-          <Row className='justify-content-center mx-auto'>
-            <p className='transitionMessage' style={{ marginBottom: '0', fontSize: '170%', color: 'white', fontWeight: 'bold' }}>
-              Pause
-            </p>
-            {/* Icon to pause */}
+          <Row className='justify-content-center'>
             <Button
-              variant='danger'
-              onClick={callback}
-              style={{ marginLeft: '10', marginRight: '10', marginTop: '0', width: '350px', height: { footerButtonHeight } }}
+              variant={config.variant}
+              disabled={config.disabled}
+              onClick={config.callback}
+              style={{
+                backgroundColor: config.text === null ? 'transparent' : null,
+                border: 'none',
+                marginTop: footerTopBottomMargin,
+                marginLeft: footerLeftRightMargin,
+                marginRight: footerLeftRightMargin,
+                marginBottom: footerTopBottomMargin,
+                width: config.text === 'Pause' ? pauseButtonWidth : backResumeButtonWidth,
+                height: footerHeight,
+                justifyContent: 'center',
+                alignItems: 'center',
+                '--bs-btn-padding-y': '0rem',
+                '--bs-btn-padding-x': '0rem'
+              }}
             >
-              <img style={{ width: '135px', height: '90px' }} src={pauseIcon} alt='pause_icon' className='center' />
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'center'
+                }}
+              >
+                <View style={{ flex: 1, justifyContent: 'center' }}>
+                  <p
+                    className='transitionMessage'
+                    style={{
+                      marginBottom: '0',
+                      fontSize: config.text === 'Pause' ? pauseFontSize : backResumeFontSize,
+                      color: 'black',
+                      fontWeight: 'bold',
+                      padding: '0',
+                      textAlign: 'right'
+                    }}
+                  >
+                    {config.text}
+                  </p>
+                </View>
+                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start' }}>
+                  <div style={{ textAlign: 'left' }}>
+                    <img
+                      style={{
+                        width: '100%',
+                        height: footerHeight
+                      }}
+                      src={config.icon}
+                      alt='icon_img'
+                    />
+                  </div>
+                </View>
+              </View>
             </Button>
           </Row>
         </>
       )
     },
-    [pauseIcon, footerButtonHeight]
-  )
-
-  /**
-   * Get the back text and button to render in footer.
-   *
-   * @returns {JSX.Element} the back text and button
-   */
-  const renderBackButton = useCallback(
-    (callback) => {
-      return (
-        <>
-          <p className='transitionMessage' style={{ marginBottom: '0', fontSize: '170%', color: 'white', fontWeight: 'bold' }}>
-            Back
-          </p>
-          {/* Icon to move to previous state */}
-          <Button
-            variant='warning'
-            onClick={callback}
-            style={{ marginLeft: 10, marginRight: 10, width: { backResumeButtonWidth }, height: { footerButtonHeight } }}
-          >
-            <img style={{ width: '120px', height: '72px' }} src={backIcon} alt='back_icon' className='center' />
-          </Button>
-        </>
-      )
-    },
-    [backIcon, backResumeButtonWidth, footerButtonHeight]
-  )
-
-  /**
-   * Get the resume text and button to render in footer.
-   *
-   * @returns {JSX.Element} the resume text and button
-   */
-  const renderResumeButton = useCallback(
-    (callback) => {
-      return (
-        <>
-          <p className='transitionMessage' style={{ marginBottom: '0', fontSize: '170%', color: 'white', fontWeight: 'bold' }}>
-            Resume
-          </p>
-          {/* Icon to resume current state */}
-          <Button
-            variant='success'
-            onClick={callback}
-            style={{ marginLeft: 10, marginRight: 10, width: { backResumeButtonWidth }, height: { footerButtonHeight } }}
-          >
-            <img style={{ width: '120px', height: '72px' }} src={resumeIcon} alt='resume_icon' className='center' />
-          </Button>
-        </>
-      )
-    },
-    [resumeIcon, backResumeButtonWidth, footerButtonHeight]
+    [backResumeButtonWidth, pauseButtonWidth, pauseFontSize, backResumeFontSize, footerHeight, footerLeftRightMargin, footerTopBottomMargin]
   )
 
-  /**
-   * Get the phantom view to render in footer. This is used as a placeholder
-   * when the back button or resume button are disabled.
-   *
-   * @returns {JSX.Element} the phantom view
-   */
-  let renderPhantomButton = function () {
-    return (
-      <>
-        <Button
-          variant='ghost'
-          disabled={true}
-          style={{
-            backgroundColor: 'transparent',
-            border: 'none',
-            marginLeft: 10,
-            marginRight: 10,
-            width: { backResumeButtonWidth },
-            height: { footerButtonHeight }
-          }}
-        >
-          <img style={{ width: '120px', height: '72px' }} src={phantomButtonIcon} alt='phantom_button_img' className='center' />
-        </Button>
-      </>
-    )
-  }
-
   // Render the component
   return (
-    <>
-      <MDBFooter bgColor='dark' className='text-center text-lg-left fixed-bottom'>
-        <div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
+    <View>
+      <MDBFooter bgColor='dark' className='text-center text-lg-left' style={{ width: '100vw' }}>
+        <div className='text-center' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)', paddingBottom: '5px', paddingTop: '5px' }}>
           {props.paused ? (
             <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
-              <View>{props.backCallback ? renderBackButton(props.backCallback) : renderPhantomButton()}</View>
-              <View>{props.resumeCallback ? renderResumeButton(props.resumeCallback) : renderPhantomButton()}</View>
+              <View>{props.backCallback ? renderFooterButton(buttonConfig.back) : renderFooterButton(buttonConfig.phantom)}</View>
+              <View>{props.resumeCallback ? renderFooterButton(buttonConfig.resume) : renderFooterButton(buttonConfig.phantom)}</View>
             </View>
           ) : (
-            renderPauseButton(props.pauseCallback)
+            renderFooterButton(buttonConfig.pause)
           )}
         </div>
       </MDBFooter>
-    </>
+    </View>
   )
 }
 Footer.propTypes = {