diff --git a/compendium-frontend/src/App.tsx b/compendium-frontend/src/App.tsx index edd4cae3573d7003eb3e7ffcf96dc571bc3b4518..32018f6cf8f42c79f7acb11fec0c157c735260f8 100644 --- a/compendium-frontend/src/App.tsx +++ b/compendium-frontend/src/App.tsx @@ -83,7 +83,9 @@ const GlobalLayout = () => { <> <Providers> <ExternalPageNavBar /> - {hasOutlet ? <Outlet /> : <Landing />} + <main className="grow"> + {hasOutlet ? <Outlet /> : <Landing />} + </main> <PrivacyModal /> </Providers> <GeantFooter /> diff --git a/compendium-frontend/src/components/DataPage.tsx b/compendium-frontend/src/components/DataPage.tsx index 176ef09f18104876ec4852c1720a1008e4ad99bb..f622cc1beb24209d5299248b859b92d011eb250d 100644 --- a/compendium-frontend/src/components/DataPage.tsx +++ b/compendium-frontend/src/components/DataPage.tsx @@ -55,7 +55,7 @@ function DataPage({ title, description, filter, children, category, data, filena <span>You are viewing a preview of the website which includes pre-published survey data. <a href={locationWithoutPreview}>Click here</a> to deactivate preview mode.</span> </Row>} <SectionNavigation activeCategory={category} /> - <Container className="grow"> + <Container className="mb-5 grow"> <Row> <h3 className="m-1">{title}</h3> </Row> diff --git a/compendium-frontend/src/pages/CompendiumData.tsx b/compendium-frontend/src/pages/CompendiumData.tsx index f1b531177a45371560efdbbea931c4639a311026..204aa5fa8732af1bda0bdc884bead5cd8831b980 100644 --- a/compendium-frontend/src/pages/CompendiumData.tsx +++ b/compendium-frontend/src/pages/CompendiumData.tsx @@ -11,7 +11,6 @@ import useMatomo from "../matomo/UseMatomo"; function CompendiumData(): ReactElement { usePreview(); - const { trackPageView } = useMatomo() React.useEffect(() => { @@ -21,7 +20,7 @@ function CompendiumData(): ReactElement { }, [trackPageView]) return ( - <main className="grow"> + <> <PageHeader type={'data'} /> <Banner type={'data'}> <p className="wordwrap"> @@ -32,8 +31,9 @@ function CompendiumData(): ReactElement { </p> </Banner> - <Container className="pt-5"> - <CollapsibleBox title={Sections.Organisation}> + <Container className="mt-5 mb-5"> + <Row> + <CollapsibleBox title={Sections.Organisation}> <h6 className="section-title">Budget, Income and Billing</h6> <Link to="/budget" className="link-text-underline"> <span>Budget of NRENs per Year</span> @@ -67,9 +67,9 @@ function CompendiumData(): ReactElement { <Link to="/ec-projects" className="link-text-underline"> <span>NREN Involvement in European Commission Projects</span> </Link> - </CollapsibleBox> + </CollapsibleBox> - <CollapsibleBox title={Sections.Policy} startCollapsed> + <CollapsibleBox title={Sections.Policy} startCollapsed> <Link to="/policy" className="link-text-underline"> <span>NREN Policies</span> </Link> @@ -104,9 +104,9 @@ function CompendiumData(): ReactElement { <Link to="/service-management-framework" className="link-text-underline"> <span>NRENs Operating a Formal Service Management Framework</span> </Link> - </CollapsibleBox> + </CollapsibleBox> - <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed> + <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed> <h6 className="section-title">Connected Users</h6> <Link to="/institutions-urls" className="link-text-underline"> <span>Webpages Listing Institutions and Organisations Connected to NREN Networks</span> @@ -138,8 +138,8 @@ function CompendiumData(): ReactElement { <Link to="/commercial-connectivity" className="link-text-underline"> <span>Commercial Connectivity</span> </Link> - </CollapsibleBox> - <CollapsibleBox title={Sections.Network} startCollapsed> + </CollapsibleBox> + <CollapsibleBox title={Sections.Network} startCollapsed> <h6 className="section-title" >Connectivity</h6> <Link to="/traffic-volume" className="link-text-underline"> <span>NREN Traffic - NREN Customers & External Networks</span> @@ -221,8 +221,8 @@ function CompendiumData(): ReactElement { <Link to="/nfv" className="link-text-underline"> <span>Kinds of Network Function Virtualisation used by NRENs</span> </Link> - </CollapsibleBox> - <CollapsibleBox title={Sections.Services} startCollapsed> + </CollapsibleBox> + <CollapsibleBox title={Sections.Services} startCollapsed> <Link to="/network-services" className="link-text-underline"> <span>Network services</span> </Link> @@ -247,9 +247,10 @@ function CompendiumData(): ReactElement { <Link to="/professional-services" className="link-text-underline"> <span>Professional services</span> </Link> - </CollapsibleBox> + </CollapsibleBox> + </Row> </Container> - </main> + </> ); } diff --git a/compendium-frontend/src/scss/layout/_components.scss b/compendium-frontend/src/scss/layout/_components.scss index 1e7c8bfd4cd0301b53ad3e02345f422cfb0e28fe..2ded31a906ce0aed24eddabd126396b2be6d02b6 100644 --- a/compendium-frontend/src/scss/layout/_components.scss +++ b/compendium-frontend/src/scss/layout/_components.scss @@ -52,7 +52,6 @@ $year-colors: ( display: flex; flex-direction: column; flex: 1; - padding-bottom: 4%; } .grey-container { @@ -124,6 +123,7 @@ $year-colors: ( opacity: 0; max-height: 0; visibility: hidden; + overflow: hidden; } .collapsible-column { @@ -614,4 +614,28 @@ $funding-source-colors: ( .bold-text { font-weight: bold; +} + +.user-management-table { + width: 100%; + table-layout: fixed; + max-height: max(50vh, 30rem); +} + +@media (max-width: 1920px) { + .user-management-table { + max-width: 100vw; + } +} + +.user-management-table>* th, +.user-management-table>* td { + word-wrap: break-word; +} + +.user-management-table thead th { + position: sticky; + top: -.1rem; + background-color: white; + z-index: 1; } \ No newline at end of file