Make discover more responsive, improve compact appearance

lmcnulty · Aug 9, 2023 · 6d2275d · 6d2275d
1 parent 11e7741
commit 6d2275d
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 60 deletions.
diff --git a/site/gatsby-site/cypress/e2e/integration/discover.cy.js b/site/gatsby-site/cypress/e2e/integration/discover.cy.js
@@ -25,7 +25,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 28);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 28);
   });
 
   it('Performs a search and filters results', () => {
@@ -46,7 +46,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 8);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 8);
   });
 
   it('Filters by incident Id using top filters', { retries: { runMode: 4 } }, () => {
@@ -70,7 +70,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 28);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 28);
   });
 
   it('Filters by Language using top filters', { retries: { runMode: 4 } }, () => {
@@ -94,7 +94,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 4);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 4);
   });
 
   it('Filters by Tags using top filters', { retries: { runMode: 4 } }, () => {
@@ -118,7 +118,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 1);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 1);
   });
 
   it('Filters by incident Id using card button', { retries: { runMode: 4 } }, () => {
@@ -130,7 +130,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]')
+    cy.get('div[data-cy="hits-container"]')
       .children()
       .get('[title="Filter by Incident ID #10"]')
       .first()
@@ -146,7 +146,7 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 8);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 8);
   });
 
   it('Should flag an incident', () => {
@@ -501,6 +501,6 @@ describe('The Discover app', () => {
 
     cy.waitForStableDOM();
 
-    cy.get('div[class^="tw-hits-container"]').children().should('have.length.at.least', 8);
+    cy.get('div[data-cy="hits-container"]').children().should('have.length.at.least', 8);
   });
 });
diff --git a/site/gatsby-site/src/components/discover/Hits.js b/site/gatsby-site/src/components/discover/Hits.js
@@ -26,25 +26,19 @@ const Hits = ({ hits, isSearchStalled, toggleFilterByIncidentId, viewType }) =>
 
   if (!isMounted) return <></>;
 
-  let gridClasses = ``;
-
   const isLoading = isSearchStalled && isMounted;
 
-  switch (display) {
-    case 'list':
-      gridClasses = `${isLoading ? 'flex flex-wrap' : 'grid grid-cols-1'} gap-2`;
-      break;
-    case 'compact':
-      gridClasses = `${isLoading ? 'flex flex-wrap' : 'grid md:grid-cols-4'} gap-2`;
-      break;
-    case 'details':
-      gridClasses = `${isLoading ? 'flex flex-wrap' : 'grid md:grid-cols-4'} gap-2`;
-      break;
-  }
-
   return (
     <div
-      className={`tw-hits-container ml-auto mr-auto pl-3 pr-3 w-full lg:max-w-6xl xl:max-w-7xl mt-4 ${gridClasses}`}
+      data-cy="hits-container"
+      style={{
+        gridTemplateColumns: {
+          compact: 'repeat( auto-fit, minmax(18rem, 1fr) )',
+          details: 'repeat( auto-fit, minmax(18rem, 1fr) )',
+          list: '1fr',
+        }[display],
+      }}
+      className={`grid gap-2 mt-4 mx-auto px-3 w-full lg:max-w-6xl xl:max-w-7xl`}
     >
       {isLoading ? (
         display === 'list' ? (

diff --git a/site/gatsby-site/src/components/discover/hitTypes/Compact.js b/site/gatsby-site/src/components/discover/hitTypes/Compact.js
@@ -1,39 +1,77 @@
 import React from 'react';
 import { Image } from 'utils/cloudinary';
 import { fill } from '@cloudinary/base/actions/resize';
+
 import md5 from 'md5';
 import Actions from '../Actions';
-import { HeaderTitle, SourceDomainSubtitle } from './shared';
-import Card from 'elements/Card';
+import useLocalizePath from 'components/i18n/useLocalizePath';
+
+import { SourceDomainSubtitle, HeaderTitle } from './shared';
 import { useTranslation } from 'react-i18next';
+import TranslationBadge from 'components/i18n/TranslationBadge';
+import Card from 'elements/Card';
+import { VIEW_TYPES } from 'utils/discover';
 
 export default function Compact({ item, toggleFilterByIncidentId, viewType }) {
+  const localizePath = useLocalizePath();
+
   const { t } = useTranslation();
 
-  return (
-    <Card className="h-[240px] animate-all-0">
-      <Card.Body className="flex flex-col relative p-0">
-        <div className="pl-6 pr-6 pt-3 bg-[#000000b3] text-white bottom-0 absolute left-0 right-0 z-2 min-h-[40%]">
-          <HeaderTitle
-            item={item}
-            viewType={viewType}
-            className="text-base leading-4 text-white hover:opacity-90 max-h-[5em] overflow-hidden"
-          />
-          <SourceDomainSubtitle item={item} className="my-2 small text-gray-400 hover:opacity-90" />
-        </div>
+  const detailsPath =
+    viewType === VIEW_TYPES.INCIDENTS
+      ? localizePath({
+          path: `/cite/${item.incident_id}`,
+        })
+      : item.is_incident_report
+      ? localizePath({
+          path: `/cite/${item.incident_id}#r${item.objectID}`,
+        })
+      : localizePath({
+          path: `/reports/${item.report_number}`,
+        });
 
+  return (
+    <Card className="h-full" data-cy={item.mongodb_id} data-cy-report-number={item.report_number}>
+      <input type="hidden" data-cy="date-published" value={item.epoch_date_published} />
+      <input type="hidden" data-cy="date-submitted" value={item.epoch_date_submitted} />
+      <input type="hidden" data-cy="incident-date" value={item.epoch_incident_date} />
+      <div className="relative block h-[18rem]">
         <Image
-          className="object-cover absolute z-0 w-full h-full bottom-0 left-0 rounded-t-lg"
+          className={`absolute inset-0 card-img-top rounded-t-lg object-cover w-full`}
           publicID={item.cloudinary_id ? item.cloudinary_id : `legacy/${md5(item.image_url)}`}
           alt={item.title}
-          height={240}
-          transformation={fill().height(240)}
+          transformation={fill().height(480)}
           itemIdentifier={t('Report {{report_number}}', {
             report_number: item.report_number,
           }).replace(' ', '.')}
         />
-      </Card.Body>
-
+        <div className="absolute inset-0 flex justify-center items-end">
+          <div
+            className="
+            w-full
+            backdrop-blur-md
+            p-3
+            pb-2
+            rounded-md
+            bg-white/60
+            top-0
+            inset-x-0
+            shadow-lg
+            m-4
+          "
+          >
+            <a href={detailsPath}>
+              <HeaderTitle
+                item={item}
+                viewType={viewType}
+                className="mb-1 leading-tight text-xl hover:text-blue-500 text-black hover:text-black"
+              />
+            </a>
+            <SourceDomainSubtitle item={item} className="mb-2 [&>div>a]:text-black" />
+            <TranslationBadge originalLanguage={item.language} className="align-self-start mb-2" />
+          </div>
+        </div>
+      </div>
       <Card.Footer className="flex justify-between">
         <Actions toggleFilterByIncidentId={toggleFilterByIncidentId} item={item} />
       </Card.Footer>

diff --git a/site/gatsby-site/src/components/discover/hitTypes/shared.js b/site/gatsby-site/src/components/discover/hitTypes/shared.js
@@ -40,9 +40,9 @@ export function HeaderTitle({ item, ...props }) {
   );
 }
 
-export function SourceDomainSubtitle({ item }) {
+export function SourceDomainSubtitle({ item, className }) {
   return (
-    <div className="text-inherit">
+    <div className={`${className} text-inherit`}>
       <WebArchiveLink url={item.url} date={item.date_submitted}>
         {item.source_domain} &middot; {format(fromUnixTime(item.epoch_date_published), 'yyyy')}
       </WebArchiveLink>

diff --git a/site/gatsby-site/src/tailwind.css b/site/gatsby-site/src/tailwind.css
@@ -498,22 +498,6 @@
         @apply text-center;
     }
 
-    .tw-hits-container {
-        @apply grid grid-cols-1 min-576px:grid-cols-2 md:grid-cols-3 min-992px:grid-cols-4 gap-1.5;
-    }
-
-    .tw-hits-container.details {
-        @apply grid md:grid-cols-4 gap-2;
-    }
-
-    .tw-hits-container.compact {
-        @apply grid md:grid-cols-4 gap-2;
-    }
-
-    .tw-hits-container.list {
-        @apply grid grid-cols-1 gap-2;
-    }
-
     /* TAILWIND AIS PAGINATION START */
 
     .tw-ais-pagination {
@@ -614,7 +598,7 @@
   }
 
   .Typeahead input {
-    @apply text-sm leading-5 bg-gray-50 pt-2.5 pr-2.5 pb-2.5 border !important;
+    @apply text-sm leading-5 pt-2.5 pr-2.5 pb-2.5 border !important;
   }
 
   .Typeahead .rbt-menu.dropdown-menu {