Merge pull request #930: Showcase refactor and additions

nextstrain · Jun 27, 2024 · f827221 · f827221
2 parents 05aba2b + e71d5e1
commit f827221
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 70 deletions.
diff --git a/static-site/content/resource-listing.yaml b/static-site/content/resource-listing.yaml
@@ -94,3 +94,11 @@ coreShowcase:
     img: zika.png
     filters:
       - zika
+  - name: Mumps
+    img: mumps.jpg
+    filters:
+      - mumps
+  - name: Enterovirus
+    img: enterovirus.jpg
+    filters:
+      - enterovirus
diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx
@@ -11,7 +11,7 @@ import { ResourceGroup } from './ResourceGroup';
 import { ErrorContainer } from "../../pages/404";
 import { TooltipWrapper } from "./IndividualResource";
 import {ResourceModal, SetModalResourceContext} from "./Modal";
-import { CardImgWrapper, CardInner, CardOuter, CardTitle, Showcase } from "../Showcase";
+import { Showcase } from "../Showcase";
 import { FilterCard, FilterOption, Group, QuickLink, Resource, ResourceListingInfo } from './types';
 import { HugeSpacer } from "../../layouts/generalComponents";
 
@@ -83,7 +83,7 @@ function ListResources({
         </Byline>
 
         <SetSelectedFilterOptions.Provider value={setSelectedFilterOptions}>
-          <Showcase cards={showcaseCards} CardComponent={FilterShowcaseTile} />
+          <Showcase cards={showcaseCards} cardWidth={cardWidthHeight} cardHeight={cardWidthHeight} CardComponent={FilterShowcaseTile} />
         </SetSelectedFilterOptions.Provider>
         </>
       )}
@@ -310,3 +310,58 @@ const useShowcaseCards = (cards?: FilterCard[], groups?: Group[]) => {
   }, [cards, groups]);
   return restrictedCards;
 }
+
+const cardWidthHeight = 160; // pixels
+
+const CardOuter = styled.div`
+  background-color: #FFFFFF;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  min-width: ${cardWidthHeight}px;
+  min-height: ${cardWidthHeight}px;
+  max-width: ${cardWidthHeight}px;
+  max-height: ${cardWidthHeight}px;
+`
+
+const CardInner = styled.div`
+  margin: 5px 10px 5px 10px;
+  cursor: pointer;
+`;
+
+const CardTitle = styled.div<{$squashed: boolean}>`
+  font-family: ${(props) => props.theme.generalFont};
+  font-weight: 500;
+  font-size: ${(props) => props.$squashed ? "21px" : "25px"};
+  @media (max-width: 768px) {
+    font-size: 22px;
+  }
+  position: absolute;
+  border-radius: 3px;
+  padding: 10px 20px 10px 10px;
+  top: 15px;
+  left: 20px;
+  color: white;
+  background: rgba(0, 0, 0, 0.7);
+`;
+
+const CardImg = styled.img`
+  object-fit: contain;
+  border-radius: 6px;
+  box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
+  max-height: 100%;
+  width: 100%;
+  float: right;
+`;
+
+const CardImgWrapper = ({filename}) => {
+  let src;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    src = require(`../../../static/splash_images/${filename}`).default.src;
+  } catch {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    src = require(`../../../static/splash_images/empty.png`).default.src;
+  }
+  return <CardImg src={src} alt={""} />
+}
diff --git a/static-site/src/components/Showcase/index.tsx b/static-site/src/components/Showcase/index.tsx
@@ -2,21 +2,20 @@
 import React, { useState } from 'react';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import styled from 'styled-components';
-import { CardImg } from "../Cards/styles";
-import { theme } from "../../layouts/theme";
 import { Card } from './types';
 
-const cardWidthHeight = 160; // pixels
-const expandPreviewHeight = 50 //pixels
+const expandPreviewHeight = 60 //pixels
 const transitionDuration = "0.3s"
 const transitionTimingFunction = "ease"
 
 interface ShowcaseProps<AnyCard extends Card> {
     cards: AnyCard[]
+    cardWidth: number
+    cardHeight: number
     CardComponent: React.FunctionComponent<{ card: AnyCard }>
 }
 
-export const Showcase = <AnyCard extends Card>({cards, CardComponent}: ShowcaseProps<AnyCard>) => {
+export const Showcase = <AnyCard extends Card>({cards, cardWidth, cardHeight, CardComponent}: ShowcaseProps<AnyCard>) => {
 
   const [cardsContainerHeight, setCardsContainerHeight] = useState<number>(0);
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
@@ -37,12 +36,12 @@ export const Showcase = <AnyCard extends Card>({cards, CardComponent}: ShowcaseP
     }
   }
 
-  const isExpandable = cardsContainerHeight > cardWidthHeight;
+  const isExpandable = cardsContainerHeight > cardHeight;
 
   return (
     <div>
-      <ShowcaseContainer className={!isExpandable ? "" : isExpanded ? "expanded" : "collapsed"} $expandedHeight={cardsContainerHeight}>
-        <CardsContainer ref={cardsContainerRef}>
+      <ShowcaseContainer className={!isExpandable ? "" : isExpanded ? "expanded" : "collapsed"} $cardHeight={cardHeight} $expandedHeight={cardsContainerHeight}>
+        <CardsContainer ref={cardsContainerRef} $cardWidth={cardWidth}>
           {cards.map((el) => {
             return <CardComponent card={el} key={el.name} />
           })}
@@ -63,12 +62,12 @@ export const Showcase = <AnyCard extends Card>({cards, CardComponent}: ShowcaseP
  * NOTE: Many of the React components here are taken from the existing Cards UI
  */
 
-const ShowcaseContainer = styled.div<{$expandedHeight: number}>`
+const ShowcaseContainer = styled.div<{$cardHeight: number, $expandedHeight: number}>`
   position: relative;
   overflow-y: hidden;
 
   &.collapsed {
-    max-height: ${cardWidthHeight + expandPreviewHeight}px;
+    max-height: ${(props) => props.$cardHeight + expandPreviewHeight}px;
   }
 
   &.expanded {
@@ -110,67 +109,14 @@ const PreviewOverlay = styled.div`
   transition: opacity ${transitionDuration} ${transitionTimingFunction};
 `;
 
-const CardsContainer = styled.div`
-  /* background-color: #ffeab0; */
+const CardsContainer = styled.div<{$cardWidth: number}>`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(${cardWidthHeight}px, max-content));
-  grid-gap: 1%;
+  grid-template-columns: repeat(auto-fit, ${(props) => `${props.$cardWidth}px`});
+  gap: 10px;
   overflow: hidden;
   justify-content: center;
 `;
 
 const Spacer = styled.div`
   min-height: 25px;
 `
-
-export const CardOuter = styled.div`
-  background-color: #FFFFFF;
-  padding: 0;
-  overflow: hidden;
-  position: relative;
-  min-width: ${cardWidthHeight}px;
-  min-height: ${cardWidthHeight}px;
-  max-width: ${cardWidthHeight}px;
-  max-height: ${cardWidthHeight}px;
-`
-
-export const CardInner = styled.div`
-  margin: 5px 10px 5px 10px;
-  cursor: pointer;
-`;
-
-export const CardTitle = styled.div<{$squashed: boolean}>`
-  font-family: ${(props) => props.theme.generalFont};
-  font-weight: 500;
-  font-size: ${(props) => props.$squashed ? "21px" : "25px"};
-  @media (max-width: 768px) {
-    font-size: 22px;
-  }
-  position: absolute;
-  border-radius: 3px;
-  padding: 10px 20px 10px 10px;
-  top: 15px;
-  left: 20px;
-  color: white;
-  background: rgba(0, 0, 0, 0.7);
-`;
-
-const themeColors = [...theme.titleColors];
-const getColor = () => {
-  // rotate colors by moving the first color (which is always defined) to the end
-  themeColors.push(themeColors.shift()!);
-  // return the last color
-  return themeColors.at(-1);
-}
-
-export const CardImgWrapper = ({filename}) => {
-  let src;
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    src = require(`../../../static/splash_images/${filename}`).default.src;
-  } catch {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    src = require(`../../../static/splash_images/empty.png`).default.src;
-  }
-  return <CardImg src={src} alt={""} color={getColor()}/>
-}
diff --git a/static-site/src/components/splash/index.jsx b/static-site/src/components/splash/index.jsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
+import styled from 'styled-components';
 import ScrollableAnchor, { configureAnchors } from '../../../vendored/react-scrollable-anchor/index';
 import Title from "./title";
 import * as Styles from "./styles";
 import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter, Line } from "../../layouts/generalComponents";
 import Footer from "../Footer";
-import { CardImgWrapper, CardInner, CardOuter, CardTitle, Showcase } from "../Showcase";
+import { Showcase } from "../Showcase";
 import { cards } from "./showcase.yaml";
 
 const Section = ({id, title, abstract, buttonText, buttonLink}) => (
@@ -65,7 +66,7 @@ const Splash = () => {
       </Styles.H1Small>
 
       <BigSpacer/>
-      <Showcase cards={cards} CardComponent={UrlShowcaseTile} />
+      <Showcase cards={cards} cardWidth={cardWidthHeight} cardHeight={cardWidthHeight} CardComponent={UrlShowcaseTile} />
 
       <BigSpacer/>
 
@@ -207,6 +208,8 @@ const Splash = () => {
 export default Splash;
 
 
+/*** SHOWCASE ***/
+
 const UrlShowcaseTile = ({ card }) => {
   return (
     <CardOuter>
@@ -221,3 +224,58 @@ const UrlShowcaseTile = ({ card }) => {
     </CardOuter>
   )
 }
+
+const cardWidthHeight = 160; // pixels
+
+const CardOuter = styled.div`
+  background-color: #FFFFFF;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  min-width: ${cardWidthHeight}px;
+  min-height: ${cardWidthHeight}px;
+  max-width: ${cardWidthHeight}px;
+  max-height: ${cardWidthHeight}px;
+`
+
+const CardInner = styled.div`
+  margin: 5px 10px 5px 10px;
+  cursor: pointer;
+`;
+
+const CardTitle = styled.div`
+  font-family: ${(props) => props.theme.generalFont};
+  font-weight: 500;
+  font-size: ${(props) => props.$squashed ? "21px" : "25px"};
+  @media (max-width: 768px) {
+    font-size: 22px;
+  }
+  position: absolute;
+  border-radius: 3px;
+  padding: 10px 20px 10px 10px;
+  top: 15px;
+  left: 20px;
+  color: white;
+  background: rgba(0, 0, 0, 0.7);
+`;
+
+const CardImg = styled.img`
+  object-fit: contain;
+  border-radius: 6px;
+  box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
+  max-height: 100%;
+  width: 100%;
+  float: right;
+`;
+
+const CardImgWrapper = ({filename}) => {
+  let src;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    src = require(`../../../static/splash_images/${filename}`).default.src;
+  } catch {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    src = require(`../../../static/splash_images/empty.png`).default.src;
+  }
+  return <CardImg src={src} alt={""} />
+}