Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Searchcard #605

Open
wants to merge 12 commits into
base: dev
Choose a base branch
from
+123 −110
Open

Searchcard #605

Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b9880a1
[sitemap]: remove diallow all from sitemap
steveoni Oct 23, 2024
d631f49
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Nov 12, 2024
fcd12d7
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Nov 14, 2024
562a244
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Nov 15, 2024
eefd6d9
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Nov 21, 2024
81484dc
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Dec 8, 2024
447359a
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Dec 11, 2024
fdaf7e3
Merge branch 'dev' of https://github.com/wri/wri-odp into dev
steveoni Dec 13, 2024
f732728
update searchcard style
steveoni Dec 13, 2024
2fc092e
add aria-label to the footer
steveoni Dec 13, 2024
322b1ba
update test
steveoni Dec 13, 2024
16a9c14
update
steveoni Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 119 additions & 110 deletions deployment/frontend/src/components/search/DatasetHorizontalCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,136 +46,145 @@ export default function DatasetHorizontalCard({
dataset?.rw_id || dataset?.resources?.some((r) => r.datastore_active)

return (
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3 className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green">
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
<Link href={`/datasets/${dataset.name}`}>
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3
className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green"
tabIndex={0}
>
<span className="my-auto">{format}</span>
</span>
))}
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
>
<span className="my-auto">{format}</span>
</span>
))}
</div>
</div>
</div>

<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>
<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>

<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
.toLocaleDateString('en-US', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
.toLocaleDateString(
'en-US',
{
day: 'numeric',
month: 'short',
year: 'numeric',
}
)
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>
<Link href={`/datasets/${dataset.name}`}>
<div className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
<div className="text-base leading-[24px] font-bold">
View dataset
</div>
<div className="pt-0.5">
<ChevronRightIcon className="h-4 w-4 stroke-current stroke-[3] " />
</div>
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>
</Link>

<Link href={`/datasets/${dataset.name}`}>
<div className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
<div className="text-base leading-[24px] font-bold">
View dataset
</div>
<div className="pt-0.5">
<ChevronRightIcon className="h-4 w-4 stroke-current stroke-[3] " />
</div>
</div>
</Link>
</div>
</div>
</div>
</Link>
)
}
Loading