Merge pull request #3 from nemac/selfservice-mobile

Selfservice mobile
nemac · Dec 5, 2024 · 1f4ab87 · 1f4ab87
2 parents e8cce93 + 3c23357
commit 1f4ab87
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
@@ -58,9 +58,9 @@ export default function Cell({ label, type, key, isSelectable, onRemove }) {
         borderBottomRightRadius: 0,
         borderTopLeftRadius: type === 'community' ? theme.spacing(2) : 0,
         borderBottomLeftRadius: type === 'community' ? theme.spacing(2) : 0,
-        padding: 3,
         bgcolor: key === hoverRow ? 'primary.cellHoverBg' : 'primary.tan',
         height: { xs: 120, md: 50 },
+        minWidth: {xs: 50, md: 150 },
         justifyContent: 'center',
       }}
     >

diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
@@ -3,6 +3,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
+import { Typography } from '@mui/material';
 
 // Styled components
 const AddButton = styled(Button)(({ theme }) => ({
@@ -87,8 +88,12 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         startIcon={<PlusIcon>+</PlusIcon>}
+        sx={{ width: "100%" }}
       >
-        Add another {option}
+        <Typography sx={{ display: {xs: 'none', md: 'inherit'}, fontSize: '.875rem' }}>
+          Add another&nbsp;
+        </Typography>
+        {option}
       </AddButton>
 
       <StyledMenu

diff --git a/src/components/HeaderBox.jsx b/src/components/HeaderBox.jsx
@@ -6,7 +6,6 @@ import { styled } from "@mui/material/styles";
 const HeaderBox = styled(Box)(({ theme }) => ({
   height: '200px',
   alignContent: 'center',
-  textAlign: 'center',
 }));
 
 export default HeaderBox;

diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
@@ -14,9 +14,9 @@ const matchVals = (commCats, practCats) => {
   return commCats.map((commCat) => practCats.includes(commCat));
 };
 
+// Person icon (mobile), school icon (mobile)
 const StyledBox = styled(Box)({
   height: 45,
-  maxWidth: '80%',
 });
 
 function StrTrainedBadge({ isTrained }) {
@@ -35,7 +35,10 @@ function StrTrainedBadge({ isTrained }) {
             xs: 'primary.lightBlue',
             md: 'primary.main',
           },
-          color: 'primary.lightGray',
+          color: {
+            xs: 'primary.main',
+            md: 'primary.lightGray',
+          },
           flexGrow: 'space-around',
           verticalAlign: 'middle',
           justifyContent: 'center',
@@ -80,7 +83,18 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
   };
 
   return (
-    <HeaderBox
+    <HeaderBox 
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '80%',
+        margin: '0 auto',
+        display: {
+          md: 'flex',
+          xs: 'block'
+        },
+      }}
       ref={headerRef}
       onMouseEnter={onMouseEnter}
     >
@@ -102,6 +116,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
               xs: 'inherit',
               md: 'none',
             },
+            color: "primary.lightBlue",
           }}
         />
       </StyledBox>
@@ -116,6 +131,8 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           overflow: 'hidden',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
+          textWrap: 'auto',
+          textAlign: 'center',
         }}
       >
         {practitioner.org}
@@ -154,7 +171,7 @@ export default function PractitionerPane({ community, practitioner, poppedPracti
   return (
     <Box
       style={{
-        flex: '1 1 33%',
+        // flex: '1 1 33%',
         backgroundColor: theme.palette.primary.lightGray,
       }}
     >

diff --git a/src/components/svg/PractMatchSymbol.jsx b/src/components/svg/PractMatchSymbol.jsx
@@ -15,13 +15,9 @@ export default function PractMatchSymbol({ label }) {
       <Box
         sx={{
           width: {
-            xs: 20,
+            xs: "clamp(20px, 75%, 40px)",
             md: 25
-          },
-          height: {
-            xs: 20,
-            md: 25
-          }
+          }    
         }} 
       >
         {

diff --git a/src/pages/SelfServicePage.jsx b/src/pages/SelfServicePage.jsx
@@ -114,16 +114,19 @@ export default function SelfServicePage() {
                 gap={1}
                 sx={{ bgcolor: theme.palette.primary.lightGray }}
               >
-                <Box mt={3}>
+
+                {/* My Community */}
+                <Box mt={3} sx={{ flex: "1 1 250px;" }}>
                   <CommunityPane
                     community={community}
                     isSelectable={true}
                     availableOptions={availableOptions}
                     onSelectionChange={handleSelectionChange}
                   />
                 </Box>
+
                 {/* Practitioners */}
-                <Stack sx={{ width: '60%', pl: 0 }}>
+                <Stack sx={{ width: '60%', pl: 0, flex: "3 2 auto" }}>
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, mt: 1 }}>
                     <Box sx={{ width: '100%', textAlign: 'center' }}>
                       {' '}
@@ -140,6 +143,7 @@ export default function SelfServicePage() {
                         Matched Practitioners
                       </Typography>
                     </Box>
+
                     {hasMorePractitioners && (
                       <Box
                         sx={{
@@ -171,24 +175,24 @@ export default function SelfServicePage() {
                       </Box>
                     )}
                   </Box>
+                  {/* matched practitioners list */}
                   <Stack
                     direction="row"
-                    gap={1}
                     sx={{
                       pb: 2,
                       width: '100%',
+                      gap: {
+                        sm: "4px",
+                        md: "8px"
+                      },
+                      overflowX: "auto",
                     }}
                   >
+                    {/* each individual box */}
                     {visiblePractitioners.map((pract, index) => (
                       <Box
                         key={index}
-                        sx={{
-                          width: `${100 / 3}%`,
-                          minWidth: '250px',
-                          flexGrow: 1,
-                          flexShrink: 0,
-                          flexBasis: 0,
-                        }}
+                        sx={{ flex: "1 1 0" }}
                       >
                         <PractitionerPane
                           community={community}
@@ -199,7 +203,7 @@ export default function SelfServicePage() {
                       </Box>
                     ))}
                   </Stack>
-                </Stack>
+                 </Stack>
               </Stack>
             </Container>
           </SetHoverRowContext.Provider>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,13 +15,9 @@ export default function PractMatchSymbol({ label }) { @@
           <Box
             sx={{
               width: {
-                xs: 20,
+                xs: "clamp(20px, 75%, 40px)",
                 md: 25
-              },
-              height: {
-                xs: 20,
-                md: 25
-              }
+              }
             }}
           >
             {
@@ Expand Down @@