Skip to content

Commit 3ead868

Browse files
JamesWChanJamesWChan
authored
Merge pull request #207 from nationalarchives/feature/card-redesign
Feature/card redesign
2 parents dff4085 + 2a69f90 commit 3ead868

12 files changed

+114
-107
lines changed

‎sass/includes/_card-groups.scss

+43-20
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,40 @@
1818
&-secondary-nav {
1919
display: inline-block;
2020
width: 100%;
21-
&__link {
21+
&__image-link {
2222
@extend .tna-card__link;
2323
@include explorer-link;
24-
display: table;
24+
}
25+
26+
&__title-link {
27+
@extend .tna-card__link;
28+
29+
display: inline;
30+
color: $color__blue_3;
31+
&:hover, &:active {
32+
color: $color__blue_3;
33+
}
34+
&:focus {
35+
outline-offset: .2rem;
36+
}
37+
}
38+
39+
&__heading {
40+
display: inline;
2541
}
2642

2743
&__image {
2844
@extend .tna-card__image;
2945
border: 0.0625rem solid $color__black;
30-
display: table-header-group;
3146
&-fallback {
3247
width: 100%;
3348
}
3449
}
3550

3651
&__body {
37-
display: table-footer-group;
38-
}
39-
40-
&__heading, &__paragraph, &__span {
41-
padding-left: 0.3rem;
42-
padding-right: 0.3rem;
52+
padding-left: 0.28rem;
53+
padding-right: 0.28rem;
54+
padding-top: 0.28rem;
4355
}
4456

4557
&__span {
@@ -58,31 +70,42 @@
5870
&__image {
5971
@extend .tna-card__image;
6072
border: 0.0625rem solid $color__black;
73+
margin-top: 0.7rem;
6174
&-fallback {
6275
width: 100%;
6376
}
77+
&:hover {
78+
outline: 0.313rem solid $color__black;
79+
}
6480
}
6581

6682
&__link {
6783
@extend .tna-card__link;
68-
@include explorer-link;
69-
70-
text-decoration: none;
84+
display: inline;
85+
color: $color__blue_3;
86+
text-decoration: underline;
87+
margin-left: 0.5rem;
88+
&:active {
89+
color: $color__blue_3;
90+
}
91+
&:hover {
92+
color: $color__blue_3;
93+
text-decoration: none;
94+
}
95+
&:focus {
96+
outline-offset: .2rem;
97+
}
7198
}
7299

73100
&__body {
74-
padding-left: 0.3rem;
75-
padding-right: 0.3rem;
76-
margin-top: 1rem;
77-
text-decoration: underline;
101+
margin-left: 0.5rem;
102+
margin-top: 0.5rem;
78103
}
79-
104+
80105
&__heading {
81106
font-size: 1.3rem;
82107
font-weight: 700;
83-
padding-left: 0.3rem;
84-
padding-right: 0.3rem;
85-
text-decoration: underline;
108+
display: inline;
86109
}
87110
}
88111

‎scripts/src/explorer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import add_unique_ids from "./modules/analytics/add_unique_ids";
44

55
document.addEventListener("DOMContentLoaded", () => {
66
add_analytics_data_card_position('.card-group-promo--green');
7-
add_analytics_data_card_position('.card-group-secondary-nav__link');
7+
add_analytics_data_card_position('.card-group-secondary-nav__title-link');
88
add_analytics_data_card_position('.card-group-record-summary');
99
add_analytics_data_card_position('.card-group--list-style-none');
1010
add_analytics_data_card_position('.card-group--no-flex');

‎scripts/src/home-page.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import add_analytics_data_card_position from './modules/analytics/card_position'
22

3-
add_analytics_data_card_position('#analytics-featured-items .card-group-secondary-nav__link');
3+
add_analytics_data_card_position('#analytics-featured-items .card-group-secondary-nav__title-link');

‎templates/collections/blocks/promoted_pages.html

+14-12
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,23 @@ <h2>{{ value.heading }}</h2>
2323

2424
<li class="col-sm-12 col-md-6 col-lg-4 mb-3">
2525
<div class="card-group-secondary-nav">
26-
<a href="{{ promoted_item.url }}" class="card-group-secondary-nav__link" data-card-type="card-group-secondary-nav__link" data-card-title="{{ promoted_item.title }}">
26+
<a href="{{ promoted_item.url }}" class="card-group-secondary-nav__image-link" data-card-type="card-group-secondary-nav" data-card-title="{{ promoted_item.title }}" aria-hidden="true" tabindex="-1">
27+
<div class="card-group-secondary-nav__image">
28+
<picture>
29+
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
30+
<source media="(max-width: 991px)" srcset="{{ teaser_image_medium.url }}">
31+
<source media="(max-width: 1199px)" srcset="{{ teaser_image_small.url }}">
32+
<source media="(min-width: 1200px)" srcset="{{ teaser_image_large.url }}">
33+
<img src="{{ teaser_image_small.url }}" alt="{{ image.title }}" class="card-group-secondary-nav__image-fallback">
34+
</picture>
35+
</div>
36+
</a>
2737
<div class="card-group-secondary-nav__body">
28-
<h3 class="card-group-secondary-nav__heading">{{ promoted_item.title }}</h3>
38+
<a href="{{ promoted_item.url }}" class="card-group-secondary-nav__title-link" data-card-type="card-group-secondary-nav" data-card-title="{{ promoted_item.title }}">
39+
<h3 class="card-group-secondary-nav__heading">{{ promoted_item.title }}</h3>
40+
</a>
2941
<p class="card-group-secondary-nav__paragraph">{{ promoted_item.description }}</p>
3042
</div>
31-
<div class="card-group-secondary-nav__image">
32-
<picture>
33-
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
34-
<source media="(max-width: 991px)" srcset="{{ teaser_image_medium.url }}">
35-
<source media="(max-width: 1199px)" srcset="{{ teaser_image_small.url }}">
36-
<source media="(min-width: 1200px)" srcset="{{ teaser_image_large.url }}">
37-
<img src="{{ teaser_image_small.url }}" alt="{{ image.title }}" class="card-group-secondary-nav__image-fallback">
38-
</picture>
39-
</div>
40-
</a>
4143
</div>
4244
</li>
4345
{% endfor %}

‎templates/collections/results_page.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@ <h2 class="sr-only">Items</h2>
3232
If so, skip the record.
3333
{% endcomment %}
3434
{% if record_page_result.record_page %}
35-
{% include 'includes/card-group-record-summary.html' with record_page=record_page_result.record_page teaser_image=record_page_result.teaser_image description_override=record_page_result.description only %}
35+
{% if record_page_result.teaser_image %}
36+
{% include 'includes/card-group-record-summary.html' with record_page=record_page_result.record_page teaser_image=record_page_result.teaser_image description_override=record_page_result.description only %}
37+
{% else %}
38+
{% include 'includes/card-group-record-summary-no-image.html' with record_page=record_page_result.record_page description_override=record_page_result.description only %}
39+
{% endif %}
3640
{% endif %}
3741
{% endfor %}
3842
</ul>

‎templates/home/blocks/featured_external_page.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,7 @@
1717

1818
<li class="col-sm-12 col-md-6 col-lg-4 mb-3">
1919
<div class="card-group-secondary-nav">
20-
<a href='{{ value.url }}' class="card-group-secondary-nav__link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title }}">
21-
<div class="card-group-secondary-nav__body">
22-
<h3 class="card-group-secondary-nav__heading">{{ value.title }}</h3>
23-
<p class="card-group-secondary-nav__paragraph">{{ value.description }}</p>
24-
</div>
20+
<a href='{{ value.url }}' class="card-group-secondary-nav__image-link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title }}" tabindex="-1" aria-hidden="true">
2521
<div class="card-group-secondary-nav__image">
2622
<picture>
2723
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
@@ -32,5 +28,10 @@ <h3 class="card-group-secondary-nav__heading">{{ value.title }}</h3>
3228
</picture>
3329
</div>
3430
</a>
31+
<div class="card-group-secondary-nav__body">
32+
<a href='{{ value.url }}' class="card-group-secondary-nav__title-link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title }}"><h3 class="card-group-secondary-nav__heading">{{ value.title }}</h3></a>
33+
<p class="card-group-secondary-nav__paragraph">{{ value.description }}</p>
34+
</div>
35+
3536
</div>
3637
</li>

‎templates/home/blocks/featured_page.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,7 @@
1616

1717
<li class="col-sm-12 col-md-6 col-lg-4 mb-3">
1818
<div class="card-group-secondary-nav">
19-
<a href='{{ value.page.url }}' class="card-group-secondary-nav__link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title | default:value.page.title }}">
20-
<div class="card-group-secondary-nav__body">
21-
<h3 class="card-group-secondary-nav__heading">{{ value.title | default:value.page.title }}</h3>
22-
<p class="card-group-secondary-nav__paragraph">{{ value.description }}</p>
23-
</div>
19+
<a href='{{ value.page.url }}' class="card-group-secondary-nav__image-link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title | default:value.page.title }}" aria-hidden="true" tabindex="-1">
2420
<div class="card-group-secondary-nav__image">
2521
<picture>
2622
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
@@ -31,5 +27,11 @@ <h3 class="card-group-secondary-nav__heading">{{ value.title | default:value.pag
3127
</picture>
3228
</div>
3329
</a>
30+
<div class="card-group-secondary-nav__body">
31+
<a href='{{ value.page.url }}' class="card-group-secondary-nav__title-link" data-card-type="card-group-secondary-nav" data-card-title="{{ value.title | default:value.page.title }}">
32+
<h3 class="card-group-secondary-nav__heading">{{ value.title | default:value.page.title }}</h3>
33+
</a>
34+
<p class="card-group-secondary-nav__paragraph">{{ value.description }}</p>
35+
</div>
3436
</div>
3537
</li>

‎templates/includes/card-group-record-summary-no-image.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
{% endif %}
1717
{{ record_page.title }}
1818
</p>
19-
<div class="card-group-record-summary__body">
20-
<p>{{ description_override|default:record_page.description|striptags|truncatewords:40 }}</p>
21-
</div>
2219
</a>
20+
<div class="card-group-record-summary__body">
21+
<p>{{ description_override|default:record_page.description|striptags|truncatewords:40 }}</p>
22+
</div>
2323
</div>
2424
</li>

‎templates/includes/card-group-record-summary.html

+19-20
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,25 @@
1111
{% endif %}
1212
{{ record_page.title }}
1313
</p>
14-
<figure>
15-
{% if teaser_image %}
16-
17-
{% image teaser_image fill-288x292 as teaser_image_small %}
18-
{% image teaser_image fill-328x322 as teaser_image_medium %}
19-
{% image teaser_image fill-348x352 as teaser_image_large %}
20-
{% image teaser_image fill-543x549 as teaser_image_extra_large %}
21-
22-
<div class="card-group-record-summary__image">
23-
<picture>
24-
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
25-
<source media="(max-width: 991px)" srcset="{{ teaser_image_medium.url }}">
26-
<source media="(max-width: 1199px)" srcset="{{ teaser_image_small.url }}">
27-
<source media="(min-width: 1200px)" srcset="{{ teaser_image_large.url }}">
28-
<img src="{{ teaser_image_extra_large.url }}" alt="" class="card-group-record-summary__image-fallback">
29-
</picture>
30-
</div>
31-
{% endif %}
32-
<figcaption class="card-group-record-summary__body">{{ description_override|default:record_page.description|safe }}</figcaption>
33-
</figure>
3414
</a>
15+
{% if teaser_image %}
16+
{% image teaser_image fill-288x292 as teaser_image_small %}
17+
{% image teaser_image fill-328x322 as teaser_image_medium %}
18+
{% image teaser_image fill-348x352 as teaser_image_large %}
19+
{% image teaser_image fill-543x549 as teaser_image_extra_large %}
20+
21+
<a href="{% url 'details-page-machine-readable' iaid=record_page.iaid %}" class="card-group-record-summary__link" data-card-type="card-group-record-summary" data-card-title="{{ record_page.title }}" aria-hidden="true" tabindex="-1">
22+
<div class="card-group-record-summary__image">
23+
<picture>
24+
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
25+
<source media="(max-width: 991px)" srcset="{{ teaser_image_medium.url }}">
26+
<source media="(max-width: 1199px)" srcset="{{ teaser_image_small.url }}">
27+
<source media="(min-width: 1200px)" srcset="{{ teaser_image_large.url }}">
28+
<img src="{{ teaser_image_extra_large.url }}" alt="" class="card-group-record-summary__image-fallback">
29+
</picture>
30+
</div>
31+
</a>
32+
{% endif %}
33+
<p class="card-group-record-summary__body">{{ description_override|default:record_page.description|safe }}</p>
3534
</div>
3635
</li>

‎templates/includes/card-group-secondary-nav-time-period.html

-31
This file was deleted.

‎templates/includes/card-group-secondary-nav.html

+10-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@
77

88
<li class="col-sm-12 col-md-6 col-lg-4 mb-3">
99
<div class="card-group-secondary-nav">
10-
<a href='{{ page.url }}' class="card-group-secondary-nav__link" data-card-type="card-group-secondary-nav" data-card-title="{{ page.title }}">
11-
<div class="card-group-secondary-nav__body">
12-
<h3 class="card-group-secondary-nav__heading">{{ page.title }}</h3>
13-
<p class="card-group-secondary-nav__paragraph">{{ page.sub_heading }}</p>
14-
</div>
10+
<a href='{{ page.url }}' class="card-group-secondary-nav__image-link" data-card-type="card-group-secondary-nav" data-card-title="{{ page.title }}" aria-hidden="true" tabindex="-1">
1511
<div class="card-group-secondary-nav__image">
1612
<picture>
1713
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
@@ -22,5 +18,14 @@ <h3 class="card-group-secondary-nav__heading">{{ page.title }}</h3>
2218
</picture>
2319
</div>
2420
</a>
21+
<div class="card-group-secondary-nav__body">
22+
<a href='{{ page.url }}' class="card-group-secondary-nav__title-link" data-card-type="card-group-secondary-nav" data-card-title="{{ page.title }}">
23+
<h3 class="card-group-secondary-nav__heading">
24+
{{ page.title }}
25+
</h3>
26+
</a>
27+
<p class="card-group-secondary-nav__paragraph">{{ page.sub_heading }}</p>
28+
</div>
29+
2530
</div>
2631
</li>

‎templates/insights/blocks/related_item.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<li class="col-sm-12 col-md-6 col-lg-4 mb-3">
99
<div class="card-group-secondary-nav">
10-
<a href="{{ value.url }}" class="card-group-secondary-nav__link" data-card-title="{{ value.title }}" data-card-type="card-group-secondary-nav">
10+
<a href="{{ value.url }}" class="card-group-secondary-nav__image-link" data-card-title="{{ value.title }}" data-card-type="card-group-secondary-nav" aria-hidden="true" tabindex="-1">
1111
<div class="card-group-secondary-nav__image">
1212
<picture>
1313
<source media="(max-width: 768px)" srcset="{{ teaser_image_extra_large.url }}">
@@ -17,10 +17,12 @@
1717
<img src="{{ teaser_image_medium.url }}" alt="" class="card-group-secondary-nav__image-fallback">
1818
</picture>
1919
</div>
20+
</a>
2021
<div class="card-group-secondary-nav__body">
21-
<h3 class="card-group-secondary-nav__heading">{{ value.title }}</h3>
22+
<a href="{{ value.url }}" class="card-group-secondary-nav__title-link" data-card-title="{{ value.title }}" data-card-type="card-group-secondary-nav">
23+
<h3 class="card-group-secondary-nav__heading">{{ value.title }}</h3>
24+
</a>
2225
<span class="card-group-secondary-nav__span">{{ value.description|linebreaks }}</span>
2326
</div>
24-
</a>
2527
</div>
2628
</li>

0 commit comments

Comments
 (0)