From 6d2275d3acd9a1ed7d2a976a7ca0f9638663b31c Mon Sep 17 00:00:00 2001 From: Luna McNulty Date: Wed, 9 Aug 2023 12:46:14 -0400 Subject: [PATCH] Make discover more responsive, improve compact appearance --- .../cypress/e2e/integration/discover.cy.js | 16 ++-- .../src/components/discover/Hits.js | 24 +++--- .../components/discover/hitTypes/Compact.js | 74 ++++++++++++++----- .../components/discover/hitTypes/shared.js | 4 +- site/gatsby-site/src/tailwind.css | 18 +---- 5 files changed, 76 insertions(+), 60 deletions(-) diff --git a/site/gatsby-site/cypress/e2e/integration/discover.cy.js b/site/gatsby-site/cypress/e2e/integration/discover.cy.js index 701fd362a5..3982c300b7 100644 --- 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 index fd57f21b31..f389c771a0 100644 --- 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 (
{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 index 7ad3b55634..6085d41c34 100644 --- 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 ( - - -
- - -
+ 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 ( + + + + +
{item.title} - - +
+
+ + + + + +
+
+
diff --git a/site/gatsby-site/src/components/discover/hitTypes/shared.js b/site/gatsby-site/src/components/discover/hitTypes/shared.js index da2e0fdb14..a8e846ca9e 100644 --- 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 ( -
+
{item.source_domain} · {format(fromUnixTime(item.epoch_date_published), 'yyyy')} diff --git a/site/gatsby-site/src/tailwind.css b/site/gatsby-site/src/tailwind.css index c422ee379c..b55e11d0aa 100644 --- 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 {