Bl8 results component

app/assets/stylesheets/earthworks.css

@@ -67,13 +67,4 @@
 
 .documents-list article:hover, .documents-list article:focus {
   box-shadow: -4px 4px 4px 0px var(--stanford-fog-light);
-}
-
-.document-counter {
-  display: none;
-}
-
-.documents-list .documentHeader .index_title {
-  margin-left: .75rem;
-  align-self: center;
 }

app/components/earthworks/header_icons_component.html.erb

@@ -0,0 +1,7 @@
+<div>
+  <% @fields.each do |field| %>
+    <% icon, label = get_icon(field) %>
+    <%= icon %>
+    <span class="me-1"><%= label %></span>
+  <% end %>
+</div>

app/components/earthworks/header_icons_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Earthworks
+  class HeaderIconsComponent < Geoblacklight::HeaderIconsComponent
+    def get_icon(field)
+      icon_name = @document[field]
+      if icon_name&.include?('Datasets') && @document[Settings.FIELDS.RESOURCE_TYPE]
+        specific_icon = @document[Settings.FIELDS.RESOURCE_TYPE]
+        specific_icon = specific_icon.first if specific_icon.is_a?(Array)
+        specific_icon = specific_icon&.gsub(' data', '')
+        icon = geoblacklight_icon(specific_icon)
+        return [icon, specific_icon] unless icon.include?('icon-missing')
+      end
+      icon_name = icon_name.first if icon_name.is_a?(Array)
+      [geoblacklight_icon(icon_name), icon_name]
+    end
+  end
+end

app/components/earthworks/search_result_component.html.erb

@@ -0,0 +1,32 @@
+<%# This template copies from Blacklight's components/document_component.html.erb 
+      # for the wrapping `content_tag @component` structure
+      # and adds custom layout within for the document header, status-icons and more-info areas %>
+
+<%= content_tag @component,
+  id: @id,
+  data: {
+    'document-id': @document.id.to_s.parameterize,
+    'document-counter': @counter,
+    'search-results-target': 'result',
+    'action': 'mouseenter->search-results#previewResultOnMap mouseleave->search-results#clearPreview'
+  },
+  itemscope: true,
+  itemtype: @document.itemtype,
+  class: classes.flatten.join(' ') do %>
+    <%= content_tag :div, class: 'documentHeader index-split d-flex flex-grow-1 flex-column m-2', data: { layer_id: @document.id, geom: @document.geometry.geojson } do %>
+      <h3 class="index_title d-flex flex-grow-1">
+        <%= helpers.link_to_document(@document, counter: @counter, itemprop: "name") %>
+      </h3>
+
+      <div class='status-icons flex-grow-1 ms-0'>
+        <%= render Earthworks::HeaderIconsComponent.new(document: @document) %>
+      </div>
+    <% end %>
+  <% end %>
+  <div class='more-info-area border-bottom'>
+    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse'>
+      <small itemprop="description">
+        <%= index_fields_display %>
+      </small>
+    </div>
+  </div>

app/components/earthworks/search_result_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Earthworks
+  class SearchResultComponent < Geoblacklight::SearchResultComponent
+    def classes
+      [
+        @classes,
+        helpers.render_document_class(@document),
+        'document',
+        'pt-0',
+        'mt-0',
+        ("document-position-#{@counter}" if @counter)
+      ].compact.flatten
+    end
+  end
+end

app/controllers/catalog_controller.rb

@@ -34,7 +34,7 @@ class CatalogController < ApplicationController
     # config.index.show_link = 'title_display'
     # config.index.record_display_type = 'format'
 
-    config.index.document_component = Geoblacklight::SearchResultComponent
+    config.index.document_component = Earthworks::SearchResultComponent
     config.index.title_field = Settings.FIELDS.TITLE
 
     config.crawler_detector = ->(req) { req.env['HTTP_USER_AGENT']&.include?('bot') }