feat: updated grid size on home page (#66)

galaxyproject · Sep 25, 2024 · 9c57d37 · 9c57d37
1 parent 0123448
commit 9c57d37
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 26 deletions.
diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx
@@ -26,7 +26,7 @@ export interface HeroProps {
 
 export const Hero = ({
   gridSize = GRID_SIZE,
-  height = gridSize * 4,
+  height = gridSize * 3,
 }: HeroProps): JSX.Element => {
   return (
     <SVG

diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts
@@ -6,13 +6,14 @@ import {
 import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import { black } from "@databiosphere/findable-ui/lib/theme/common/palette";
 import styled from "@emotion/styled";
+import { Section } from "../../../../../common/Section/section";
 import {
   section,
   sectionGrid,
   sectionLayout,
 } from "../../../../../Layout/components/AppLayout/components/Section/section.styles";
 
-export const Section = styled.section`
+export const StyledSection = styled(Section)`
   ${section};
   background-color: ${smokeLightest};
   overflow: hidden;

diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx
@@ -1,39 +1,49 @@
 import { Button } from "@mui/material";
+import { Fragment } from "react";
 import { ROUTES } from "../../../../../../../routes/constants";
+import { calculateGridSize } from "../../../../../Layout/components/Hero/common/utils";
 import { Carousel } from "./components/Carousel/carousel";
 import { Hero } from "./components/Hero/hero";
 import {
   Head,
   Headline,
-  Section,
   SectionLayout,
+  StyledSection,
   Subhead,
   SubHeadline,
 } from "./sectionHero.styles";
 
 export const SectionHero = (): JSX.Element => {
   return (
-    <Section>
-      <Hero gridSize={228} />
-      <SectionLayout>
-        <Headline>
-          <Head>
-            <span>Analytics for pathogen, </span>
-            <span>host, and vector data</span>
-          </Head>
-          <SubHeadline>
-            <Subhead>
-              Comprehensive tools for exploring and interpreting genomic
-              annotations and functional insights into disease-causing organisms
-              and their carriers
-            </Subhead>
-            <Button color="hero" href={ROUTES.ORGANISMS} variant="contained">
-              Get started
-            </Button>
-          </SubHeadline>
-        </Headline>
-        <Carousel />
-      </SectionLayout>
-    </Section>
+    <StyledSection>
+      {(height): JSX.Element => (
+        <Fragment>
+          <Hero gridSize={calculateGridSize(height)} height={height} />
+          <SectionLayout>
+            <Headline>
+              <Head>
+                <span>Analytics for pathogen, </span>
+                <span>host, and vector data</span>
+              </Head>
+              <SubHeadline>
+                <Subhead>
+                  Comprehensive tools for exploring and interpreting genomic
+                  annotations and functional insights into disease-causing
+                  organisms and their carriers
+                </Subhead>
+                <Button
+                  color="hero"
+                  href={ROUTES.ORGANISMS}
+                  variant="contained"
+                >
+                  Get started
+                </Button>
+              </SubHeadline>
+            </Headline>
+            <Carousel />
+          </SectionLayout>
+        </Fragment>
+      )}
+    </StyledSection>
   );
 };
diff --git a/app/components/Layout/components/Hero/common/utils.ts b/app/components/Layout/components/Hero/common/utils.ts
@@ -1,4 +1,10 @@
-import { SHAPE_HEIGHT, SHAPE_WIDTH, X_POSITION, Y_POSITION } from "./constants";
+import {
+  GRID_SIZE,
+  SHAPE_HEIGHT,
+  SHAPE_WIDTH,
+  X_POSITION,
+  Y_POSITION,
+} from "./constants";
 
 /**
  * Returns the path for the animateMotion element of the blue rectangle.
@@ -63,6 +69,22 @@ export function calculateCircleYPosition(
   return gridSize / 2 - (gridSize / 2) * Math.sin(degreesToRadians(angle));
 }
 
+/**
+ * Calculates the grid size based on the height and count.
+ * @param height - Section height.
+ * @param patternCount - Pattern count; vertical repeat of grid pattern.
+ * @returns grid size.
+ */
+export function calculateGridSize(
+  height = GRID_SIZE * 2,
+  patternCount?: number
+): number {
+  if (height <= GRID_SIZE * 2) {
+    return height / (patternCount || 2);
+  }
+  return height / (patternCount || 3);
+}
+
 /**
  * Returns radians from degrees.
  * @param angle - Angle.

diff --git a/app/components/common/Section/section.styles.ts b/app/components/common/Section/section.styles.ts
@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const StyledSection = styled.section`
+  width: 100%;
+`;
diff --git a/app/components/common/Section/section.tsx b/app/components/common/Section/section.tsx
@@ -0,0 +1,22 @@
+import {
+  getBorderBoxSizeHeight,
+  useResizeObserver,
+} from "@databiosphere/findable-ui/lib/hooks/useResizeObserver";
+import { useRef } from "react";
+import { StyledSection } from "./section.styles";
+
+export interface SectionProps {
+  children: (height?: number) => JSX.Element;
+  className?: string;
+}
+
+export const Section = ({ children, className }: SectionProps): JSX.Element => {
+  const sectionRef = useRef<HTMLElement>(null);
+  const { height } =
+    useResizeObserver(sectionRef, getBorderBoxSizeHeight) || {};
+  return (
+    <StyledSection className={className} ref={sectionRef}>
+      {children?.(height)}
+    </StyledSection>
+  );
+};