Skip to content

Commit 5e0dc08

Browse files
MikaMunterudMikaMunterud
authored
Merge pull request #495 from diggsweden/DIGG-471
DIGG-471: Updating promos, teasers and result list to be more screen …
2 parents e1173f8 + faa4872 commit 5e0dc08

File tree

8 files changed

+77
-76
lines changed

8 files changed

+77
-76
lines changed

‎components/content/GridList/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,10 @@ export const GridList: FC<ListProps> = ({
5656
{items.length > 0 ? (
5757
<ul className="gap-4 grid grid-cols-1 gap-xl md:grid-cols-2 lg:grid-cols-3">
5858
{items.map((item, idx) => (
59-
<li key={idx}>
59+
<li
60+
key={idx}
61+
className="group relative flex h-full flex-col justify-between no-underline"
62+
>
6063
{(() => {
6164
switch (item.__typename) {
6265
case "dataportal_Digg_Tool":

‎components/content/Promo/index.tsx

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,7 @@ export const Promo: FC<PromoProps> = ({
3131
: null;
3232

3333
return (
34-
<Link
35-
href={slug}
36-
className="group flex h-full flex-col bg-white text-brown-900 no-underline"
37-
>
34+
<>
3835
{image && (
3936
<CustomImage
4037
image={image}
@@ -44,17 +41,22 @@ export const Promo: FC<PromoProps> = ({
4441
/>
4542
)}
4643
<div className="flex h-full flex-col p-lg">
47-
<Heading
48-
level={heading ? 3 : 2}
49-
size="sm"
50-
className={ingress ? "mb-sm" : "mb-lg"}
44+
<Link
45+
href={slug}
46+
className="before:focus--outline before:focus--out before:focus--primary focus--none no-underline before:absolute before:inset-none"
5147
>
52-
{title}
53-
</Heading>
48+
<Heading
49+
level={heading ? 3 : 2}
50+
size="sm"
51+
className={ingress ? "mb-sm" : "mb-lg"}
52+
>
53+
{title}
54+
</Heading>
55+
</Link>
5456
{ingress && (
5557
<p className="mb-lg line-clamp-3 text-brown-600">{ingress}</p>
5658
)}
57-
<span className="button button--small button--primary focus--none mt-auto">
59+
<span className="button button--small button--primary focus--none mt-auto group-focus-within:bg-brown-800">
5860
{t("read-more")}
5961
{isExternalLink(slug) ? (
6062
<>
@@ -76,6 +78,6 @@ export const Promo: FC<PromoProps> = ({
7678
)}
7779
</span>
7880
</div>
79-
</Link>
81+
</>
8082
);
8183
};

‎components/content/Publication/PublicationTeaser/index.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,7 @@ export const PublicationTeaser: FC<PublicationTeaserProps> = ({
3131
}, []);
3232

3333
return (
34-
<Link
35-
href={type.url}
36-
className="group flex h-full flex-col justify-between no-underline"
37-
scroll={false}
38-
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
39-
>
34+
<>
4035
<div>
4136
<CustomImage
4237
image={image}
@@ -46,15 +41,22 @@ export const PublicationTeaser: FC<PublicationTeaserProps> = ({
4641
/>
4742
<div className="px-md pt-lg text-sm text-textPrimary">
4843
<span className="text-textSecondary">{`${type.name} | ${date}`}</span>
49-
<Heading className="pb-md pt-sm" level={3} size={"sm"}>
50-
{heading}
51-
</Heading>
44+
<Link
45+
href={type.url}
46+
className="before:focus--outline before:focus--out before:focus--primary focus--none no-underline before:absolute before:inset-none"
47+
scroll={false}
48+
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
49+
>
50+
<Heading className="pb-md pt-sm" level={3} size={"sm"}>
51+
{heading}
52+
</Heading>
53+
</Link>
5254
</div>
5355
</div>
5456

55-
<span className="button button--small button--plain focus--none">
57+
<span className="button button--small button--plain focus--none group-focus-within:bg-brown-200">
5658
Läs mer <ArrowIcon height={16} width={16} viewBox="0 0 24 24" />
5759
</span>
58-
</Link>
60+
</>
5961
);
6062
};

‎components/content/Search/SearchPage/SearchContentPage/index.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -216,29 +216,28 @@ export const SearchContentPage: FC<SearchProps> = () => {
216216
<ul className="search-result-list space-y-lg md:space-y-xl">
217217
{searchResult.hits &&
218218
searchResult.hits.map((hit: SearchHit, index: number) => (
219-
<li className="max-w-lg" key={index}>
219+
<li className="group relative max-w-lg" key={index}>
220220
<Link
221221
href={`${cleanDoubleSlash(hit.url!)}#ref=${
222222
window ? window.location.search : ""
223223
}`}
224224
onClick={() => {
225225
saveCurrentScrollPos();
226226
}}
227-
className="group no-underline"
227+
className="before:focus--outline before:focus--out before:focus--primary focus--none no-underline before:absolute before:inset-none"
228228
>
229229
<Heading
230230
level={3}
231231
size="sm"
232-
className={`focus--underline focus--outline focus--primary focus--out mb-sm font-normal
233-
text-green-600 group-hover:underline`}
232+
className={`mb-sm font-normal text-green-600 group-focus-within:underline group-hover:underline`}
234233
lang={hit.titleLang}
235234
>
236235
{highlightWords(hit.title)}
237236
</Heading>
238-
{hit.description && (
239-
<p>{highlightWords(hit.description)}</p>
240-
)}
241237
</Link>
238+
{hit.description && (
239+
<p>{highlightWords(hit.description)}</p>
240+
)}
242241
</li>
243242
))}
244243
</ul>

‎components/content/Search/SearchResults/index.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const SortingOptions: FC<{
6666
<Button
6767
size="sm"
6868
variant="plain"
69-
className="hidden md:order-none md:block"
69+
className="hidden md:order-none md:flex"
7070
icon={isCompact ? ListIcon : DetailedListIcon}
7171
iconPosition="left"
7272
aria-label={
@@ -272,16 +272,13 @@ export const SearchResults: FC<SearchResultsProps> = ({
272272
<ul className="search-result-list space-y-xl">
273273
{search.result.hits &&
274274
search.result.hits.map((hit, index) => (
275-
<li
276-
className="max-w-lg focus-within:outline-dashed focus-within:outline-[3px] focus-within:outline-offset-2 focus-within:outline-primary"
277-
key={index}
278-
>
275+
<li className="group relative max-w-lg" key={index}>
279276
<Link
280277
href={hit.url}
281278
onClick={() => {
282279
saveCurrentScrollPos();
283280
}}
284-
className="focus--none group block no-underline"
281+
className="focus--none before:focus--outline before:focus--out before:focus--primary block no-underline before:absolute before:inset-none"
285282
>
286283
<Heading
287284
level={3}

‎components/content/Tool/index.tsx

Lines changed: 31 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,8 @@ export const Toolteaser: FC<ToolsTeaserProps> = ({ tools }) => {
2020
const { t } = useTranslation("common");
2121
return (
2222
<div className="h-full">
23-
<div
24-
className="group flex h-full flex-col justify-between gap-lg bg-white p-lg focus-within:outline-dashed
25-
focus-within:outline-[3px] focus-within:outline-offset-2 focus-within:outline-primary"
26-
>
27-
<div className="flex flex-col-reverse gap-sm">
23+
<div className="flex h-full flex-col justify-between gap-lg bg-white p-lg">
24+
<div className="flex h-full flex-col-reverse gap-sm">
2825
<Button
2926
variant="plain"
3027
size="sm"
@@ -35,46 +32,44 @@ export const Toolteaser: FC<ToolsTeaserProps> = ({ tools }) => {
3532
setShowModal(true);
3633
}}
3734
label={t("preview")}
38-
className="focus--none"
35+
className="focus--none no-group-hover z-20"
3936
aria-label={`${t("preview")} ${t("support-tools")} - ${heading}`}
4037
/>
41-
<div className="flex flex-col gap-sm">
42-
<Link
43-
href={link}
44-
className="focus--none flex flex-col gap-sm no-underline focus-visible:underline"
45-
>
46-
<div className="flex items-center justify-between [&_svg_path]:fill-red-400 group-hover:[&_svg_path]:fill-green-600">
47-
<span
48-
className={`px-sm py-[2px] text-sm ${
49-
!isExternalLink(link)
50-
? "bg-brown-800 text-white"
51-
: "bg-brown-200 text-brown-900"
52-
}`}
53-
>
54-
{domainLabel}
55-
</span>
56-
{isExternalLink(link) ? (
57-
<>
58-
<ExternalLinkIcon className="translate-x-0 transform transition-transform duration-500 group-hover:translate-x-1/3" />
59-
<span className="sr-only">
60-
{t("common|open-in-new-tab")}
61-
</span>
62-
</>
63-
) : (
64-
<InternalLinkIcon className="translate-x-0 transform transition-transform duration-500 group-hover:translate-x-1/3" />
65-
)}
66-
</div>
67-
<div>
38+
<div className="flex h-full flex-col gap-sm">
39+
<div className="flex items-center justify-between gap-sm [&_svg_path]:fill-red-400 group-hover:[&_svg_path]:fill-green-600">
40+
<span
41+
className={`px-sm py-[2px] text-sm ${
42+
!isExternalLink(link)
43+
? "bg-brown-800 text-white"
44+
: "bg-brown-200 text-brown-900"
45+
}`}
46+
>
47+
{domainLabel}
48+
</span>
49+
{isExternalLink(link) ? (
50+
<>
51+
<ExternalLinkIcon className="flex-shrink-0 transform transition-transform duration-500 group-hover:translate-x-1/3" />
52+
<span className="sr-only">{t("common|open-in-new-tab")}</span>
53+
</>
54+
) : (
55+
<InternalLinkIcon className="flex-shrink-0 transform transition-transform duration-500 group-hover:translate-x-1/3" />
56+
)}
57+
</div>
58+
<div>
59+
<Link
60+
href={link}
61+
className="link-focus before:focus--outline before:focus--out before:focus--primary focus--none z-10 flex flex-col gap-sm no-underline before:absolute before:inset-none focus-visible:underline"
62+
>
6863
<Heading
6964
className="text-green-600 group-hover:underline"
7065
level={3}
7166
size={"xs"}
7267
>
7368
{heading}
7469
</Heading>
75-
</div>
76-
</Link>
77-
<p className="line-clamp-3 text-sm">{preamble}</p>
70+
</Link>
71+
</div>
72+
<p className="line-clamp-3 flex-grow text-sm">{preamble}</p>
7873
</div>
7974
</div>
8075
</div>

‎components/content/blocks/RelatedContentBlock/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ export const RelatedContentBlock: FC<RelatedContentProps> = ({
4747
>
4848
{links.map((link: PromoProps, idx: number) => {
4949
return (
50-
<li key={idx} className="block">
50+
<li
51+
key={idx}
52+
className="group relative flex h-full flex-col bg-white text-brown-900"
53+
>
5154
<Promo {...link} heading={heading} />
5255
</li>
5356
);

‎styles/base.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@ body {
106106
@apply bg-brown-600 text-white [&_path]:fill-white [&_svg]:rotate-180;
107107
}
108108
.button--plain {
109-
@apply bg-transparent text-brown-600 hover:bg-brown-200 focus-visible:bg-brown-200 group-hover:bg-brown-200 group-focus:bg-brown-200
110-
[&_path]:fill-brown-600;
109+
@apply bg-transparent text-brown-600 hover:bg-brown-200 focus-visible:bg-brown-200 group-focus:bg-brown-200
110+
[&:not(.no-group-hover)]:group-hover:bg-brown-200 [&_path]:fill-brown-600;
111111
}
112112
.button--plain.active {
113113
@apply outline outline-2 outline-brown-600 [&_svg]:rotate-180;

0 commit comments

Comments
 (0)