Merge pull request #229 from CivicDataLab/fix/mobile-responsiveness

Improve mobile responsiveness and layout adjustments

Author: bhavabhuthi

app/[locale]/[state]/analytics/components/analytics-mobile-layout.tsx

@@ -294,10 +294,11 @@ export function AnalyticsMobileLayout({
     <section className="flex h-full flex-col items-center justify-center gap-2 bg-[#FFFF]">
       <div
         className={cn(
-          'relative h-[calc(100dvh_-_140px)] w-full flex-grow flex-col gap-3 overflow-y-scroll '
+          'relative h-[calc(100dvh_-_160px)] w-full flex-grow flex-col gap-3 overflow-y-scroll'
+          // 'sm:h-[calc(100dvh_-_120px)] md:h-[calc(100dvh_-_100px)]'
         )}
       >
-        <div className="fixed top-[56px] z-9 flex h-[6%] w-full items-center bg-[#FFFF] px-4">
+        <div className="fixed top-[56px] z-9 flex h-[8vh] w-full items-center bg-[#FFFF] px-4 sm:h-[6%] sm:px-6 md:h-[5%] md:px-8">
           <FactorList currentState={currentSelectedState} />
           <FilterComp
             timePeriod={timePeriod}
@@ -329,7 +330,7 @@ export function AnalyticsMobileLayout({
         />
       )}
 
-      <div className="sticky bottom-0 flex h-[86px] w-full flex-row justify-between gap-1 bg-baseIndigoSolid1 p-1">
+      <div className="sticky bottom-0 flex h-[8vh] w-full flex-row justify-between gap-1 bg-baseIndigoSolid1 p-1 sm:p-2 md:p-3">
         {buttons.map((button, index) =>
           button.value === 'more' ? (
             // Render Menu for 'More' button

app/[locale]/[state]/analytics/components/map-component.tsx

@@ -49,7 +49,7 @@ export const MapComponent = ({
   const districtCode = params.get('district-code');
 
   const { width } = useWindowSize();
-  const isMobile = width < 768;
+  const isMobile = width < 1023;
 
   const values = [];
   for (let i = 0; i < mapFeatures?.length; i++) {
@@ -281,8 +281,11 @@ export const MapComponent = ({
   return (
     <>
       {' '}
+      {/* <div
+        className={`relative w-full ${isMobile ? 'h-full' : 'h-[98%]'} ${isMobile ? 'pt-[68px]' : ''}`}
+      > */}
       <div
-        className={`relative w-full ${isMobile ? 'h-full' : 'h-[90%]'} ${isMobile ? 'pt-[66px]' : ''}`}
+        className={`relative w-full ${isMobile ? 'h-full pt-[84px] sm:pt-[66px] md:pt-[50px]' : 'h-[95vh]'} sm:h-[85vh] md:h-[86vh]`}
       >
         {' '}
         <MapChart

app/[locale]/[state]/analytics/components/output-window.tsx

@@ -297,7 +297,7 @@ export function OutputWindow({
           </section>
         </aside>
       </MediaRendering>
-      <MediaRendering minWidth={null} maxWidth="1023">
+      <MediaRendering minWidth={null} maxWidth="1024">
         {/* MOBILE  */}
 
         {view === 'map' && (
@@ -307,7 +307,8 @@ export function OutputWindow({
               className={cn(
                 'pb-2 pl-4 pr-4',
                 'bg-surfaceDefault shadow-basicMd',
-                'shadow-inset min-w-[373px] max-w-[380px] shrink-0  flex-row md:block',
+                // 'shadow-inset min-w-[373px] max-w-[380px] shrink-0  flex-row md:block md:w-[90%]',
+                'shadow-inset w-full shrink-0 flex-row md:block md:w-[90%]',
                 'overflow-y-auto border-b-1 border-l-1 border-r-1 border-solid border-borderSubdued',
                 styles.mobileOverlay,
                 region !== null &&
@@ -502,13 +503,11 @@ export function OtherFactorScores({
   return FactorVariables.filter(
     (scoreType: any) => typeof data[scoreType] === 'object'
   ).map((scoreType) => (
-
     <div key={scoreType} className=" flex items-center gap-4">
       {/* //change  */}
       <div className="flex-shrink-0">
         <div className="h-6 w-6">{IconMap[scoreType]}</div>
       </div>
-
       {indicator === 'risk-score' && (
         <Text className="shrink-1 min-w-[200px]">
           {getFactorNameBySlug(factorData, scoreType)}

app/[locale]/[state]/analytics/components/styles.module.scss

@@ -15,7 +15,7 @@
   position: absolute;
   top: 145px;
   right: -100%; /* Hide off-screen initially */
-  z-index: 99999; 
+  z-index: 99999;
   height: calc(100dvh - 30%);
   opacity: 90%;
   box-shadow: var(--shadow-basic-md);
@@ -41,22 +41,22 @@
   min-width: 300px;
 }
 
-.mobileOverlayActive {
-  bottom: 86px;
-  right: 0;
-}
+// .mobileOverlayActive {
+//   bottom: 86px;
+//   right: 0;
+// }
 
-.expandedOverlay {
-  bottom: 86px;
-  height: calc(100dvh - 160px);
-}
+// .expandedOverlay {
+//   bottom: 86px;
+//   height: calc(100dvh - 160px);
+// }
 
-@media (max-width: 480px) {
-  .mobileOverlay {
-    max-width: 100%;
-    min-width: 280px;
-  }
-}
+// @media (max-width: 480px) {
+//   .mobileOverlay {
+//     max-width: 100%;
+//     min-width: 280px;
+//   }
+// }
 
 .bottomDrawer {
   position: absolute;
@@ -95,19 +95,20 @@
 }
 
 .mobileOverlayActive {
-  bottom: 80px;
-  right: 5px;
+  bottom: 8vh;
+  right: 3px;
 }
 
 .expandedOverlay {
-  bottom: 80px;
-  height: calc(100dvh - 160px);
+  bottom: 8vh;
+  height: calc(100dvh - 63px - 8vh);
 }
 
-@media (max-width: 480px) {
+@media (max-width: 1023px) {
   .mobileOverlay {
     max-width: 100%;
     min-width: 280px;
+    bottom: 8vh;
   }
 }