Fix layout & tooltips on mobile (#5)

jlfwong · Apr 18, 2024 · 9e1bf21 · 9e1bf21
1 parent 785429f
commit 9e1bf21
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git a/src/app/views/calculator-app-view.tsx b/src/app/views/calculator-app-view.tsx
@@ -9,7 +9,12 @@ export const CalculatorAppView: React.FC<{}> = () => {
   const welcomeFormHasBeenSubmit = useAtomValue(welcomeFormHasBeenSubmitAtom);
 
   return (
-    <Container maxW="1600px" minH="100vh" display="flex" padding={0}>
+    <Container
+      maxW="1600px"
+      minH="100vh"
+      display="flex"
+      padding={{ base: "10px", md: 0 }}
+    >
       {welcomeFormHasBeenSubmit ? <CalculatorView /> : <WelcomeScreenView />}
     </Container>
   );

diff --git a/src/app/views/calculator-view.tsx b/src/app/views/calculator-view.tsx
@@ -74,11 +74,11 @@ export const CalculatorView: React.FC = () => {
       </FormRow>
       <OtherGasAppliancesSelect />
     </FormSectionView>,
+    <EquipmentPurchaseAndInstallFormSectionView key={"equipment"} />,
   ];
 
   if (columns == null || columns > 1) {
     formSections.push(
-      <EquipmentPurchaseAndInstallFormSectionView key={"equipment"} />,
       <UtilityPricesFormSectionView key={"utilityprices"} />,
       <ThermostatFormSectionView key={"thermostat"} />
     );

diff --git a/src/app/views/cards.tsx b/src/app/views/cards.tsx
@@ -45,7 +45,7 @@ const InfoCardView: React.FC<InfoCardViewProps & StackProps> = ({
       w="full"
       bg="white"
       borderRadius={"10px"}
-      p="20px"
+      p={{ base: "5px", md: "20px" }}
       gap={"5px"}
       align="start"
       {...props}

diff --git a/src/app/views/forms.tsx b/src/app/views/forms.tsx
@@ -14,6 +14,7 @@ import {
   type FormLabelProps,
   HStack,
   Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { Box, Heading, Stack } from "@chakra-ui/react";
 import React, { forwardRef, useState } from "react";
@@ -39,7 +40,7 @@ export const FormSectionView: React.FC<FormSectionViewProps> = (props) => {
   }
 
   return (
-    <Stack as="section" gap={0}>
+    <Stack as="section" gap={0} w="full">
       <Box>
         <Heading size="small">{props.title}</Heading>
         <hr />
@@ -80,14 +81,15 @@ interface FormInputProps {
   tooltip?: React.ReactNode;
 }
 
-export const FormInput = forwardRef<HTMLInputElement, FormInputProps & InputProps>(
-  ({ label, tooltip, ...props }, ref) => (
-    <FormControl>
-      <FormLabelWithTooltipOption label={label} tooltip={tooltip} />
-      <Input {...props} ref={ref} />
-    </FormControl>
-  )
-);
+export const FormInput = forwardRef<
+  HTMLInputElement,
+  FormInputProps & InputProps
+>(({ label, tooltip, ...props }, ref) => (
+  <FormControl>
+    <FormLabelWithTooltipOption label={label} tooltip={tooltip} />
+    <Input {...props} ref={ref} />
+  </FormControl>
+));
 interface FormSelectProps {
   label: string;
   tooltip?: React.ReactNode;
@@ -189,15 +191,38 @@ interface InfoTooltipViewProps {
 }
 
 export const InfoTooltipView: React.FC<InfoTooltipViewProps> = (props) => {
+  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
+
+  const isTouchDevice = window.matchMedia(
+    "(hover: none) and (pointer: coarse)"
+  ).matches;
+
   return (
-    <Tooltip
-      hasArrow
-      label={props.message}
-      placement="top"
-      bg="gray.50"
-      color="black"
-    >
-      <QuestionOutlineIcon color={"gray.500"} />
-    </Tooltip>
+    <>
+      <Tooltip
+        hasArrow
+        label={props.message}
+        placement="top"
+        bg="gray.50"
+        color="black"
+        isOpen={isOpen}
+      >
+        <QuestionOutlineIcon
+          color={"gray.500"}
+          onMouseEnter={onOpen}
+          onMouseLeave={onClose}
+          onClick={(ev) => {
+            if (isTouchDevice) {
+              onToggle();
+
+              // Stop propagation to prevent labels from focusing their associated
+            // input elements
+              ev.preventDefault();
+              ev.stopPropagation();
+            }
+          }}
+        />
+      </Tooltip>
+    </>
   );
 };
diff --git a/src/app/views/inputs.tsx b/src/app/views/inputs.tsx
@@ -55,9 +55,10 @@ export const HeatPumpBackupFuelSelect: React.FC = () => {
       tooltip={
         <Stack>
           <p>
-            Canada's cold climate will require your heat pump has a backup heat
-            source. This is either an electric heating coil or a gas furnace
-            that's used in conjunction with the heat pump when it's very cold.
+            Canada's cold climate means your heat pump will typically need a
+            backup heat source. This is either an electric heating coil or a gas
+            furnace that's used in conjunction with the heat pump when it's very
+            cold.
           </p>
           <p>
             For electric backups, smart thermostats will automatically turn on

diff --git a/src/app/views/welcome-screen-view.tsx b/src/app/views/welcome-screen-view.tsx
@@ -30,7 +30,7 @@ const WelcomeFormView: React.FC = () => {
   const buildingGeometry = useAtomValue(buildingGeometryAtom);
 
   return (
-    <Box maxW="1280px" p={"20px"} borderRadius="md">
+    <Box maxW="1280px" p={{ base: 0, md: "20px" }} borderRadius="md">
       <Stack spacing={"20px"}>
         <FormSectionView title="About your home">
           <FormRow>
@@ -168,7 +168,7 @@ const WelcomeMessage: React.FC<{}> = () => {
 export const WelcomeScreenView: React.FC<{}> = () => {
   return (
     <Center h="100vh" w="full">
-      <Flex direction={{ oneColumn: "column", twoColumn: "row" }} gap={"40px"}>
+      <Flex direction={{ base: "column", md: "row" }} gap={"40px"}>
         <Stack>
           <Heading textAlign={"center"}>Heat Pump Calculator 🇨🇦</Heading>
           <WelcomeFormView />