Search result page: change result item layout

Author: adriendupuis

docs/css/instantsearch.css

@@ -91,6 +91,9 @@ footer.md-footer {
     font-size: 14px;
     line-height: 21px;
     letter-spacing: 0.12px;
+    margin-top: 10px;
+    padding-left: 10px;
+    border-left: 2px solid var(--mid-grey);
 }
 
 .md-content .ais-InstantSearch .instantsearch__entry-content .ais-Highlight-highlighted {
@@ -102,15 +105,14 @@ footer.md-footer {
     font-size: 12px;
     line-height: 21px;
     letter-spacing: 0.12px;
-    margin-top: 16px;
 }
 
 .md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item + .instantsearch__entry-breadcrumbs-item {
     margin-left: 12px;
 }
 
-.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item + .instantsearch__entry-breadcrumbs-item:before {
-    content: '>';
+.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item:before {
+    content: '<';
     display: inline-block;
     padding-right: 12px;
 }

docs/js/instantsearch.js

@@ -84,7 +84,7 @@
                         </div>`;
                     }
 
-                    breadcrumbsKeys?.forEach((breadcrumbKey) => {
+                    breadcrumbsKeys?.toReversed().forEach((breadcrumbKey) => {
                         breadcrumbsHTML += `<span class="instantsearch__entry-breadcrumbs-item">
                             ${instantsearch.highlight({
                                 attribute: `hierarchy.${breadcrumbKey}`,
@@ -96,10 +96,10 @@
 
                     return resultHTML = `<a class="instantsearch__entry" href="${hit.url}">
                         ${headerHTML}
-                        ${contentHTML}
                         <div class="instantsearch__entry-breadcrumbs">
                             ${breadcrumbsHTML}
                         </div>
+                        ${contentHTML}
                     </a>`;
                 },
             },