Skip to content

Commit 9872b8c

Browse files
jiromaykinjiromaykin
committed
[#2352] Corrected grid columns
1 parent f722994 commit 9872b8c

File tree

3 files changed

+54
-40
lines changed

3 files changed

+54
-40
lines changed

‎src/open_inwoner/scss/components/Card/CardGrid.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
grid-column-gap: var(--spacing-extra-large);
44

55
// Tablets
6-
@media (min-width: 500px) and (max-width: 767px) {
6+
@media (min-width: 512px) and (max-width: 767px) {
77
flex-direction: row;
88
flex-wrap: wrap;
99

‎src/open_inwoner/scss/components/Cases/Cases.scss

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,47 @@
11
.cases {
22
/// cards on cases list
33
.card {
4-
.cases__link {
5-
text-decoration: none;
6-
}
7-
84
&__body {
95
display: flex;
106
flex-direction: column;
7+
padding: 0;
8+
9+
.list:last-of-type {
10+
padding-bottom: 0;
11+
@media (min-width: 500px) {
12+
padding-bottom: calc(2 * var(--card-spacing-vertical));
13+
}
14+
}
1115

1216
// Meaningful sequence for accessibility
1317
.card__heading-2 {
1418
order: 2;
19+
padding: var(--card-spacing-vertical) var(--card-spacing-horizontal) 0
20+
var(--card-spacing-horizontal);
1521
}
1622

1723
.card__header {
1824
order: 1;
1925
}
2026

2127
.list {
28+
box-sizing: border-box;
2229
order: 3;
30+
padding: 0 var(--card-spacing-horizontal);
2331
}
2432

2533
.link--secondary {
2634
order: 4;
35+
padding: 0 var(--card-spacing-horizontal);
36+
}
37+
}
38+
39+
&--stretch .list + .link:first-of-type:last-of-type {
40+
padding-bottom: var(--card-spacing-vertical);
41+
42+
@media (min-width: 500px) {
43+
padding-bottom: 0;
44+
position: absolute;
2745
}
2846
}
2947
}

‎src/open_inwoner/templates/pages/cases/list_inner.html

+31-35
Original file line numberDiff line numberDiff line change
@@ -15,56 +15,52 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
1515
<!-- submission cases -->
1616
{% if case.case_type == "OpenSubmission" %}
1717

18-
<a href="{{ case.vervolg_link }}" class="cases__link">
19-
<div class="card card--compact card--stretch">
20-
<div class="card__body">
18+
<a href="{{ case.vervolg_link }}" class="card card card__description-card card--stretch">
19+
<div class="card__body">
2120

22-
<h2 class="card__heading-2">{{ case.naam }}</h2>
23-
{# Meaningful sequence for accessibility: any text belonging to a heading must be below the heading #}
24-
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=case.statustype_config.status_indicator status_indicator_text=case.statustype_config.status_indicator_text %}
21+
<h2 class="card__heading-2">{{ case.naam }}</h2>
22+
{# Meaningful sequence for accessibility: any text belonging to a heading must be below the heading #}
23+
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=case.statustype_config.status_indicator status_indicator_text=case.statustype_config.status_indicator_text %}
2524

26-
{% render_list %}
27-
<li class="list-item list-item--compact">
28-
{% with end_date=case.eind_datum_geldigheid|default:"Geen" %}
29-
<p class="card__caption card__text--small"><span>{% trans "Aanvraag verloopt op:" %}</span><span class="card__text--dark">{{ end_date|date }}</span></p>
30-
{% endwith %}
31-
</li>
32-
{% list_item text="Openstaande aanvraag" caption=_("Status") compact=True strong=False %}
33-
{% endrender_list %}
34-
<span class="link link--icon link--secondary">
25+
{% render_list %}
26+
<li class="list-item list-item--compact">
27+
{% with end_date=case.eind_datum_geldigheid|default:"Geen" %}
28+
<p class="card__caption card__text--small"><span>{% trans "Aanvraag verloopt op:" %}</span><span class="card__text--dark">{{ end_date|date }}</span></p>
29+
{% endwith %}
30+
</li>
31+
{% list_item text="Openstaande aanvraag" caption=_("Status") compact=True strong=False %}
32+
{% endrender_list %}
33+
<span class="link link--icon link--secondary">
3534
<span class="link__text">{% trans "Aanvraag afronden" %}</span>
3635
{% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
3736
</span>
38-
</div>
3937
</div>
4038
</a>
4139
<!-- other cases -->
4240
{% else %}
43-
<a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
44-
<div class="card card--compact card--stretch">
45-
<div class="card__body">
41+
<a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="card card card__description-card card--stretch">
42+
<div class="card__body">
4643

47-
<h2 class="card__heading-2">{{ case.description }}</h2>
48-
{# Meaningful sequence for accessibility: any text belonging to a heading must be below the heading #}
49-
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=case.statustype_config.status_indicator status_indicator_text=case.statustype_config.status_indicator_text %}
44+
<h2 class="card__heading-2">{{ case.description }}</h2>
45+
{# Meaningful sequence for accessibility: any text belonging to a heading must be below the heading #}
46+
{% include "components/StatusIndicator/StatusIndicator.html" with status_indicator=case.statustype_config.status_indicator status_indicator_text=case.statustype_config.status_indicator_text %}
5047

51-
{% render_list %}
52-
<li class="list-item list-item--compact">
53-
<p class="card__caption card__text--small"><span>{% trans "Aanvraag ingediend op:" %}</span><span class="card__text--dark">{{ case.start_date }}</span></p>
54-
</li>
55-
{% if case.current_status %}
56-
{% list_item case.current_status caption=_("Status") compact=True strong=False %}
57-
{% else %}
58-
{% list_item "No status" caption=_("Status") compact=True strong=False %}
59-
{% endif %}
60-
{% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
61-
{% endrender_list %}
48+
{% render_list %}
49+
<li class="list-item list-item--compact">
50+
<p class="card__caption card__text--small"><span>{% trans "Aanvraag ingediend op:" %}</span><span class="card__text--dark">{{ case.start_date }}</span></p>
51+
</li>
52+
{% if case.current_status %}
53+
{% list_item case.current_status caption=_("Status") compact=True strong=False %}
54+
{% else %}
55+
{% list_item "No status" caption=_("Status") compact=True strong=False %}
56+
{% endif %}
57+
{% list_item case.identification caption=_("Zaaknummer") compact=True strong=False %}
58+
{% endrender_list %}
6259

63-
<span class="link link--icon link--secondary">
60+
<span class="link link--icon link--secondary">
6461
<span class="link__text">{{ case.statustype_config.case_link_text|default:"Bekijk aanvraag" }}</span>
6562
{% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
6663
</span>
67-
</div>
6864
</div>
6965
</a>
7066
{% endif %}

0 commit comments

Comments
 (0)