From aec8832bace91f0f3b6d8ad3bb3b27fb4263be83 Mon Sep 17 00:00:00 2001 From: Sophie Stadler Date: Thu, 19 Sep 2024 10:56:08 -0400 Subject: [PATCH] DEVPROD-11387: Remove CSS grid layout (#397) --- apps/spruce/src/components/Content/Layout.tsx | 6 +- apps/spruce/src/components/Header/index.tsx | 4 +- apps/spruce/src/components/styles/Layout.tsx | 32 ++- apps/spruce/src/components/styles/SideNav.tsx | 3 +- apps/spruce/src/components/styles/index.ts | 8 +- .../spruce/src/pages/distroSettings/index.tsx | 111 +++++---- apps/spruce/src/pages/image/index.tsx | 11 +- apps/spruce/src/pages/preferences/index.tsx | 11 +- .../src/pages/projectSettings/index.tsx | 231 +++++++++--------- apps/spruce/src/pages/spawn/index.tsx | 11 +- 10 files changed, 227 insertions(+), 201 deletions(-) diff --git a/apps/spruce/src/components/Content/Layout.tsx b/apps/spruce/src/components/Content/Layout.tsx index 7e61721d7..40d7ccc92 100644 --- a/apps/spruce/src/components/Content/Layout.tsx +++ b/apps/spruce/src/components/Content/Layout.tsx @@ -7,7 +7,7 @@ import { useAnalyticsAttributes } from "analytics"; import { Feedback } from "components/Feedback"; import { Header } from "components/Header"; import { FullPageLoad } from "components/Loading/FullPageLoad"; -import { PageGrid } from "components/styles/Layout"; +import { SiteLayout } from "components/styles/Layout"; import { TaskStatusIconLegend } from "components/TaskStatusIconLegend"; import WelcomeModal from "components/WelcomeModal"; import { CY_DISABLE_NEW_USER_WELCOME_MODAL } from "constants/cookies"; @@ -44,7 +44,7 @@ export const Layout: React.FC = () => { } return ( - +
{!shouldDisableForTest && !hasUsedSpruceBefore && ( @@ -58,7 +58,7 @@ export const Layout: React.FC = () => { - + ); }; diff --git a/apps/spruce/src/components/Header/index.tsx b/apps/spruce/src/components/Header/index.tsx index 0e1e05e34..6dc32deda 100644 --- a/apps/spruce/src/components/Header/index.tsx +++ b/apps/spruce/src/components/Header/index.tsx @@ -20,7 +20,9 @@ export const Header: React.FC = () => ( ); const StyledHeader = styled.header` - grid-area: header; + position: sticky; + top: 0; + width: 100%; `; const BannerContainer = styled.div` diff --git a/apps/spruce/src/components/styles/Layout.tsx b/apps/spruce/src/components/styles/Layout.tsx index 47f48755d..71cf24e2a 100644 --- a/apps/spruce/src/components/styles/Layout.tsx +++ b/apps/spruce/src/components/styles/Layout.tsx @@ -5,23 +5,33 @@ import { size, fontSize } from "constants/tokens"; const { gray, red } = palette; -export const PageWrapper = styled.div` - grid-area: contents; +// Top-level layout for the entire site. Manages positioning of navbar. +export const SiteLayout = styled.div` + display: flex; + flex-flow: column; + height: 100vh; +`; + +// Layout elements for pages with a LeafyGreen SideNav +export const SideNavPageWrapper = styled.div` + display: flex; + overflow: hidden; + height: 100%; +`; +export const SideNavPageContent = styled.div` overflow-x: hidden; overflow-y: scroll; + flex-grow: 1; padding: ${size.m} ${size.l}; `; -export const PageGrid = styled.div` - display: grid; - grid-template-areas: - "header header" - "sidenav contents"; - grid-template-columns: auto minmax(0, 1fr); - grid-template-rows: auto 1fr; - height: 100vh; +// Layout elements for non-LG SideNav pages +export const PageWrapper = styled.div` + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + padding: ${size.m} ${size.l}; `; - export const PageLayout = styled.section<{ hasSider?: boolean }>` display: flex; flex: auto; diff --git a/apps/spruce/src/components/styles/SideNav.tsx b/apps/spruce/src/components/styles/SideNav.tsx index 4aaadeaae..51631c892 100644 --- a/apps/spruce/src/components/styles/SideNav.tsx +++ b/apps/spruce/src/components/styles/SideNav.tsx @@ -13,7 +13,8 @@ import { zIndex, size } from "constants/tokens"; const { blue } = palette; export const SideNav = styled(LGSideNav)` - grid-area: sidenav; + flex-shrink: 0; + flex-grow: 0; z-index: ${zIndex.sideNav}; `; diff --git a/apps/spruce/src/components/styles/index.ts b/apps/spruce/src/components/styles/index.ts index 4164dc3b4..f7ea9dd87 100644 --- a/apps/spruce/src/components/styles/index.ts +++ b/apps/spruce/src/components/styles/index.ts @@ -6,9 +6,11 @@ import { InputLabel, PageButtonRow, PageContent, - PageGrid, + SiteLayout, PageLayout, PageSider, + SideNavPageContent, + SideNavPageWrapper, PageTitle, PageWrapper, TableControlInnerRow, @@ -28,7 +30,7 @@ export { InputLabel, PageButtonRow, PageContent, - PageGrid, + SiteLayout, PageLayout, PageSider, PageTitle, @@ -36,6 +38,8 @@ export { SideNav, SideNavGroup, SideNavItem, + SideNavPageContent, + SideNavPageWrapper, SiderCard, StyledLink, StyledRouterLink, diff --git a/apps/spruce/src/pages/distroSettings/index.tsx b/apps/spruce/src/pages/distroSettings/index.tsx index c88442d1a..5f77ac746 100644 --- a/apps/spruce/src/pages/distroSettings/index.tsx +++ b/apps/spruce/src/pages/distroSettings/index.tsx @@ -7,7 +7,8 @@ import { SideNav, SideNavGroup, SideNavItem, - PageWrapper, + SideNavPageContent, + SideNavPageWrapper, } from "components/styles"; import { SideNavItemLink } from "components/styles/SideNav"; import { showImageVisibilityPage } from "constants/featureFlags"; @@ -64,63 +65,65 @@ const DistroSettings: React.FC = () => { return ( - - - {/* @ts-expect-error: FIXME. This comment was added by an automated script. */} - - - - - {Object.values(DistroSettingsTabRoutes).map((tab) => ( - - {getTabTitle(tab).title} - - ))} - - } header="Links"> - - Task Queue - - {showImageVisibilityPage && ( + + + + {/* @ts-expect-error: FIXME. This comment was added by an automated script. */} + + + + + {Object.values(DistroSettingsTabRoutes).map((tab) => ( + + {getTabTitle(tab).title} + + ))} + + } header="Links"> - Image Build Information - - )} - {showImageVisibilityPage && ( - - Image Event Log + Task Queue + {showImageVisibilityPage && ( + + Image Build Information + + )} + {showImageVisibilityPage && ( + + Image Event Log + + )} + + + + {!loading && data?.distro && ( + )} - - - - {!loading && data?.distro && ( - - )} - + + ); }; diff --git a/apps/spruce/src/pages/image/index.tsx b/apps/spruce/src/pages/image/index.tsx index ffc7fd142..4f8ae979c 100644 --- a/apps/spruce/src/pages/image/index.tsx +++ b/apps/spruce/src/pages/image/index.tsx @@ -5,7 +5,8 @@ import { SideNav, SideNavGroup, SideNavItem, - PageWrapper, + SideNavPageContent, + SideNavPageWrapper, } from "components/styles"; import { ImageTabRoutes, getImageRoute, slugs } from "constants/routes"; import { size } from "constants/tokens"; @@ -37,7 +38,7 @@ const Image: React.FC = () => { } return ( - <> + @@ -56,10 +57,10 @@ const Image: React.FC = () => { ))} - + - - + + ); }; diff --git a/apps/spruce/src/pages/preferences/index.tsx b/apps/spruce/src/pages/preferences/index.tsx index 13a535ece..b540149d1 100644 --- a/apps/spruce/src/pages/preferences/index.tsx +++ b/apps/spruce/src/pages/preferences/index.tsx @@ -5,7 +5,8 @@ import { SideNav, SideNavGroup, SideNavItem, - PageWrapper, + SideNavPageContent, + SideNavPageWrapper, } from "components/styles"; import { PreferencesTabRoutes, @@ -23,7 +24,7 @@ const Preferences: React.FC = () => { const { sendEvent } = usePreferencesAnalytics(); return ( - <> + } header="Preferences"> { - + - - + + ); }; diff --git a/apps/spruce/src/pages/projectSettings/index.tsx b/apps/spruce/src/pages/projectSettings/index.tsx index b0243a6cc..8451b18df 100644 --- a/apps/spruce/src/pages/projectSettings/index.tsx +++ b/apps/spruce/src/pages/projectSettings/index.tsx @@ -13,7 +13,8 @@ import { SideNav, SideNavGroup, SideNavItem, - PageWrapper, + SideNavPageContent, + SideNavPageWrapper, } from "components/styles"; import { ProjectSettingsTabRoutes, @@ -173,128 +174,130 @@ const ProjectSettings: React.FC = () => { {/* @ts-expect-error: FIXME. This comment was added by an automated script. */} - - - - {projectType === ProjectType.AttachedProject && repoId && ( - - Go to repo settings - - )} + + + + + {projectType === ProjectType.AttachedProject && repoId && ( + + Go to repo settings + + )} - - + + - - - - - - - - - - - - - - {projectType !== ProjectType.Repo && ( + + + - )} - {projectType !== ProjectType.Repo && ( + + + + + + + + + {projectType !== ProjectType.Repo && ( + + )} + {projectType !== ProjectType.Repo && ( + + )} + + + + + {hasLoaded ? ( + + ) : ( + )} - - - - - {hasLoaded ? ( - - ) : ( - - )} - + + ); }; diff --git a/apps/spruce/src/pages/spawn/index.tsx b/apps/spruce/src/pages/spawn/index.tsx index a702f6031..68564a6aa 100644 --- a/apps/spruce/src/pages/spawn/index.tsx +++ b/apps/spruce/src/pages/spawn/index.tsx @@ -1,10 +1,11 @@ import { useParams, Link, Route, Routes, Navigate } from "react-router-dom"; import { useSpawnAnalytics } from "analytics"; import { - PageWrapper, SideNav, SideNavGroup, SideNavItem, + SideNavPageContent, + SideNavPageWrapper, } from "components/styles"; import { routes, SpawnTab, slugs } from "constants/routes"; import { SpawnHost } from "./SpawnHost"; @@ -15,7 +16,7 @@ const Spawn: React.FC = () => { const spawnAnalytics = useSpawnAnalytics(); return ( - <> + { - + } path={SpawnTab.Host} /> } path={SpawnTab.Volume} /> @@ -59,8 +60,8 @@ const Spawn: React.FC = () => { path="*" /> - - + + ); };