Fix detail cards not showing all info (#10771)

* Base detail card

* Fix detail cards

* Fix naming

* Fix issue with landing page not rendering

network-api/networkapi/templates/fragments/libraries/detail_card.html

@@ -18,15 +18,11 @@
     <div class="tw-min-w-0">
         <h{% firstof heading_level '2' %} class="tw-h5-heading tw-text-blue-80 tw-mb-4"><a href="{% pageurl detail_page %}">{{ detail_page.title }}</a></h{% firstof heading_level '2' %}>
         <div class="tw-flex tw-flex-row tw-text-xs tw-text-gray-80 tw-mb-4 tw-uppercase tw-divide-x tw-divide-gray-20">
-            {% if detail_page.original_publication_date %}
-                <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
-            {% endif %}
-            {% if detail_page.get_research_author_names and not hide_author_names %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate" >{{ detail_page.get_research_author_names|join:', ' }}</div>
-            {% endif %}
-            {% if detail_page.get_related_topic_names and not hide_related_topics %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate {% if hide_related_topics_on_mobile %} tw-hidden small:tw-block {% endif %}">{{ detail_page.get_related_topic_names|join:' / ' }}</div>
-            {% endif %}
+            {% block detail_card_metadata %}
+                {% if detail_page.original_publication_date %}
+                    <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
+                {% endif %}
+            {% endblock detail_card_metadata %}
         </div>
         {% if detail_page.introduction %}
             <p class="tw-mb-0 tw-text-gray-60 tw-text-base">

network-api/networkapi/templates/fragments/libraries/rcc/detail_card.html

@@ -1,38 +1,13 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-<div class="tw-flex tw-flex-col small:tw-flex-row">
+{% extends "fragments/libraries/detail_card.html" %}
 
-    {% if rcc_detail_page.cover_image %}
-        <picture class="inline-block {% if hide_image_on_mobile %} tw-hidden small:tw-block {% endif %} small:tw-w-56 tw-shrink-0 tw-mb-6 small:tw-mb-0 small:tw-mr-12">
-            {% image rcc_detail_page.cover_image fill-224x224 as square_image %}
-            <source srcset="{{ square_image.url }}" media="(min-width: 576px)">
-            {% image rcc_detail_page.cover_image fill-576x224 class="tw-w-full small:tw-w-56" %}
-        </picture>
+{% block detail_card_metadata %}
+    {% if detail_page.original_publication_date %}
+        <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
     {% endif %}
-
-    <!--
-  By default, flex items sizes are driven by their content.
-  Setting the min-width allows the element to be small than the content.
-  This is necessary here to make the metadata truncation kick in.
-  Otherwise the metadata will be at full width and driving this elements width.
-  -->
-    <div class="tw-min-w-0">
-        <h{% firstof heading_level '2' %} class="tw-h5-heading tw-text-blue-80 tw-mb-4"><a href="{% pageurl rcc_detail_page %}">{{ rcc_detail_page.title }}</a></h{% firstof heading_level '2' %}>
-        <div class="tw-flex tw-flex-row tw-text-xs tw-text-gray-80 tw-mb-4 tw-uppercase tw-divide-x tw-divide-gray-20">
-            {% if rcc_detail_page.original_publication_date %}
-                <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ rcc_detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
-            {% endif %}
-            {% if rcc_detail_page.get_rcc_author_names and not hide_author_names %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate" >{{ rcc_detail_page.get_rcc_author_names|join:', ' }}</div>
-            {% endif %}
-            {% if rcc_detail_page.get_related_content_types_names %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate {% if hide_related_content_types_on_mobile %} tw-hidden small:tw-block {% endif %}">{{ rcc_detail_page.get_related_content_types_names|join:' / ' }}</div>
-            {% endif %}
-        </div>
-        {% if rcc_detail_page.introduction %}
-            <p class="tw-mb-0 tw-text-gray-60 tw-text-base">
-                {{ rcc_detail_page.introduction }}
-            </p>
-        {% endif %}
-    </div>
-
-</div>
+    {% if detail_page.author_names and not hide_author_names %}
+        <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate" >{{ detail_page.author_names|join:', ' }}</div>
+    {% endif %}
+    {% if detail_page.related_content_types_names %}
+        <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate {% if hide_related_content_types_on_mobile %} tw-hidden small:tw-block {% endif %}">{{ detail_page.related_content_types_names|join:' / ' }}</div>
+    {% endif %}
+{% endblock detail_card_metadata %}

network-api/networkapi/templates/fragments/libraries/research_hub/detail_card.html

@@ -1,38 +1,13 @@
-{% load wagtailcore_tags wagtailimages_tags %}
-<div class="tw-flex tw-flex-col small:tw-flex-row">
+{% extends "fragments/libraries/detail_card.html" %}
 
-    {% if research_detail_page.cover_image %}
-        <picture class="inline-block {% if hide_image_on_mobile %} tw-hidden small:tw-block {% endif %} small:tw-w-56 tw-shrink-0 tw-mb-6 small:tw-mb-0 small:tw-mr-12">
-            {% image research_detail_page.cover_image fill-224x224 as square_image %}
-            <source srcset="{{ square_image.url }}" media="(min-width: 576px)">
-            {% image research_detail_page.cover_image fill-576x224 class="tw-w-full small:tw-w-56" %}
-        </picture>
+{% block detail_card_metadata %}
+    {% if detail_page.original_publication_date %}
+        <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
     {% endif %}
-
-    <!--
-  By default, flex items sizes are driven by their content.
-  Setting the min-width allows the element to be small than the content.
-  This is necessary here to make the metadata truncation kick in.
-  Otherwise the metadata will be at full width and driving this elements width.
-  -->
-    <div class="tw-min-w-0">
-        <h{% firstof heading_level '2' %} class="tw-h5-heading tw-text-blue-80 tw-mb-4"><a href="{% pageurl research_detail_page %}">{{ research_detail_page.title }}</a></h{% firstof heading_level '2' %}>
-        <div class="tw-flex tw-flex-row tw-text-xs tw-text-gray-80 tw-mb-4 tw-uppercase tw-divide-x tw-divide-gray-20">
-            {% if research_detail_page.original_publication_date %}
-                <div class="tw-px-4 first:tw-pl-0 tw-whitespace-nowrap ">{{ research_detail_page.original_publication_date|date:"DATE_FORMAT" }}</div>
-            {% endif %}
-            {% if research_detail_page.get_research_author_names and not hide_author_names %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate" >{{ research_detail_page.get_research_author_names|join:', ' }}</div>
-            {% endif %}
-            {% if research_detail_page.get_related_topic_names and not hide_related_topics %}
-                <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate {% if hide_related_topics_on_mobile %} tw-hidden small:tw-block {% endif %}">{{ research_detail_page.get_related_topic_names|join:' / ' }}</div>
-            {% endif %}
-        </div>
-        {% if research_detail_page.introduction %}
-            <p class="tw-mb-0 tw-text-gray-60 tw-text-base">
-                {{ research_detail_page.introduction }}
-            </p>
-        {% endif %}
-    </div>
-
-</div>
+    {% if detail_page.author_names and not hide_author_names %}
+        <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate" >{{ detail_page.author_names|join:', ' }}</div>
+    {% endif %}
+    {% if detail_page.related_topic_names and not hide_related_topics %}
+        <div class="tw-px-4 first:tw-pl-0 tw-min-w-0 tw-truncate {% if hide_related_topics_on_mobile %} tw-hidden small:tw-block {% endif %}">{{ detail_page.related_topic_names|join:' / ' }}</div>
+    {% endif %}
+{% endblock detail_card_metadata %}

network-api/networkapi/templates/pages/libraries/rcc/author_detail_page.html

@@ -8,7 +8,7 @@
 {% block detail_cards %}
     {% for article in latest_articles %}
         <li class="tw-border-t tw-border-t-gray-20 tw-mt-12 tw-pt-12">
-            {% include "fragments/libraries/rcc/detail_card.html" with rcc_detail_page=article hide_author_names=True hide_image_on_mobile=True %}
+            {% include "fragments/libraries/rcc/detail_card.html" with detail_page=article hide_author_names=True hide_image_on_mobile=True %}
         </li>
     {% endfor %}
 {% endblock detail_cards %}

network-api/networkapi/templates/pages/libraries/rcc/landing_page.html

@@ -16,7 +16,7 @@
 {% block detail_page_cards %}
     {% for rcc_detail_page in page.latest_detail_pages %}
         <li class="tw-py-8 small:tw-my-8 small:tw-bg-gray-05 small:tw-p-16">
-            {% include "fragments/libraries/rcc/detail_card.html" with rcc_detail_page=rcc_detail_page hide_related_topics=True landing_page=True %}
+            {% include "fragments/libraries/rcc/detail_card.html" with detail_page=rcc_detail_page hide_related_topics=True landing_page=True %}
         </li>
     {% endfor %}
 {% endblock detail_page_cards %}

network-api/networkapi/templates/pages/libraries/rcc/library_page.html

@@ -12,7 +12,7 @@
 {% block detail_pages %}
     {% for detail_page in detail_pages %}
         <li class="tw-m-0 tw-pt-12 tw-pb-12">
-            {% include "fragments/libraries/rcc/detail_card.html" with rcc_detail_page=detail_page hide_authors=False hide_image_on_mobile=True hide_related_content_types_on_mobile=True %}
+            {% include "fragments/libraries/rcc/detail_card.html" with detail_page=detail_page hide_authors=False hide_image_on_mobile=True hide_related_content_types_on_mobile=True %}
         </li>
     {% endfor %}
 {% endblock detail_pages %}

network-api/networkapi/templates/pages/libraries/research_hub/author_detail_page.html

@@ -8,7 +8,7 @@
 {% block detail_cards %}
     {% for article in latest_articles %}
         <li class="tw-border-t tw-border-t-gray-20 tw-mt-12 tw-pt-12">
-            {% include "fragments/libraries/research_hub/detail_card.html" with research_detail_page=article hide_author_names=True hide_image_on_mobile=True %}
+            {% include "fragments/libraries/research_hub/detail_card.html" with detail_page=article hide_author_names=True hide_image_on_mobile=True %}
         </li>
     {% endfor %}
 {% endblock detail_cards %}

network-api/networkapi/templates/pages/libraries/research_hub/landing_page.html

@@ -8,7 +8,7 @@
 {% block detail_page_cards %}
     {% for research_detail_page in page.latest_detail_pages %}
         <li class="tw-py-8 small:tw-my-8 small:tw-bg-gray-05 small:tw-p-16">
-            {% include "fragments/libraries/research_hub/detail_card.html" with research_detail_page=research_detail_page hide_related_topics=True landing_page=True %}
+            {% include "fragments/libraries/research_hub/detail_card.html" with detail_page=research_detail_page hide_related_topics=True landing_page=True %}
         </li>
     {% endfor %}
 {% endblock detail_page_cards %}

network-api/networkapi/templates/pages/libraries/research_hub/library_page.html

@@ -12,7 +12,7 @@
 {% block detail_pages %}
     {% for detail_page in detail_pages %}
         <li class="tw-m-0 tw-pt-12 tw-pb-12">
-            {% include "fragments/libraries/rcc/detail_card.html" with rcc_detail_page=detail_page hide_authors=False hide_image_on_mobile=True hide_related_content_types_on_mobile=True %}
+            {% include "fragments/libraries/research_hub/detail_card.html" with detail_page=detail_page hide_authors=False hide_image_on_mobile=True hide_related_content_types_on_mobile=True %}
         </li>
     {% endfor %}
 {% endblock detail_pages %}