Skip to content

Commit 9c57d37

Browse files
Fran McDadeFran McDade
Fran McDade
authored and
Fran McDade
committed
feat: updated grid size on home page (#66)
1 parent 0123448 commit 9c57d37

File tree

6 files changed

+86
-26
lines changed

6 files changed

+86
-26
lines changed

‎app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export interface HeroProps {
2626

2727
export const Hero = ({
2828
gridSize = GRID_SIZE,
29-
height = gridSize * 4,
29+
height = gridSize * 3,
3030
}: HeroProps): JSX.Element => {
3131
return (
3232
<SVG

‎app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import {
66
import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
77
import { black } from "@databiosphere/findable-ui/lib/theme/common/palette";
88
import styled from "@emotion/styled";
9+
import { Section } from "../../../../../common/Section/section";
910
import {
1011
section,
1112
sectionGrid,
1213
sectionLayout,
1314
} from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
1415

15-
export const Section = styled.section`
16+
export const StyledSection = styled(Section)`
1617
${section};
1718
background-color: ${smokeLightest};
1819
overflow: hidden;

‎app/components/Home/components/Section/components/SectionHero/sectionHero.tsx

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,49 @@
11
import { Button } from "@mui/material";
2+
import { Fragment } from "react";
23
import { ROUTES } from "../../../../../../../routes/constants";
4+
import { calculateGridSize } from "../../../../../Layout/components/Hero/common/utils";
35
import { Carousel } from "./components/Carousel/carousel";
46
import { Hero } from "./components/Hero/hero";
57
import {
68
Head,
79
Headline,
8-
Section,
910
SectionLayout,
11+
StyledSection,
1012
Subhead,
1113
SubHeadline,
1214
} from "./sectionHero.styles";
1315

1416
export const SectionHero = (): JSX.Element => {
1517
return (
16-
<Section>
17-
<Hero gridSize={228} />
18-
<SectionLayout>
19-
<Headline>
20-
<Head>
21-
<span>Analytics for pathogen, </span>
22-
<span>host, and vector data</span>
23-
</Head>
24-
<SubHeadline>
25-
<Subhead>
26-
Comprehensive tools for exploring and interpreting genomic
27-
annotations and functional insights into disease-causing organisms
28-
and their carriers
29-
</Subhead>
30-
<Button color="hero" href={ROUTES.ORGANISMS} variant="contained">
31-
Get started
32-
</Button>
33-
</SubHeadline>
34-
</Headline>
35-
<Carousel />
36-
</SectionLayout>
37-
</Section>
18+
<StyledSection>
19+
{(height): JSX.Element => (
20+
<Fragment>
21+
<Hero gridSize={calculateGridSize(height)} height={height} />
22+
<SectionLayout>
23+
<Headline>
24+
<Head>
25+
<span>Analytics for pathogen, </span>
26+
<span>host, and vector data</span>
27+
</Head>
28+
<SubHeadline>
29+
<Subhead>
30+
Comprehensive tools for exploring and interpreting genomic
31+
annotations and functional insights into disease-causing
32+
organisms and their carriers
33+
</Subhead>
34+
<Button
35+
color="hero"
36+
href={ROUTES.ORGANISMS}
37+
variant="contained"
38+
>
39+
Get started
40+
</Button>
41+
</SubHeadline>
42+
</Headline>
43+
<Carousel />
44+
</SectionLayout>
45+
</Fragment>
46+
)}
47+
</StyledSection>
3848
);
3949
};

‎app/components/Layout/components/Hero/common/utils.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { SHAPE_HEIGHT, SHAPE_WIDTH, X_POSITION, Y_POSITION } from "./constants";
1+
import {
2+
GRID_SIZE,
3+
SHAPE_HEIGHT,
4+
SHAPE_WIDTH,
5+
X_POSITION,
6+
Y_POSITION,
7+
} from "./constants";
28

39
/**
410
* Returns the path for the animateMotion element of the blue rectangle.
@@ -63,6 +69,22 @@ export function calculateCircleYPosition(
6369
return gridSize / 2 - (gridSize / 2) * Math.sin(degreesToRadians(angle));
6470
}
6571

72+
/**
73+
* Calculates the grid size based on the height and count.
74+
* @param height - Section height.
75+
* @param patternCount - Pattern count; vertical repeat of grid pattern.
76+
* @returns grid size.
77+
*/
78+
export function calculateGridSize(
79+
height = GRID_SIZE * 2,
80+
patternCount?: number
81+
): number {
82+
if (height <= GRID_SIZE * 2) {
83+
return height / (patternCount || 2);
84+
}
85+
return height / (patternCount || 3);
86+
}
87+
6688
/**
6789
* Returns radians from degrees.
6890
* @param angle - Angle.

‎app/components/common/Section/section.styles.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from "@emotion/styled";
2+
3+
export const StyledSection = styled.section`
4+
width: 100%;
5+
`;

‎app/components/common/Section/section.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
getBorderBoxSizeHeight,
3+
useResizeObserver,
4+
} from "@databiosphere/findable-ui/lib/hooks/useResizeObserver";
5+
import { useRef } from "react";
6+
import { StyledSection } from "./section.styles";
7+
8+
export interface SectionProps {
9+
children: (height?: number) => JSX.Element;
10+
className?: string;
11+
}
12+
13+
export const Section = ({ children, className }: SectionProps): JSX.Element => {
14+
const sectionRef = useRef<HTMLElement>(null);
15+
const { height } =
16+
useResizeObserver(sectionRef, getBorderBoxSizeHeight) || {};
17+
return (
18+
<StyledSection className={className} ref={sectionRef}>
19+
{children?.(height)}
20+
</StyledSection>
21+
);
22+
};

0 commit comments

Comments
 (0)