Skip to content

Commit a891fe2

Browse files
SkazitronSkazitron
authored
Merge pull request #5789 from canonical/content-card-fix
fix: overlapping cards
2 parents c4ad534 + 9a08e60 commit a891fe2

9 files changed

Lines changed: 290 additions & 181 deletions

File tree

‎scss/_patterns_content-card.scss‎

Lines changed: 221 additions & 119 deletions
Large diffs are not rendered by default.

‎templates/_macros/vf_card.jinja‎

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -22,80 +22,77 @@
2222

2323
{%- macro vf_card(columns="2", link=None, heading=None, image=None, author=None, date=None, footer=None, description=None) -%}
2424

25-
{%- set layout = 'p-content-card--' ~ columns ~ '-cols' -%}
25+
{%- set col_str = columns | string -%}
26+
{%- set layout = 'p-content-card--cols-' ~ col_str -%}
2627
{%- set img_class = 'has-image' if image else '' -%}
2728
{%- set has_desc = 'has-desc' if description else '' -%}
2829

29-
<div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
30-
31-
{%- if link -%}
32-
<a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
33-
{%- endif -%}
30+
<div class="p-content-card-wrapper p-content-card-wrapper--{{ col_str }}">
31+
32+
<div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
33+
34+
{%- if link -%}
35+
<a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
36+
{%- endif -%}
3437

35-
{%- if image -%}
36-
<div class="p-content-card__image-wrapper">
37-
<img class="p-content-card__image" src="{{ image.src }}" alt="{{ image.alt }}" />
38-
</div>
39-
{%- endif -%}
38+
{%- if image -%}
39+
<div class="p-content-card__image-wrapper">
40+
<img class="p-content-card__image" src="{{ image.src }}" alt="{{ image.alt }}" />
41+
</div>
42+
{%- endif -%}
4043

41-
<div class="p-content-card__content">
42-
<div class="p-content-card__body">
43-
44-
<div class="p-content-card__primary-content">
45-
<h4 class="p-content-card__heading">
46-
{%- if link -%}
47-
<a href="{{ link }}" class="p-content-card__main-link">{{ heading }}</a>
48-
{%- else -%}
49-
{{ heading }}
50-
{%- endif -%}
51-
</h4>
44+
<div class="p-content-card__content">
45+
<div class="p-content-card__body">
5246

53-
{%- if image and (author or date) -%}
54-
<div class="p-content-card__author-and-date u-sv-3">
55-
<small>
56-
{%- if author -%}
57-
<span class="u-text--muted">{{ author }}</span>
58-
{%- endif -%}
59-
60-
{%- if author and date -%}
61-
&middot;
62-
{%- endif -%}
63-
64-
{%- if date -%}
65-
<span class="u-text--muted">{{ date }}</span>
47+
<div class="p-content-card__primary-content">
48+
<h4 class="p-content-card__heading">
49+
{%- if link -%}
50+
<a href="{{ link }}" class="p-content-card__main-link">{{ heading }}</a>
51+
{%- else -%}
52+
{{ heading }}
6653
{%- endif -%}
67-
</small>
54+
</h4>
55+
56+
{%- if image and (author or date) -%}
57+
<div class="p-content-card__author-and-date u-sv-3">
58+
<small>
59+
{%- set items = [] -%}
60+
{%- if author -%}{%- set _ = items.append('<span class="u-text--muted">' ~ author ~ '</span>') -%}{%- endif -%}
61+
{%- if date -%}{%- set _ = items.append('<span class="u-text--muted">' ~ date ~ '</span>') -%}{%- endif -%}
62+
{{ items | join('&nbsp;&middot;&nbsp;') | safe }}
63+
</small>
64+
</div>
65+
{%- endif -%}
66+
</div>
67+
68+
{%- if description -%}
69+
<div class="p-content-card__hover-content">
70+
<p class="p-content-card__description">{{ description }}</p>
6871
</div>
6972
{%- endif -%}
70-
</div>
7173

72-
{%- if description -%}
73-
<div class="p-content-card__hover-content">
74-
<p class="p-content-card__description">{{ description }}</p>
7574
</div>
76-
{%- endif -%}
77-
78-
</div>
79-
80-
{%- if footer -%}
81-
<div>
82-
<hr class="p-rule--muted">
83-
<div class="p-content-card__footer-outer">
84-
<div class="p-content-card__footer-inner" tabindex="-1">
85-
{%- if footer.resource_type -%}
86-
<span class="u-has-icon">
87-
<i class="p-content-card__icon p-icon--{{ footer.resource_type.icon }}"></i>
88-
<small class="p-content-card__small">{{ footer.resource_type.text }}</small>
89-
</span>
90-
{%- endif -%}
75+
76+
{%- if footer -%}
77+
<div class="p-content-card__footer-container">
78+
<hr class="p-rule--muted">
79+
<div class="p-content-card__footer-outer">
80+
<div class="p-content-card__footer-inner" tabindex="-1">
81+
{%- if footer.resource_type -%}
82+
<span class="u-has-icon">
83+
<i class="p-content-card__icon p-icon--{{ footer.resource_type.icon }}"></i>
84+
<small class="p-content-card__small">{{ footer.resource_type.text }}</small>
85+
</span>
86+
{%- endif -%}
9187

92-
{%- if footer.content_type %}
93-
<span class="p-chip--information is-readonly">{{ footer.content_type}}</span>
94-
{%- endif -%}
88+
{%- if footer.content_type %}
89+
<span class="p-chip--information is-readonly">{{ footer.content_type }}</span>
90+
{%- endif -%}
91+
</div>
9592
</div>
9693
</div>
94+
{%- endif -%}
9795
</div>
98-
{%- endif -%}
9996
</div>
10097
</div>
10198
{%- endmacro -%}

‎templates/docs/examples/patterns/content-card/2-column-no-image.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% block standalone_css %}patterns_all{% endblock %}
66

77
{% block content %}
8+
<div class="grid-row">
89
{{ vf_card(
910
columns="2",
1011
link="https://www.ubuntu.com",
@@ -18,4 +19,5 @@
1819
},
1920
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
2021
) }}
22+
</div>
2123
{% endblock %}

‎templates/docs/examples/patterns/content-card/2-column.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% block standalone_css %}patterns_all{% endblock %}
66

77
{% block content %}
8+
<div class="grid-row">
89
{{ vf_card(
910
columns="2",
1011
heading="Canonical announces Charmed Feast: A production-grade feature store for your open source MLOps stack",
@@ -24,4 +25,5 @@
2425
},
2526
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
2627
) }}
28+
</div>
2729
{% endblock %}

‎templates/docs/examples/patterns/content-card/4-column-no-image.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% block standalone_css %}patterns_all{% endblock %}
66

77
{% block content %}
8+
<div class="grid-row">
89
{{ vf_card(
910
columns="4",
1011
link="https://www.ubuntu.com",
@@ -18,4 +19,5 @@
1819
},
1920
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
2021
) }}
22+
</div>
2123
{% endblock %}

‎templates/docs/examples/patterns/content-card/4-column.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% block standalone_css %}patterns_all{% endblock %}
66

77
{% block content %}
8+
<div class="grid-row">
89
{{ vf_card(
910
columns="4",
1011
link="https://www.ubuntu.com",
@@ -22,4 +23,5 @@
2223
},
2324
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
2425
) }}
26+
</div>
2527
{% endblock %}

‎templates/docs/examples/patterns/content-card/6-column.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% block standalone_css %}patterns_all{% endblock %}
66

77
{% block content %}
8+
<div class="grid-row">
89
{{ vf_card(
910
columns="6",
1011
link="https://www.ubuntu.com",
@@ -24,4 +25,5 @@
2425
"content_type": "Developers and community"
2526
}
2627
) }}
28+
</div>
2729
{% endblock %}

‎templates/docs/patterns/content-card/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ context:
88

99
{{- pattern_wip_notice() }}
1010

11-
The **Card** pattern is a rich, highly structured card variant designed to display heavily contextual items like articles, webinars, announcements, or whitepapers. It supports custom column spans and fluidly adjusts its layout between vertical and horizontal orientations depending on the space available.
11+
The **Card** pattern is a rich, responsive, highly structured card variant designed to display heavily contextual items like articles, webinars, announcements, or whitepapers. It supports custom column spans and fluidly adjusts its layout between vertical and horizontal orientations depending on the space available.
1212

1313
Responsive by design, the larger horizontal variants are built to adapt to screen real estate: **6-column cards collapse down to 4 columns and eventually 2 columns** on smaller screens, while **4-column cards collapse down to 2 columns**.
1414

@@ -72,7 +72,7 @@ The `vf_card` Jinja macro can be used to generate a card pattern. The entire car
7272

7373
### Parameters
7474

75-
> **Important Note:** When defining the `footer.resource_type.icon`, the string must be a valid Vanilla Framework icon name. The macro automatically prepends the prefix, rendering your string as **`p-icon--{name}`**.
75+
> **Important Note:** The cards must be enclosed within a container that has the 'grid-row' class. Additionally, when defining the `footer.resource_type.icon`, the string must be a valid Vanilla Framework icon name. The macro automatically prepends the prefix, rendering your string as **`p-icon--{name}`**.
7676
7777
<div style="overflow: auto;">
7878
<table>

‎tests/parker.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function generateMetrics(file, metricsArray) {
1212
{
1313
name: 'Stylesheet size',
1414
benchmark: 150000,
15-
threshold: 553301,
15+
threshold: 553438,
1616
result: results['total-stylesheet-size'],
1717
},
1818
{

0 commit comments

Comments
 (0)