chore: model creation mobile responsiveness

hotosm · Nov 28, 2024 · 1ef38a1 · 1ef38a1
1 parent 82dbc60
commit 1ef38a1
Show file tree

Hide file tree

Showing 37 changed files with 3,708 additions and 1,908 deletions.
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/app/providers/map-provider.tsx b/frontend/src/app/providers/map-provider.tsx
@@ -21,7 +21,7 @@ const MapContext = createContext<{
   currentZoom: number;
 }>({
   map: null,
-  setMap: () => { },
+  setMap: () => {},
   terraDraw: undefined,
   drawingMode: DrawingModes.STATIC,
   setDrawingMode: () => DrawingModes,

diff --git a/frontend/src/app/routes/models/confirmation.tsx b/frontend/src/app/routes/models/confirmation.tsx
@@ -14,7 +14,7 @@ export const ModelConfirmationPage = () => {
   const { isEditMode } = useModelsContext();
 
   return (
-    <div className={"col-start-3 col-span-8 flex flex-col gap-y-10"}>
+    <div className={"col-span-12 md:col-start-3 md:col-span-8 flex flex-col gap-y-10"}>
       <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
         <ConfettiExplosion
           force={0.2}
@@ -29,7 +29,7 @@ export const ModelConfirmationPage = () => {
         <p className="text-gray">
           {MODEL_CREATION_CONTENT.confirmation.description}
         </p>
-        <div className="flex items-center justify-between gap-x-4">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
           <Link
             href={`${APPLICATION_ROUTES.MODELS}/${modelId}`}
             title={MODEL_CREATION_CONTENT.confirmation.buttons.goToModel}

diff --git a/frontend/src/app/routes/models/models-list.tsx b/frontend/src/app/routes/models/models-list.tsx
@@ -58,9 +58,9 @@ const ClearFilters = ({
 }) => {
   const canClearAllFilters = Boolean(
     query[SEARCH_PARAMS.searchQuery] ||
-    query[SEARCH_PARAMS.startDate] ||
-    query[SEARCH_PARAMS.endDate] ||
-    query[SEARCH_PARAMS.id],
+      query[SEARCH_PARAMS.startDate] ||
+      query[SEARCH_PARAMS.endDate] ||
+      query[SEARCH_PARAMS.id],
   );
 
   return (

diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -15,10 +15,15 @@ import {
   StartMappingMapComponent,
 } from "@/features/start-mapping/components";
 import { useGetTMSTileJSON } from "@/features/model-creation/hooks/use-tms-tilejson";
-import { APPLICATION_ROUTES, extractTileJSONURL, PREDICTION_API_FILE_EXTENSIONS } from "@/utils";
+import {
+  APPLICATION_ROUTES,
+  extractTileJSONURL,
+  PREDICTION_API_FILE_EXTENSIONS,
+} from "@/utils";
 import { APPLICATION_CONTENTS } from "@/contents";
 import { useMap } from "@/app/providers/map-provider";
 import { BASE_MODELS } from "@/enums";
+import { FullSreenWidthComponent } from "@/components/ui/full-screen";
 
 export const SEARCH_PARAMS = {
   useJOSMQ: "useJOSMQ",
@@ -31,7 +36,7 @@ export type TQueryParams = { [x: string]: string | number | boolean };
 
 export const StartMappingPage = () => {
   const { modelId } = useParams();
-  const { map, currentZoom } = useMap()
+  const { map, currentZoom } = useMap();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const defaultQueries = {
@@ -131,11 +136,11 @@ export const StartMappingPage = () => {
     };
   }, [query, map, currentZoom, trainingDataset, modelId, data]);
 
-
   return (
     <>
       <Head title={APPLICATION_CONTENTS.START_MAPPING.pageTitle(data?.name)} />
       <BackButton />
+
       <div className="min-h-screen md:h-[90vh] flex mt-8 flex-col mb-20">
         <div>
           <ModelHeader
@@ -159,7 +164,7 @@ export const StartMappingPage = () => {
             />
           </div>
         </div>
-        <div className="col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
+        <div className="hidden md:block col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
           <StartMappingMapComponent
             trainingDataset={trainingDataset}
             modelPredictions={modelPredictions}
@@ -171,6 +176,21 @@ export const StartMappingPage = () => {
             modelPredictionsExist={modelPredictionsExist}
           />
         </div>
+
+        <FullSreenWidthComponent>
+          <div className="md:hidden col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
+            <StartMappingMapComponent
+              trainingDataset={trainingDataset}
+              modelPredictions={modelPredictions}
+              setModelPredictions={setModelPredictions}
+              trainingConfig={trainingConfig}
+              oamTileJSONIsError={oamTileJSONIsError}
+              oamTileJSON={oamTileJSON as TileJSON}
+              oamTileJSONError={oamTileJSONError}
+              modelPredictionsExist={modelPredictionsExist}
+            />
+          </div>
+        </FullSreenWidthComponent>
       </div>
     </>
   );

diff --git a/frontend/src/components/layouts/model-forms-layout.tsx b/frontend/src/components/layouts/model-forms-layout.tsx
@@ -19,6 +19,7 @@ import {
   useModelsContext,
 } from "@/app/providers/models-provider";
 import ModelsLayout from "./models-layout";
+import { BackButton } from "../ui/button";
 
 const pages: {
   id: number;
@@ -83,6 +84,7 @@ const ModelCreationLayout = () => {
           currentPageIndex={currentPageIndex}
         />
         <Head title="Create New Model" />
+        <BackButton />
         <div className="min-h-screen grid grid-cols-12 grid-rows-[auto_1fr_auto] gap-y-8 w-full justify-center my-8">
           <div className="col-span-12 lg:col-start-2 lg:col-span-10 w-full">
             <ProgressBar

diff --git a/frontend/src/components/map/map.tsx b/frontend/src/components/map/map.tsx
@@ -21,7 +21,6 @@ import TileBoundaries from "@/components/map/tile-boundaries";
 import OpenAerialMap from "@/components/map/open-aerial-map";
 import Basemaps from "@/components/map/basemaps";
 
-
 type MapComponentProps = {
   geolocationControl?: boolean;
   controlsLocation?: "top-right" | "top-left";
@@ -78,12 +77,12 @@ const MapComponent: React.FC<MapComponentProps> = ({
     ];
     const baseLayers = basemaps
       ? [
-        { value: BASEMAPS.OSM, subLayer: OSM_BASEMAP_LAYER_ID },
-        {
-          value: BASEMAPS.GOOGLE_SATELLITE,
-          subLayer: GOOGLE_SATELLITE_BASEMAP_LAYER_ID,
-        },
-      ]
+          { value: BASEMAPS.OSM, subLayer: OSM_BASEMAP_LAYER_ID },
+          {
+            value: BASEMAPS.GOOGLE_SATELLITE,
+            subLayer: GOOGLE_SATELLITE_BASEMAP_LAYER_ID,
+          },
+        ]
       : [];
     return { layers, baseLayers };
   }, [layerControlLayers, openAerialMap, basemaps]);
@@ -93,8 +92,9 @@ const MapComponent: React.FC<MapComponentProps> = ({
     return (
       <>
         <div
-          className={`absolute top-5 ${controlsLocation === "top-right" ? "right-3" : "left-3"
-            } z-[1] flex flex-col gap-y-[1px]`}
+          className={`absolute top-5 ${
+            controlsLocation === "top-right" ? "right-3" : "left-3"
+          } z-[1] flex flex-col gap-y-[1px]`}
         >
           <ZoomControls />
           {geolocationControl && <GeolocationControl />}
@@ -126,7 +126,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
   ]);
 
   return (
-    <div className="h-full w-full relative" ref={mapContainerRef}>
+    <div className={`h-full relative w-full`} ref={mapContainerRef}>
       {Controls}
       {map && showLegend && <Legend />}
       {/* Order according to how they'll be rendered */}

diff --git a/frontend/src/components/map/tile-boundaries.tsx b/frontend/src/components/map/tile-boundaries.tsx
@@ -10,7 +10,7 @@ import { GeoJSONSource } from "maplibre-gl";
 import { useCallback, useEffect } from "react";
 
 const TileBoundaries = () => {
-  const { map, } = useMap();
+  const { map } = useMap();
 
   useMapLayers(
     [

diff --git a/frontend/src/components/map/zoom-level.tsx b/frontend/src/components/map/zoom-level.tsx
@@ -4,7 +4,7 @@ const ZoomLevel = () => {
   const { currentZoom } = useMap();
   return (
     <div className="bg-white py-1 px-3 rounded-md">
-      <p>Zoom level: {currentZoom}</p>
+      <p className="text-body-4 md:text-body-3">Zoom level: {currentZoom}</p>
     </div>
   );
 };

diff --git a/frontend/src/components/pagination.tsx b/frontend/src/components/pagination.tsx
@@ -16,6 +16,8 @@ type PaginationProps = {
   isPlaceholderData?: boolean;
   offset?: number;
   setOffset?: (offset: number) => void;
+  showCountOnMobile?: boolean;
+  centerOnMobile?: boolean;
 };
 
 const Pagination: React.FC<PaginationProps> = ({
@@ -30,6 +32,8 @@ const Pagination: React.FC<PaginationProps> = ({
   isPlaceholderData,
   offset,
   setOffset,
+  showCountOnMobile = false,
+  centerOnMobile = true,
 }) => {
   const _offset = offset ?? (query?.[SEARCH_PARAMS.offset] as number);
 
@@ -54,37 +58,48 @@ const Pagination: React.FC<PaginationProps> = ({
   };
 
   return (
-    <div className="flex md:min-w-60 items-center justify-between ">
-      <p className="hidden md:inline-block text-body-3">
-        <span className="font-semibold ">
-          {_offset + 1} -{" "}
-          {_offset + pageLimit < (totalLength ? totalLength : 0)
-            ? _offset + pageLimit
-            : totalLength}
-        </span>{" "}
-        of {totalLength}
-      </p>
-      <div className="flex items-center gap-x-10 justify-center w-full md:w-fit md:gap-x-4 ">
-        <button
-          className="w-4 cursor-pointer"
-          title="Prev"
-          disabled={disablePrevPage}
-          onClick={onPrevPage}
+    <div
+      className={`flex md:min-w-60 items-center w-full ${centerOnMobile ? "justify-center" : "justify-between"}`}
+    >
+      <div>
+        <p
+          className={`"text-body-4 text-nowrap md:inline-block  ${showCountOnMobile ? "inline-block" : "hidden"}`}
         >
-          <ChevronDownIcon
-            className={`rotate-90  ${hasPrevPage ? "text-dark" : "text-light-gray"}`}
-          />
-        </button>
-        <button
-          className="w-4 cursor-pointer"
-          title="Next"
-          disabled={disableNextPage}
-          onClick={onNextPage}
-        >
-          <ChevronDownIcon
-            className={`-rotate-90  ${hasNextPage ? "text-dark" : "text-light-gray"}`}
-          />
-        </button>
+          <span className="md:font-semibold text-body-4">
+            {_offset + 1} -{" "}
+            {_offset + pageLimit < (totalLength ? totalLength : 0)
+              ? _offset + pageLimit
+              : totalLength}
+          </span>{" "}
+          <span className="md:font-semibold text-body-4">
+            {" "}
+            of {totalLength}
+          </span>
+        </p>
+      </div>
+      <div>
+        <div className="flex items-center gap-x-10  justify-center w-full md:w-fit md:gap-x-4 ">
+          <button
+            className="w-4 cursor-pointer"
+            title="Prev"
+            disabled={disablePrevPage}
+            onClick={onPrevPage}
+          >
+            <ChevronDownIcon
+              className={`rotate-90  ${hasPrevPage ? "text-dark" : "text-light-gray"}`}
+            />
+          </button>
+          <button
+            className="w-4 cursor-pointer"
+            title="Next"
+            disabled={disableNextPage}
+            onClick={onNextPage}
+          >
+            <ChevronDownIcon
+              className={`-rotate-90  ${hasNextPage ? "text-dark" : "text-light-gray"}`}
+            />
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/components/ui/button/back-button.tsx b/frontend/src/components/ui/button/back-button.tsx
@@ -1,4 +1,4 @@
-import { useNavigate, } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { ArrowBackIcon } from "@/components/ui/icons";
 
 const BackButton = () => {

diff --git a/frontend/src/components/ui/form/form-label/form-label.tsx b/frontend/src/components/ui/form/form-label/form-label.tsx
@@ -21,7 +21,7 @@ const FormLabel: React.FC<FormLabelProps> = ({
   return (
     <p
       slot="label"
-      className={`flex text-sm items-center gap-x-2 text-dark ${position === "top" && "mb-4"}`}
+      className={`flex text-body-3 items-center gap-x-2 text-dark ${position === "top" && "mb-4"}`}
     >
       <span>
         {label} {required && <small className="text-primary text-xl">*</small>}

diff --git a/frontend/src/components/ui/form/help-text/help-text.tsx b/frontend/src/components/ui/form/help-text/help-text.tsx
@@ -4,7 +4,7 @@ type HelptextProps = {
 
 const HelpText: React.FC<HelptextProps> = ({ content }) => {
   return (
-    <p className="mt-1 text-sm text-gray" slot="help-text">
+    <p className="mt-1 font-light text-body-3 text-gray" slot="help-text">
       {content}
     </p>
   );

diff --git a/frontend/src/components/ui/full-screen/full-screen.tsx b/frontend/src/components/ui/full-screen/full-screen.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+const FullSreenWidthComponent = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className={`-mx-[1.25rem] lg:-mx-[5rem]`}>
+      {/*  Override the root layout padding */}
+      {children}
+    </div>
+  );
+};
+
+export default FullSreenWidthComponent;
diff --git a/frontend/src/components/ui/full-screen/index.ts b/frontend/src/components/ui/full-screen/index.ts
@@ -0,0 +1 @@
+export { default as FullSreenWidthComponent } from "./full-screen";
diff --git a/frontend/src/components/ui/image/image.tsx b/frontend/src/components/ui/image/image.tsx
@@ -50,7 +50,6 @@ const Image: React.FC<ImageProps> = ({
         className={cn(`${className} ${isLoading ? "hidden" : ""}`)}
         onLoad={handleLoad}
         onError={handleError}
-        loading="lazy"
       />
     </>
   );

diff --git a/frontend/src/components/ui/image/index.ts b/frontend/src/components/ui/image/index.ts
@@ -1,2 +1,2 @@
 export { default as Image } from "./image";
-export { default as ZoomableImage } from './zoomable-image'
+export { default as ZoomableImage } from "./zoomable-image";
diff --git a/frontend/src/components/ui/image/zoomable-image.tsx b/frontend/src/components/ui/image/zoomable-image.tsx
@@ -1,15 +1,8 @@
-import Zoom from 'react-medium-image-zoom'
-import 'react-medium-image-zoom/dist/styles.css'
-
-
-
+import Zoom from "react-medium-image-zoom";
+import "react-medium-image-zoom/dist/styles.css";
 
 const ZoomableImage = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <Zoom>
-            {children}
-        </Zoom>
-    )
-}
+  return <Zoom>{children}</Zoom>;
+};
 
-export default ZoomableImage
+export default ZoomableImage;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as FullSreenWidthComponent } from "./full-screen";