Fix responsivenes in detail view (#1685)

swisstopo · Nov 21, 2024 · 64e6d4a · 64e6d4a
2 parents 875ea40 + 7f18684
commit 64e6d4a
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@
 - The basemap selector buttons were not displayed correctly on hover.
 - No scrollbar was displayed in the side drawer when many additional layers were added.
 - There was no appropriate error message when the drawn box did not contain extractable coordinates.
+- The responsive design of the coordinate segment in the detail view was broken.
 - When clicking the select all checkbox in the borehole table, only the boreholes on the current page were selected.
 
 ## v2.1.870 - 2024-09-27

diff --git a/src/client/src/components/map/pointComponent.jsx b/src/client/src/components/map/pointComponent.jsx
@@ -33,7 +33,6 @@ class PointComponent extends React.Component {
     this.changefeature = this.updatePointAndGetAddress.bind(this);
     this.detailMapStyleFunction = detailMapStyleFunction.bind(this);
     this.getAddress = this.getAddress.bind(this);
-    this.setStateBound = this.setState.bind(this);
     this.srs = "EPSG:2056";
 
     _.forEach(projections, function (proj, srs) {
@@ -309,11 +308,11 @@ class PointComponent extends React.Component {
           style={{
             padding: "0px",
             flex: "1 1 100%",
-            height: 525,
+            height: 380,
           }}
         />
         <MapControls onZoomIn={this.onZoomIn} onZoomOut={this.onZoomOut} onFitToExtent={this.onFitToExtent} />
-        <Box sx={{ position: "absolute", right: 0, top: 500 }}>
+        <Box sx={{ position: "absolute", right: 0, top: 355 }}>
           <BasemapSelector marginBottom="0px" />
         </Box>
         <Box
@@ -329,6 +328,7 @@ class PointComponent extends React.Component {
           <Box
             sx={{
               flex: "1 1 100%",
+              width: "300px",
             }}>
             <Label color="black">
               <Icon name="map marker" />

diff --git a/src/client/src/pages/detail/detailPage.tsx b/src/client/src/pages/detail/detailPage.tsx
@@ -175,6 +175,7 @@ export const DetailPage: FC = () => {
                 onBoreholeFormSubmit={onBoreholeFormSubmit}
                 handleDirtyChange={handleDirtyChange}
                 borehole={borehole}
+                panelOpen={panelOpen}
               />
             </MainContentBox>
             {editingEnabled && panelOpen && <LabelingPanel boreholeId={Number(id)} />}

diff --git a/src/client/src/pages/detail/detailPageContent.tsx b/src/client/src/pages/detail/detailPageContent.tsx
@@ -31,6 +31,7 @@ interface DetailPageContentProps {
   onBoreholeFormSubmit: (data: BoreholeFormInputs) => void;
   handleDirtyChange: (isDirty: boolean) => void;
   borehole: BoreholeV2;
+  panelOpen: boolean;
 }
 type DetailPageParams = {
   id: string;
@@ -45,6 +46,7 @@ export const DetailPageContent = ({
   onBoreholeFormSubmit,
   handleDirtyChange,
   borehole,
+  panelOpen,
 }: DetailPageContentProps) => {
   const { t } = useTranslation();
   const { showAlert } = useContext(AlertContext);
@@ -95,6 +97,7 @@ export const DetailPageContent = ({
                   onSubmit={onLocationFormSubmit}
                   borehole={borehole}
                   onDirtyChange={handleDirtyChange}
+                  labelingPanelOpen={panelOpen}
                 />
               )}
             />

diff --git a/src/client/src/pages/detail/form/location/coordinatesSegment.tsx b/src/client/src/pages/detail/form/location/coordinatesSegment.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Card, CardContent, CardHeader } from "@mui/material";
+import { Box, Card, CardContent, CardHeader } from "@mui/material";
 import { Check, X } from "lucide-react";
 import { LabelingButton } from "../../../../components/buttons/labelingButton";
 import { FormContainer, FormCoordinate, FormDomainSelect, FormSelect } from "../../../../components/form/form";
@@ -261,12 +261,12 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
               sx={{ p: 4, pb: 3 }}
               titleTypographyProps={{ variant: "h5" }}
               action={
-                editingEnabled && (
+                <Box sx={{ visibility: editingEnabled ? "visible" : "hidden" }}>
                   <LabelingButton
                     className={extractionObject?.type === "coordinates" ? "Mui-active" : ""}
                     onClick={() => startLabeling()}
                   />
-                )
+                </Box>
               }
             />
             <CardContent sx={{ pt: 4, px: 3 }}>

diff --git a/src/client/src/pages/detail/form/location/identifierSegment.tsx b/src/client/src/pages/detail/form/location/identifierSegment.tsx
@@ -28,7 +28,15 @@ const IdentifierSegment = ({ borehole, editingEnabled, formMethods }: Identifier
   return (
     <Card>
       <FormSegmentBox>
-        <Grid container spacing={2}>
+        <Stack sx={{ visibility: editingEnabled ? "visible" : "hidden" }} alignItems="flex-end">
+          <AddButton
+            label="addIdentifier"
+            onClick={() => {
+              append({ boreholeId: borehole.id, codelistId: null, value: "" });
+            }}
+          />
+        </Stack>
+        <Grid container spacing={2} sx={{ mt: -6 }}>
           <Grid item xs={6}>
             <Typography variant="h6"> {t("borehole_identifier")}</Typography>
           </Grid>
@@ -79,16 +87,6 @@ const IdentifierSegment = ({ borehole, editingEnabled, formMethods }: Identifier
             </Grid>
           </Grid>
         ))}
-        <Stack sx={{ mt: 2 }} alignItems="flex-end">
-          {editingEnabled && (
-            <AddButton
-              label="addIdentifier"
-              onClick={() => {
-                append({ boreholeId: borehole.id, codelistId: null, value: "" });
-              }}
-            />
-          )}
-        </Stack>
       </FormSegmentBox>
     </Card>
   );

diff --git a/src/client/src/pages/detail/form/location/locationPanel.tsx b/src/client/src/pages/detail/form/location/locationPanel.tsx
@@ -10,7 +10,7 @@ import NameSegment from "./nameSegment.tsx";
 import RestrictionSegment from "./restrictionSegment.tsx";
 
 export const LocationPanel = forwardRef(
-  ({ editingEnabled, onSubmit, onDirtyChange, borehole }: LocationPanelProps, ref) => {
+  ({ editingEnabled, onSubmit, onDirtyChange, borehole, labelingPanelOpen }: LocationPanelProps, ref) => {
     const [resetKey, setResetKey] = useState(0);
     const formMethods = useForm<LocationFormInputs>({
       mode: "onChange",
@@ -73,6 +73,7 @@ export const LocationPanel = forwardRef(
                   borehole={borehole}
                   editingEnabled={editingEnabled}
                   formMethods={formMethods}
+                  labelingPanelOpen={labelingPanelOpen}
                   key={resetKey}></LocationSegment>
               </Stack>
             </form>

diff --git a/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx b/src/client/src/pages/detail/form/location/locationPanelInterfaces.tsx
@@ -10,6 +10,7 @@ export interface LocationBaseProps {
 export interface LocationPanelProps extends LocationBaseProps {
   onSubmit: (data: LocationFormInputs) => void;
   onDirtyChange: (isDirty: boolean) => void;
+  labelingPanelOpen: boolean;
   ref: RefObject<{ submit: () => void; reset: () => void }>;
 }
 

diff --git a/src/client/src/pages/detail/form/location/locationSegment.tsx b/src/client/src/pages/detail/form/location/locationSegment.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { UseFormReturn } from "react-hook-form";
-import { Card, Stack } from "@mui/material";
+import { Card, Grid, Stack } from "@mui/material";
 import { fetchApiV2 } from "../../../../api/fetchApiV2";
 import PointComponent from "../../../../components/map/pointComponent";
 import { FormSegmentBox } from "../../../../components/styledComponents";
@@ -13,9 +13,10 @@ import { LocationBaseProps, LocationFormInputs } from "./locationPanelInterfaces
 
 interface LocationSegmentProps extends LocationBaseProps {
   formMethods: UseFormReturn<LocationFormInputs>;
+  labelingPanelOpen: boolean;
 }
 
-const LocationSegment = ({ borehole, editingEnabled, formMethods }: LocationSegmentProps) => {
+const LocationSegment = ({ borehole, editingEnabled, labelingPanelOpen, formMethods }: LocationSegmentProps) => {
   const transformCoordinates = useCallback(async (referenceSystem: string, x: number, y: number) => {
     let apiUrl;
     if (referenceSystem === referenceSystems.LV95.name) {
@@ -103,8 +104,8 @@ const LocationSegment = ({ borehole, editingEnabled, formMethods }: LocationSegm
   return (
     <Stack direction="column" gap={3}>
       <Card sx={{ py: 1, px: 1 }}>
-        <Stack direction="row" gap={2} sx={{ flexWrap: "wrap" }}>
-          <Stack gap={2} sx={{ flexGrow: 1, minWidth: 600 }}>
+        <Grid container spacing={2}>
+          <Grid xs={12} md={12} lg={labelingPanelOpen ? 12 : 6}>
             <CoordinatesSegment
               borehole={borehole}
               editingEnabled={editingEnabled}
@@ -113,27 +114,31 @@ const LocationSegment = ({ borehole, editingEnabled, formMethods }: LocationSegm
               handleCoordinateTransformation={handleCoordinateTransformation}
               setValuesForCountryCantonMunicipality={setValuesForCountryCantonMunicipality}
             />
+          </Grid>
+          <Grid xs={12} md={12} lg={labelingPanelOpen ? 12 : 6}>
+            <FormSegmentBox>
+              <PointComponent
+                applyChange={(
+                  x: string,
+                  y: string,
+                  height: number,
+                  country: string,
+                  canton: string,
+                  municipality: string,
+                ) => {
+                  setValuesForNewMapPoint(x, y, height, country, canton, municipality);
+                }}
+                id={borehole.id}
+                isEditable={editingEnabled}
+                x={borehole.locationX ? Number(borehole.locationX) : null}
+                y={borehole.locationY ? Number(borehole.locationY) : null}
+              />
+            </FormSegmentBox>
+          </Grid>
+          <Grid xs={12}>
             <ElevationSegment borehole={borehole} editingEnabled={editingEnabled} formMethods={formMethods} />
-          </Stack>
-          <FormSegmentBox sx={{ flexGrow: 1 }}>
-            <PointComponent
-              applyChange={(
-                x: string,
-                y: string,
-                height: number,
-                country: string,
-                canton: string,
-                municipality: string,
-              ) => {
-                setValuesForNewMapPoint(x, y, height, country, canton, municipality);
-              }}
-              id={borehole.id}
-              isEditable={editingEnabled}
-              x={borehole.locationX ? Number(borehole.locationX) : null}
-              y={borehole.locationY ? Number(borehole.locationY) : null}
-            />
-          </FormSegmentBox>
-        </Stack>
+          </Grid>
+        </Grid>
       </Card>
       <CantonMunicipalitySegment
         country={borehole.country}