Merge pull request #110 from georgetown-cset/detail-layout-and-content

Add intro blurb and adjust detail page layout
georgetown-cset · Sep 25, 2023 · 2d7e71f · 2d7e71f
2 parents b9607ec + b1f9b72
commit 2d7e71f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/web/gui-v2/src/components/DetailView.jsx b/web/gui-v2/src/components/DetailView.jsx
@@ -51,7 +51,7 @@ const styles = {
     }
 
     .description {
-      padding-right: 20px; /* TODO: CHECK FOR RESPONSIVENESS */
+      padding-right: 0;
       width: 100%;
 
       * + .metadata-table {

diff --git a/web/gui-v2/src/components/DetailViewIntro.jsx b/web/gui-v2/src/components/DetailViewIntro.jsx
@@ -1,17 +1,36 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { Table } from '@eto/eto-ui-components';
+import { Table, breakpoints } from '@eto/eto-ui-components';
 
 const styles = {
-  wrapper: css`
-    display: flex;
-    justify-content: space-between;
+  detailIntroWrapper: css`
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
     width: 100%;
+
+    ${breakpoints.tablet_small} {
+      grid-template-columns: 1fr 300px;
+    }
+  `,
+  descriptionBlurbs: css`
+    small {
+      color: var(--grey);
+      font-size: 75%;
+
+      a {
+        color: var(--bright-blue);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
   `,
-  descriptionBlurbs: css``,
   metadataTable: css`
-    margin-top: 0;
+    margin: 0 auto;
     width: 300px;
 
     td {
@@ -40,9 +59,18 @@ const DetailViewIntro = ({
   ];
 
   return (
-    <div css={styles.wrapper}>
+    <div css={styles.detailIntroWrapper}>
       <div css={styles.descriptionBlurbs}>
-        Description blurbs about the company go here....
+        {data?.wikipedia_description ?
+          <>
+            <div>{data.wikipedia_description}</div>
+            <small>
+              <a href={data.wikipedia_link}>Wikipedia</a>, retrieved {data.description_retrieval_date}
+            </small>
+          </>
+        :
+          <div>No description available</div>
+        }
       </div>
       <Table
         className="metadata-table"