From fc030ffcd6e2d5b886955a800bb3c70eb890d2c1 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 21 Jul 2023 00:07:19 +0100 Subject: [PATCH] Implemented a much neater masonary layout --- package.json | 1 + src/components/Form/Card.tsx | 1 + src/components/Results/HostNames.tsx | 2 +- src/components/Results/RobotsTxt.tsx | 2 +- src/components/Results/Screenshot.tsx | 2 +- src/components/Results/SiteFeatures.tsx | 2 +- src/components/Results/TraceRoute.tsx | 4 +--- src/pages/Results.tsx | 25 +++++++++++++++++++++++++ yarn.lock | 5 +++++ 9 files changed, 37 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 348deef..ff736fb 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "perf_hooks": "^0.0.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-masonry-css": "^1.0.16", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-simple-maps": "^2.3.0", diff --git a/src/components/Form/Card.tsx b/src/components/Form/Card.tsx index 43c24e1..208af4a 100644 --- a/src/components/Form/Card.tsx +++ b/src/components/Form/Card.tsx @@ -11,6 +11,7 @@ export const StyledCard = styled.section<{ styles?: string}>` border-radius: 8px; padding: 1rem; position: relative; + margin 0.5rem; ${props => props.styles} `; diff --git a/src/components/Results/HostNames.tsx b/src/components/Results/HostNames.tsx index cc61ba9..45e20b6 100644 --- a/src/components/Results/HostNames.tsx +++ b/src/components/Results/HostNames.tsx @@ -28,7 +28,7 @@ const HostListSection = (props: { list: string[], title: string }) => { } const cardStyles = ` - max-height: 32rem; + max-height: 50rem; overflow: auto; `; diff --git a/src/components/Results/RobotsTxt.tsx b/src/components/Results/RobotsTxt.tsx index c595021..4568e87 100644 --- a/src/components/Results/RobotsTxt.tsx +++ b/src/components/Results/RobotsTxt.tsx @@ -5,7 +5,7 @@ import Row, { RowProps } from 'components/Form/Row'; const cardStyles = ` grid-row: span 2; .content { - max-height: 40rem; + max-height: 50rem; overflow-y: auto; } `; diff --git a/src/components/Results/Screenshot.tsx b/src/components/Results/Screenshot.tsx index 585c134..5fbe346 100644 --- a/src/components/Results/Screenshot.tsx +++ b/src/components/Results/Screenshot.tsx @@ -2,7 +2,7 @@ import { Card } from 'components/Form/Card'; const cardStyles = ` overflow: auto; - max-height: 40rem; + max-height: 50rem; grid-row: span 2; img { border-radius: 6px; diff --git a/src/components/Results/SiteFeatures.tsx b/src/components/Results/SiteFeatures.tsx index b69474e..53b34c7 100644 --- a/src/components/Results/SiteFeatures.tsx +++ b/src/components/Results/SiteFeatures.tsx @@ -5,7 +5,7 @@ import Heading from 'components/Form/Heading'; const styles = ` .content { - max-height: 32rem; + max-height: 50rem; overflow-y: auto; } diff --git a/src/components/Results/TraceRoute.tsx b/src/components/Results/TraceRoute.tsx index bf4d41e..de89c5d 100644 --- a/src/components/Results/TraceRoute.tsx +++ b/src/components/Results/TraceRoute.tsx @@ -30,9 +30,7 @@ p { } `; -const cardStyles = ` - grid-row: span 2; -`; +const cardStyles = ``; const TraceRouteCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => { const traceRouteResponse = props.data; diff --git a/src/pages/Results.tsx b/src/pages/Results.tsx index 162da70..8015c4f 100644 --- a/src/pages/Results.tsx +++ b/src/pages/Results.tsx @@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, ReactNode } from 'react'; import { useParams } from "react-router-dom"; import styled from 'styled-components'; import { ToastContainer } from 'react-toastify'; +import Masonry from 'react-masonry-css' import colors from 'styles/colors'; import Heading from 'components/Form/Heading'; @@ -59,6 +60,24 @@ import { const ResultsOuter = styled.div` display: flex; flex-direction: column; + .my-masonry-grid { + display: -webkit-box; /* Not needed if autoprefixing */ + display: -ms-flexbox; /* Not needed if autoprefixing */ + display: flex; + // margin: 1rem; + // margin-left: -30px; /* gutter size offset */ + width: auto; + } + .my-masonry-grid_column { + // margin-left: 30px; /* gutter size */ + background-clip: padding-box; + } + + /* Style your items */ + .my-masonry-grid_column > div { /* change div to reference your elements you put in */ + // background: grey; + // margin-bottom: 30px; +} `; const ResultsContent = styled.section` @@ -504,6 +523,11 @@ const Results = (): JSX.Element => { { address?.includes(window?.location?.hostname || 'web-check.as93.net') && } + + { resultCardData.map(({ id, title, result, refresh, Component }, index: number) => ( (result && !result.error) ? ( @@ -518,6 +542,7 @@ const Results = (): JSX.Element => { ) : <> )) } +