feat: Fix editor layouts

theopensystemslab · Jul 3, 2024 · b793e7b · b793e7b
1 parent 35f63f8
commit b793e7b
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 88 deletions.
diff --git a/editor.planx.uk/src/components/EditorNavMenu.tsx b/editor.planx.uk/src/components/EditorNavMenu.tsx
@@ -87,7 +87,7 @@ const flowLayoutRoutes: Route[] = [
 ];
 
 const MENU_WIDTH_COMPACT = "52px";
-const MENU_WIDTH_FULL = "184px";
+const MENU_WIDTH_FULL = "178px";
 
 const Root = styled(Box)<{ compact?: boolean }>(({ theme, compact }) => ({
   width: compact ? MENU_WIDTH_COMPACT : MENU_WIDTH_FULL,
@@ -99,7 +99,7 @@ const Root = styled(Box)<{ compact?: boolean }>(({ theme, compact }) => ({
 const MenuWrap = styled("ul")(({ theme }) => ({
   listStyle: "none",
   margin: 0,
-  padding: theme.spacing(2.5, 0.4, 0, 0.4),
+  padding: theme.spacing(1, 0.4, 0, 0.4),
   position: "sticky",
   top: 0,
 }));

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx
@@ -155,55 +155,53 @@ export const FeedbackPage: React.FC<Props> = ({ feedback }) => {
 
   return (
     <Container maxWidth="contentWrap">
-      <Box py={4}>
-        <SettingsSection>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Feedback log
-          </Typography>
-          <Typography variant="body1">
-            Feedback from users about this service.
-          </Typography>
-        </SettingsSection>
-        <SettingsSection>
-          {feedback.length === 0 ? (
-            <ErrorSummary
-              format="info"
-              heading="No feedback found for this service"
-              message="If you're looking for feedback from more than six months ago, please contact a PlanX developer"
-            />
-          ) : (
-            <Feed>
-              <Table stickyHeader sx={{ tableLayout: "fixed" }}>
-                <TableHead>
-                  <TableRow
-                    sx={{ "& > *": { borderBottomColor: "black !important" } }}
-                  >
-                    <TableCell sx={{ width: 160 }}>
-                      <strong>Type</strong>
-                    </TableCell>
-                    <TableCell sx={{ width: 100 }}>
-                      <strong>Date</strong>
-                    </TableCell>
-                    <TableCell sx={{ width: 340 }}>
-                      <strong>Comment</strong>
-                    </TableCell>
-                    <TableCell sx={{ width: 60 }}></TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {feedback.map((item) => (
-                    <CollapsibleRow
-                      key={item.id}
-                      {...item}
-                      displayFeedbackItems={displayFeedbackItems}
-                    />
-                  ))}
-                </TableBody>
-              </Table>
-            </Feed>
-          )}
-        </SettingsSection>
-      </Box>
+      <SettingsSection>
+        <Typography variant="h2" component="h3" gutterBottom>
+          Feedback log
+        </Typography>
+        <Typography variant="body1">
+          Feedback from users about this service.
+        </Typography>
+      </SettingsSection>
+      <SettingsSection>
+        {feedback.length === 0 ? (
+          <ErrorSummary
+            format="info"
+            heading="No feedback found for this service"
+            message="If you're looking for feedback from more than six months ago, please contact a PlanX developer"
+          />
+        ) : (
+          <Feed>
+            <Table stickyHeader sx={{ tableLayout: "fixed" }}>
+              <TableHead>
+                <TableRow
+                  sx={{ "& > *": { borderBottomColor: "black !important" } }}
+                >
+                  <TableCell sx={{ width: 160 }}>
+                    <strong>Type</strong>
+                  </TableCell>
+                  <TableCell sx={{ width: 100 }}>
+                    <strong>Date</strong>
+                  </TableCell>
+                  <TableCell sx={{ width: 340 }}>
+                    <strong>Comment</strong>
+                  </TableCell>
+                  <TableCell sx={{ width: 60 }}></TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {feedback.map((item) => (
+                  <CollapsibleRow
+                    key={item.id}
+                    {...item}
+                    displayFeedbackItems={displayFeedbackItems}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </Feed>
+        )}
+      </SettingsSection>
     </Container>
   );
 };

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -1,6 +1,7 @@
 import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
 import FormControlLabel, {
   formControlLabelClasses,
 } from "@mui/material/FormControlLabel";
@@ -143,7 +144,7 @@ const ServiceSettings: React.FC = () => {
   });
 
   return (
-    <Box maxWidth="formWrap" mx="auto">
+    <Container maxWidth="formWrap">
       <Box component="form" onSubmit={elementsForm.handleSubmit} mb={2}>
         <SettingsSection>
           <Typography variant="h2" component="h3" gutterBottom>
@@ -309,7 +310,7 @@ const ServiceSettings: React.FC = () => {
           Service settings updated successfully
         </Alert>
       </Snackbar>
-    </Box>
+    </Container>
   );
 };
 

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx
@@ -1,5 +1,4 @@
 import { gql, useQuery } from "@apollo/client";
-import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import Typography from "@mui/material/Typography";
 import React, { useMemo } from "react";
@@ -74,23 +73,17 @@ const Submissions: React.FC = () => {
 
   return (
     <Container maxWidth="contentWrap">
-      <Box>
-        <SettingsSection>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Submissions
-          </Typography>
-          <Typography variant="body1">
-            Feed of payment and submission events for this service
-          </Typography>
-        </SettingsSection>
-        <SettingsSection>
-          <EventsLog
-            submissions={submissions}
-            loading={loading}
-            error={error}
-          />
-        </SettingsSection>
-      </Box>
+      <SettingsSection>
+        <Typography variant="h2" component="h3" gutterBottom>
+          Submissions
+        </Typography>
+        <Typography variant="body1">
+          Feed of payment and submission events for this service
+        </Typography>
+      </SettingsSection>
+      <SettingsSection>
+        <EventsLog submissions={submissions} loading={loading} error={error} />
+      </SettingsSection>
     </Container>
   );
 };

diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -3,18 +3,21 @@ import "./floweditor.scss";
 
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
+import { HEADER_HEIGHT } from "components/Header";
 import React, { useRef } from "react";
 
 import { rootFlowPath } from "../../routes/utils";
 import Flow from "./components/Flow";
 import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
 import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition";
+
 const EditorContainer = styled(Box)(() => ({
   display: "flex",
   alignItems: "stretch",
   overflow: "hidden",
   flexGrow: 1,
+  maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
 }));
 
 const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {

diff --git a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx
@@ -1,22 +1,14 @@
-import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
 import EditorNavMenu, { flowLayoutRoutes } from "components/EditorNavMenu";
 import ErrorFallback from "components/ErrorFallback";
 import React, { PropsWithChildren } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-
-const Root = styled(Box)(() => ({
-  display: "flex",
-  alignItems: "stretch",
-  overflow: "hidden",
-  flexGrow: 1,
-}));
+import Dashboard from "ui/editor/Dashboard";
 
 const FlowEditorLayout: React.FC<PropsWithChildren> = ({ children }) => (
-  <Root>
+  <Dashboard>
     <EditorNavMenu compact routes={flowLayoutRoutes} />
     <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
-  </Root>
+  </Dashboard>
 );
 
 export default FlowEditorLayout;
diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx
@@ -1,5 +1,4 @@
 import { gql } from "@apollo/client";
-import Box from "@mui/material/Box";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import natsort from "natsort";
 import {
@@ -177,11 +176,7 @@ const nodeRoutes = mount({
   "/:parent/nodes/:id/edit": editNode,
 });
 
-const SettingsContainer = () => (
-  <Box sx={{ width: "100%", px: 4, py: 5, overflowY: "auto" }}>
-    <View />
-  </Box>
-);
+const SettingsContainer = () => <View />;
 
 const routes = compose(
   withData((req) => ({