Fix/DF-778 fixes to website results formatting (#1198)

nationalarchives · Jul 20, 2023 · e022b4c · e022b4c
1 parent 22734be
commit e022b4c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 19 deletions.
diff --git a/sass/includes/search/_search-results__list-card.scss b/sass/includes/search/_search-results__list-card.scss
@@ -99,6 +99,7 @@
   &-metadata-item {
     font-weight:100;
     //line-height:2em;
+
   }
 
   &-metadata-item-held-by-icon {
@@ -255,6 +256,7 @@
 .search-results__list-card-image {
     margin-left: 20px;
     flex: 0 0 200px;
+    margin-bottom:1em;
 }
 
 .search-results__list-card-image-anchor {
@@ -328,6 +330,18 @@ dd {
     margin-bottom:1em;
 }
 
+.format {
+    width:0;
+}
+
+.inline-fix {
+    margin-left:48px;
+}
+
+.image-web-results {
+   flex: 0 0 348px;
+    max-width:348px;
+}
 
 .format {
    width:0;

diff --git a/templates/search/blocks/native_website_result.html b/templates/search/blocks/native_website_result.html
@@ -1,7 +1,29 @@
 {% load static records_tags search_tags wagtailcore_tags wagtailimages_tags %}
+
+
 <li class="search-results__list-card" data-score="{{ result.score }}">
 
-    <div class="search-results__list-card-details">
+    {% if result.teaser_image %}
+    <div class="search-results__list-card-image image-web-results order-md-2">
+        {% image result.teaser_image fill-288x172 as teaser_image_small %}
+        {% image result.teaser_image fill-328x196 as teaser_image_medium %}
+        {% image result.teaser_image fill-348x208 as teaser_image_large %}
+        {% image result.teaser_image fill-508x304 as teaser_image_extra_large %}
+        <picture>
+            <source media="(max-width: 480px)" srcset="{{ teaser_image_small }}">
+            <source media="(max-width: 640px)" srcset="{{ teaser_image_medium }}">
+            <source media="(max-width: 768px)" srcset="{{ teaser_image_medium }}">
+            <source media="(max-width: 991px)" srcset="{{ teaser_image_large }}">
+            <source media="(max-width: 1200px)" srcset="{{ teaser_image_large }}">
+            <img src="{{ teaser_image_large.url }}" alt="" />
+        </picture>
+
+    </div>
+    {% endif %}
+
+
+    <div class="search-results__list-card-details order-md-1">
+
         <h3 class="search-results__list-card-heading">
             <a href="{% pageurl result %}" class="search-results__list-card-heading-link" data-link="{{ result.title }}" data-link-type="Search results list" search-bucket="Website results">
                 {{ result.title }}
@@ -16,7 +38,7 @@ <h3 class="search-results__list-card-heading">
             <dt class="search-results__list-card-metadata-item format">
                 Format:
             </dt>
-            <dd>{{ result.type_label }}</dd>
+            <dd class="inline-fix">{{ result.type_label }}</dd>
             {% if result.show_publish_date_in_search_results and result.first_published_at %}
                 <dt class="search-results__list-card-metadata-item search-results__list-card-metadata-item-date-icon">
                     Published:
@@ -27,21 +49,6 @@ <h3 class="search-results__list-card-heading">
 
     </div>
 
-    {% if result.teaser_image %}
-        <div class="search-results__list-card-image">
-            {% image result.teaser_image fill-288x172 as teaser_image_small %}
-            {% image result.teaser_image fill-328x196 as teaser_image_medium %}
-            {% image result.teaser_image fill-348x208 as teaser_image_large %}
-            {% image result.teaser_image fill-508x304 as teaser_image_extra_large %}
-            <picture>
-                <source media="(max-width: 480px)" srcset="{{ teaser_image_small }}">
-                <source media="(max-width: 640px)" srcset="{{ teaser_image_medium }}">
-                <source media="(max-width: 768px)" srcset="{{ teaser_image_medium }}">
-                <source media="(max-width: 991px)" srcset="{{ teaser_image_large }}">
-                <source media="(max-width: 1200px)" srcset="{{ teaser_image_large }}">
-                <img src="{{ teaser_image_large.url }}" alt="" />
-            </picture>
-
-        </div>
-    {% endif %}
+
 </li>
+