Merge pull request #519 from maykinmedia/feature/1168-make-entire-The…

…me-card-clickable

🎨 [#1168] Make Theme cards entirely clickable

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

@@ -1,10 +1,33 @@
-{% load card_tags icon_tags link_tags helpers %}
+{% load card_tags icon_tags link_tags helpers utils %}
 
-{% render_card title=category href=category.get_absolute_url %}
-    {% for product in category.products.published %}
-        {% with category as parent %}
-            {% get_product_url product as product_url %}
-            {% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
-        {% endwith %}
-    {% endfor %}
-{% endrender_card %}
+{# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
+{% if category.products.published %}
+<div title="{{ category }}" aria-label="{{ category.name }}" class="card">
+    <div class="card__body">
+        {% if category %}
+            <p class="h3">
+                <a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
+            </p>
+        {% endif %}
+        {% for product in category.products.published %}
+            {% with category as parent %}
+                <div class="card__categories">
+                    {% get_product_url product as product_url %}
+                    {% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
+                </div>
+            {% endwith %}
+        {% endfor %}
+    </div>
+</div>
+
+{% else %}
+    <a href="{{ category.slug }}" title="{{ category }}" class="card">
+        <div class="card__body">
+            {% if category %}
+                <p class="h3">
+                    <span class="link link__text">{{ category }}</span>
+                </p>
+            {% endif %}
+        </div>
+    </a>
+{% endif %}

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

@@ -1,23 +1,21 @@
-{% load link_tags %}
+{% load utils link_tags %}
 
 {# Utilizes same template as Card. #}
-<div class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
+{% capture as tag %}{{ href|yesno:'a,div'}}{% endcapture %}
+{# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
+<{{ tag }}{% if href %} href="{{ href }}"{% endif %} title="{{ title }}" aria-label="{{ title }}" class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
     {% if src %}
-        <a class="card__header" href="{{ href }}" title="{{ title }}" aria-describedby="{{ title }}">
+        <span class="card__header">
             <img class="card__img{% if image_object_fit %} card__img--{{ image_object_fit }}{% endif %}" src="{{ src }}" alt="{{ alt }}"/>
-        </a>
+        </span>
     {% endif %}
 
     <div class="card__body{% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
         {% if title %}
             <p class="{% if compact %}h4{% else %}h3{% endif %}">
-                {% if href %}
-                    {% link href=href text=title %}
-                {% else %}
-                    {{ title }}
-                {% endif %}
+                <span class="link link__text">{{ title }}</span>
             </p>
         {% endif %}
         {{ contents }}
     </div>
-</div>
+</{{ tag }}>