add single dataset key photo (#117)

Implemented as in #31. Adds the dataset level key photo. Note: actual key photo not available from database yet. Contains CSS code which does not run on IE (which when synced with @codemonkey800 is not a browser we support anyways). https://github.com/chanzuckerberg/cryoet-data-portal/assets/29165011/fc18e9c5-4e2a-4732-8bb7-11217ea6e33e
chanzuckerberg · Nov 2, 2023 · 54df7d1 · 54df7d1
1 parent 24f4b5f
commit 54df7d1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetKeyPhoto.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetKeyPhoto.tsx
@@ -12,7 +12,7 @@ export function DatasetKeyPhoto({
   src?: string
 }) {
   const { isLoadingDebounced } = useIsLoading()
-  const containerClassName = 'flex-shrink-0 basis-[134px] h-[100px]'
+  const containerClassName = 'flex-shrink-0 basis-[134px] aspect-[4/3]'
 
   if (isLoadingDebounced) {
     return <Skeleton className={containerClassName} variant="rounded" />
@@ -23,6 +23,7 @@ export function DatasetKeyPhoto({
       className={cns(
         containerClassName,
         'flex items-center justify-center bg-[#d9d9d9]',
+        'rounded-sds-m',
 
         // crop image to container dimensions
         'overflow-hidden object-cover',

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
@@ -145,7 +145,7 @@ export function DatasetDescription() {
   )
 
   return (
-    <div className="flex flex-col w-full gap-sds-xl">
+    <div className="flex flex-col gap-sds-xl">
       <p className="text-sds-body-m leading-sds-body-m">
         {dataset.description}
       </p>

diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -1,6 +1,7 @@
 import { Button, Icon } from '@czi-sds/components'
 import { useSearchParams } from '@remix-run/react'
 
+import { DatasetKeyPhoto } from 'app/components/BrowseData/DatasetKeyPhoto'
 import { DatasetDescription } from 'app/components/Dataset/DatasetDescription'
 import { Link } from 'app/components/Link'
 import { useDatasetById } from 'app/hooks/useDatasetById'
@@ -103,9 +104,19 @@ export function DatasetHeader() {
             </Button>
           </div>
         </div>
-        <div className="flex flex-row">
-          <DatasetDescription />
-          {/* add key photo here */}
+        <div className="flex flex-row gap-sds-xxl">
+          <div className="flex-1 min-w-[300px]">
+            <DatasetDescription />
+          </div>
+          <div className="flex-1 flex w-full">
+            <div className="flex-initial w-sds-xxl" />
+            <div className="flex-shrink-0 w-full max-w-[465px]">
+              <DatasetKeyPhoto
+                datasetTitle={dataset.title}
+                src="https://cataas.com/cat"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </header>