Merge pull request #1025 from maykinmedia/fix/2111-fix-card-icons-and…

…-headings

💄 [#2111] Fix case-card icons and adjust card headings

src/open_inwoner/components/templates/components/Card/CategoryCard.html

@@ -3,12 +3,12 @@
 {# template for subcategory cards with or without product-links #}
 {# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
 {% if category.products.published %}
-<div class="card">
+<div class="card card__category-card">
     <div class="card__body">
         {% if category %}
-            <p class="h3">
+            <h3 class="card__heading-3">
                 <a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
-            </p>
+            </h3>
         {% endif %}
         {% for product in category.products.published %}
             {% with category as parent %}
@@ -25,9 +25,9 @@
     <a href="{{ category.slug }}" class="card">
         <div class="card__body">
             {% if category %}
-                <p class="h3">
+                <h3 class="card__heading-3">
                     <span class="link link__text">{{ category }}</span>
-                </p>
+                </h3>
             {% endif %}
         </div>
     </a>

src/open_inwoner/components/templates/components/Card/DescriptionCard.html

@@ -1,10 +1,10 @@
 {% load icon_tags link_tags i18n grid_tags thumbnail %}
 
 {# template for plans cards and product cards without any images #}
-<a href="{{ url }}" class="card">
+<a href="{{ url }}" class="card card__description-card">
     <div class="card__body card__body--tabled">
         {% if title %}
-            <h2 class="h2">
+            <h2 class="card__heading-2">
                 <span class="link link__text">{{ title }}</span>
             </h2>
         {% endif %}

src/open_inwoner/components/templates/components/Card/LocationCard.html

@@ -1,16 +1,18 @@
 {% load link_tags string_tags %}
-<div class="card card__body">
+<div class="card card__location-card">
+    <div class="card__body">
     {% if location_name %}
-        {% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %}
+        <h3 class="card__heading-3">{% link href=location.get_absolute_url primary=True text=location_name %}</h3>
     {% endif %}
-    <div class="card__body--flex p--no-margin">
-        <p class="p">{{ address_line_1 }}</p>
-        <p class="p">{{ address_line_2 }}</p>
-        {% if phonenumber %}
-            {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
-        {% endif %}
-        {% if email %}
-            {% link href='mailto:'|addstr:email secondary=True text=email %}
-        {% endif %}
+        <div class="card__body--flex p--no-margin">
+            <p class="p">{{ address_line_1 }}</p>
+            <p class="p">{{ address_line_2 }}</p>
+            {% if phonenumber %}
+                {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %}
+            {% endif %}
+            {% if email %}
+                {% link href='mailto:'|addstr:email secondary=True text=email %}
+            {% endif %}
+        </div>
     </div>
 </div>

src/open_inwoner/components/templates/components/Card/ProductCard.html

@@ -1,19 +1,19 @@
 {% load icon_tags link_tags i18n grid_tags thumbnail %}
 
 {# template for product cards with images #}
-<a href="{{ url }}" class="card">
+<a href="{{ url }}" class="card card__product-card">
 
     {% if image %}
     <div class="card__body card__body--grid">
         <div class="card__image-container">
             <img class="card__image" src="{{ image|thumbnail_url:'card-image' }}" alt="{{ image.default_alt_text }}"/>
         </div>
         <div class="card__content">
-                <h2 class="h2"><span class="link link__text">{{ title }}</span></h2>
+                <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2>
     {% else %}
         <div class="card__body">
             <div class="card__content">
-            <h2 class="h2"><span class="link link__text">{{ title }}</span></h2>
+            <h2 class="card__heading-2"><span class="link link__text">{{ title }}</span></h2>
     {% endif %}
             <p class="p">{{ description }}</p>
             {% if object.end_date %}

src/open_inwoner/components/templates/components/Card/RenderCard.html

@@ -12,9 +12,15 @@
 
     <div class="card__body{% if compact %}--compact{% endif %} {% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
         {% if title %}
-            <p class="{% if compact %}h4{% else %}h3{% endif %}">
+            {% if compact %}
+            <h3 class="card__heading-3">
                 <span class="link link__text">{{ title }}</span>
-            </p>
+            </h3>
+            {% else %}
+            <h4 class="card__heading-4">
+                <span class="link link__text">{{ title }}</span>
+            </h4>
+            {% endif %}
         {% endif %}
         {{ contents }}
     </div>

src/open_inwoner/scss/components/Card/Card.scss

@@ -18,6 +18,10 @@
   position: relative;
   text-decoration: none;
 
+  &__product-card {
+    min-height: 150px;
+  }
+
   &--inline {
     display: inline-flex;
   }
@@ -66,16 +70,6 @@
     width: var(--card-size-dog-ear);
   }
 
-  &--type-info .h1,
-  &--type-info .h2,
-  &--type-info .h3,
-  &--type-info .h4,
-  &--type-info .h5,
-  &--type-info .h5,
-  &--type-info .p {
-    color: var(--color-info-darker);
-  }
-
   &--tinted {
     --card-color-background: var(--color-gray-lightest);
 
@@ -211,55 +205,30 @@
     margin-top: var(--spacing-extra-large);
   }
 
-  .h2,
-  .h4 {
-    margin: 0 0 var(--card-spacing);
-  }
-
-  &--compact .h3 {
-    padding: 0 0 var(--card-spacing);
-    margin: 0 0 var(--card-spacing);
-    position: relative;
-
-    &::before {
-      bottom: 0;
-      content: '';
-      border-bottom: var(--card-size-border) solid var(--card-color-border);
-      width: calc(100% + 2 * var(--card-spacing));
-      position: absolute;
-      left: calc(-1 * var(--card-spacing));
-    }
-  }
-
   .link .link__text {
     font-weight: bold;
   }
 
   /// Headings in cards
 
-  .h2,
-  .h3,
-  .h4,
-  .h2 .link,
-  .h3 .link,
-  .h4 .link {
-    color: var(--font-color-body);
-    font-size: var(--font-size-heading-card);
-  }
-
-  &__heading {
+  &__heading-2,
+  &__heading-3,
+  &__heading-4,
+  &__heading-2 .link,
+  &__heading-3 .link,
+  &__heading-4 .link {
     color: var(--color-black);
     font-family: var(--font-family-heading);
     font-size: var(--font-size-heading-card);
-    line-height: var(--font-line-height-body);
+    line-height: var(--font-line-height-heading-4);
     margin: 0;
   }
 
   &--product {
     padding: 20px;
     align-items: end;
 
-    .h3 {
+    .card__heading-3 {
       width: 100%;
     }
 

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

@@ -50,13 +50,16 @@
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     color: var(--color-info-darker);
+    font-size: var(--font-size-body);
 
     .card__status_indicator_text {
-      padding: var(--spacing-medium);
+      // Fix for optical illusion
+      padding: 8px var(--spacing-large) 10px 0;
     }
 
     [class*='icons'] {
-      margin: var(--spacing-small) var(--spacing-medium) 0 var(--spacing-medium);
+      // Fix for optical illusion
+      margin: 6px 10px 6px 10px;
     }
 
     &.success {

src/open_inwoner/scss/components/Profile/_personal-overview.scss

@@ -31,4 +31,8 @@
       font-weight: bold;
     }
   }
+
+  .profile-cards .card {
+    min-height: 190px;
+  }
 }

src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html

@@ -9,7 +9,7 @@ <h2 class="h2">
     {% for plan in plans %}
         {% render_card image_object_fit="cover" href=plan.get_absolute_url %}
             <div class="card__content">
-                <h3 class="h3 plan-list">{{ plan.title }}</h3>
+                <h3 class="card__heading-3 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>

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

@@ -17,7 +17,7 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
                 <!-- submission cases -->
                 {% if case.case_type == "OpenSubmission" %}
                     <a href="{{ case.vervolg_link }}" class="cases__link">
-                    <h2 class="card__heading">{{ case.naam }}</h2>
+                    <h2 class="card__heading-2">{{ case.naam }}</h2>
                     {% render_list %}
                     <span class="case-list">
                         <li class="list-item list-item--compact">
@@ -36,7 +36,7 @@ <h2 class="card__heading">{{ case.naam }}</h2>
                 <!-- other cases -->
                 {% else %}
                     <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
-                    <h2 class="card__heading">{{ case.description }}</h2>
+                    <h2 class="card__heading-2">{{ case.description }}</h2>
                     {% render_list %}
                         <span class="case-list">
                         <li class="list-item list-item--compact">

src/open_inwoner/templates/pages/profile/me.html

@@ -115,7 +115,7 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
                     <a href="#" class="card card--compact card--stretch" id="profile-section-mentors">
                 {% endif %}
                         <div class="card__body">
-                            <p class="h4"><span class="link link__text">{% trans "Mijn begeleider" %}</span></p>
+                            <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn begeleider" %}</span></h4>
                             {% render_list %}
                                 <span class="profile-list ellipsis">
                                     {% for name in mentor_contact_names %}
@@ -141,7 +141,7 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
                     <a href="{% url 'profile:contact_list' %}" class="card card--compact card--stretch" id="profile-section-contacts">
                         <div class="card__body">
                             <div class="profile__link">
-                                <p class="h4"><span class="link link__text">{% trans "Mijn contacten" %}</span></p>
+                                <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn contacten" %}</span></h4>
                                 {% render_list %}
                                     <span class="profile-list ellipsis">
                                     {% for name in contact_names %}
@@ -169,7 +169,7 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
                     <a href="{% url 'profile:action_list' %}" class="card card--compact card--stretch" id="profile-section-actions">
                         <div class="card__body">
                             <div class="profile__link">
-                                <p class="h4"><span class="link link__text">{% trans "Acties" %}</span></p>
+                                <h4 class="card__heading-4"><span class="link link__text">{% trans "Acties" %}</span></h4>
                                 {% render_list %}
                                     <span class="profile-list">
                                         {% list_item text=action_text compact=True strong=False %}
@@ -188,8 +188,8 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
             {% if view.config.ssd %}
                 <a href="{% url 'ssd:uitkeringen' %}" class="card card--compact card--stretch" id="profile-section-ssd">
                     <div class="card__body">
-                        <p class="h4"><span class="link link__text">{% trans "Mijn uitkeringen" %}</span>
-                        </p>
+                        <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn uitkeringen" %}</span>
+                        </h4>
                         {% render_list %}
                             <span class="profile-list">
                                 {% list_item text="Jaaropgaven" compact=True strong=False active=False %}
@@ -209,7 +209,7 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
             {% if view.config.questions %}
                 <a href="{% url 'cases:contactmoment_list' %}" class="card card--compact card--stretch" id="profile-section-questions">
                     <div class="card__body">
-                    <p class="h4"><span class="link link__text">{% trans "Mijn vragen" %}</span></p>
+                    <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn vragen" %}</span></h4>
                     <span class="link link--icon link--secondary profile-card__button" aria-label="{% trans "Bekijken" %}" title="{% trans "Bekijken" %}">
                         <span class="link__text">{% trans "Bekijken" %}</span>
                         {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}
@@ -221,7 +221,7 @@ <h2 class="h2 title" id="profile-overview">{% trans "Overzicht" %}</h2>
             {% if questionnaire_exists and view.config.selfdiagnose %}
                 <a href="{% url 'products:questionnaire_list' %}" class="card card--compact card--stretch" id="profile-section-questions">
                     <div class="card__body">
-                        <p class="h4"><span class="link link__text">{% trans "Zelftest" %}</span></p>
+                        <h4 class="card__heading-4"><span class="link link__text">{% trans "Zelftest" %}</span></h4>
                         <span class="link link--icon link--secondary profile-card__button" aria-label="{% trans "Start zelfdiagnose" %}" title="{% trans "Start zelfdiagnose" %}">
                             <span class="link__text">{% trans "Start zelfdiagnose" %}</span>
                             {% icon icon="arrow_forward" icon_position="after" primary=True outlined=True %}