Merge pull request #612 from maykinmedia/feature/1336-bigger-titles-o…

…n-cards-on-all-devices 💄 [#1336] Make bigger titles in all cards on all devices
maykinmedia · May 12, 2023 · b1584c6 · b1584c6
2 parents f6fe153 + 4c67b91
commit b1584c6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 19 deletions.
diff --git a/src/open_inwoner/components/templates/components/Card/DescriptionCard.html b/src/open_inwoner/components/templates/components/Card/DescriptionCard.html
@@ -4,9 +4,9 @@
 <a href="{{ url }}" title="{{ title }}" aria-label="{{ title }}" class="card">
     <div class="card__body card__body--tabled">
         {% if title %}
-            <p class="h4">
+            <h2 class="h2">
                 <span class="link link__text">{{ title }}</span>
-            </p>
+            </h2>
         {% endif %}
         <p class="p">{{ description }}</p>
         {% if object.end_date %}

diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
@@ -152,15 +152,17 @@
     margin-top: var(--spacing-extra-large);
   }
 
+  .h2,
   .h4 {
     margin: 0 0 var(--card-spacing);
   }
 
-  &--compact .h4 {
+  &--compact .h3 {
     padding: 0 0 var(--card-spacing);
+    margin: 0 0 var(--card-spacing);
     position: relative;
 
-    &:before {
+    &::before {
       bottom: 0;
       content: '';
       border-bottom: var(--card-size-border) solid var(--card-color-border);
@@ -170,6 +172,18 @@
     }
   }
 
+  /// Headings in cards
+
+  .h2,
+  .h3,
+  .h4,
+  .h2 .link,
+  .h3 .link,
+  .h4 .link {
+    color: var(--font-color-body);
+    font-size: var(--font-size-heading-card);
+  }
+
   &--product {
     padding: 20px;
     align-items: end;

diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
@@ -209,6 +209,8 @@
   --font-size-heading-4: 16px;
   --font-weight-heading-4: var(--font-weight-heading);
 
+  --font-size-heading-card: 18px;
+
   --font-family-body: 'TheSans C5';
   --font-color-body: var(--color-gray-dark);
   --font-size-body: 16px;

diff --git a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
@@ -7,19 +7,16 @@ <h2 class="h2">
 {% if plans %}
 <div class="plans-cards card-container card-container--columns-4">
     {% for plan in plans %}
-        {% render_card image_object_fit="cover" %}
-            <a href="{{ plan.get_absolute_url }}" class="plan-list"><p class="h4">{{ plan.title }}</p>
-            <p class="p">{{ plan.goal|truncatewords:20 }}</p>
-            <p class="p">{{ plan.description|truncatewords:20 }}</p></a>
-            <span class="spacer"></span>
-            <a
-                class="button button--icon-before button--transparent button--secondary"
-                href="{{ plan.get_absolute_url }}"
-                aria-label="{{ plan.title }}"
-                aria-hidden="true"
-            >
-                {% icon icon="arrow_forward" %}
-            </a>
+        {% render_card image_object_fit="cover" href=plan.get_absolute_url %}
+            <div class="card__content">
+                <h3 class="h3 plan-list">{{ plan.title }}</h3>
+                <p class="p">{{ plan.goal|truncatewords:20 }}</p>
+                <p class="p">{{ plan.description|truncatewords:20 }}</p>
+                <span class="spacer"></span>
+                <span class="button button--icon-before button--transparent button--secondary">
+                    {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
+                </span>
+            </div>
         {% endrender_card %}
     {% endfor %}
 </div>

diff --git a/src/open_inwoner/templates/pages/cases/list.html b/src/open_inwoner/templates/pages/cases/list.html
@@ -16,9 +16,9 @@ <h2 class="h2" id="cases">{{ page_title }} ({{ paginator.count }})</h2>
                 <div class="card card--compact card--stretch">
                     <div class="card__body">
                     <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
-                            <p class="h4">
+                            <h3 class="h3">
                                 <span class="link link__text">{{ case.description }}</span>
-                            </p>
+                            </h3>
                             {% render_list %}
                                 <span class="case-list">
                                 {% list_item case.current_status caption=_("Status") compact=True strong=False %}