From 49651c5949c665a693c55998c672798bdb828c7d Mon Sep 17 00:00:00 2001
From: Kirk Wang <kirk.wang@scientist.com>
Date: Thu, 16 Jan 2025 15:35:04 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Fix=20catalog=20gallery=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since the Hyrax 5 update the catalog gallery index page had a grid
layout of four columns while in default Hyrax has three.  Also removed
some extra spacing from top row of the items.  There was also an extra
border that was around the facets that were removed.  The description
facet on each result has a truncate of 200 characters.
---
 app/assets/stylesheets/hyku.scss             |  9 +++++----
 app/controllers/catalog_controller.rb        |  2 +-
 app/helpers/application_helper.rb            | 15 +++++++++++++++
 app/views/shared/_appearance_styles.html.erb |  6 ++----
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/hyku.scss b/app/assets/stylesheets/hyku.scss
index 49e74a31c..2e3bf6156 100644
--- a/app/assets/stylesheets/hyku.scss
+++ b/app/assets/stylesheets/hyku.scss
@@ -37,6 +37,11 @@
   .home-tabs-left {
     margin: 0 10px;
   }
+
+  .row-cols-md-3>* {
+    flex: 0 0 33.33%;
+    max-width: 33.33%;
+  }
 }
 
 #banner.jumbotron {
@@ -769,9 +774,6 @@ dd {
   }
 
   .document {
-    margin-top: 6px;
-    padding-top: 6px;
-
     .document-thumbnail {
       .img-thumbnail {
         padding: 0.25rem;
@@ -803,4 +805,3 @@ dd {
   }
 }
 /* End Collection show page */
-
diff --git a/app/controllers/catalog_controller.rb b/app/controllers/catalog_controller.rb
index b6c8faf74..155d3dc0b 100644
--- a/app/controllers/catalog_controller.rb
+++ b/app/controllers/catalog_controller.rb
@@ -146,7 +146,7 @@ def self.uploaded_field
     # solr fields to be displayed in the index (search results) view
     #   The ordering of the field names is the order of the display
     config.add_index_field 'title_tesim', label: "Title", itemprop: 'name', if: false
-    config.add_index_field 'description_tesim', itemprop: 'description', helper_method: :iconify_auto_link
+    config.add_index_field 'description_tesim', itemprop: 'description', helper_method: :truncate_and_iconify_auto_link
     config.add_index_field 'keyword_tesim', itemprop: 'keywords', link_to_facet: 'keyword_sim'
     config.add_index_field 'subject_tesim', itemprop: 'about', link_to_facet: 'subject_sim'
     config.add_index_field 'creator_tesim', itemprop: 'creator', link_to_facet: 'creator_sim'
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index fdac5b1f9..ad4687aef 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -78,4 +78,19 @@ def markdown(text)
     Markdown.new(text, *options).to_html.html_safe
   end
   # rubocop:enable Rails/OutputSafety
+
+  def truncate_and_iconify_auto_link(field, show_link = true)
+    if field.is_a? Hash
+      options = field[:config].separator_options || {}
+      text = field[:value].to_sentence(options)
+    else
+      text = field
+    end
+    # this block is only executed when a link is inserted;
+    # if we pass text containing no links, it just returns text.
+    auto_link(html_escape(text)) do |value|
+      "<span class='fa fa-external-link'></span>#{('&nbsp;' + value) if show_link}"
+    end
+    text.truncate(230, separator: ' ')
+  end
 end
diff --git a/app/views/shared/_appearance_styles.html.erb b/app/views/shared/_appearance_styles.html.erb
index cc7da7090..6e40b31f2 100644
--- a/app/views/shared/_appearance_styles.html.erb
+++ b/app/views/shared/_appearance_styles.html.erb
@@ -23,13 +23,13 @@ body.public-facing a:focus { color: <%= appearance.link_hover_color %>; }
 
 /* MAIN NAV */
 body.public-facing .navbar.navbar-expand-lg,
-body.public-facing footer.navbar { 
+body.public-facing footer.navbar {
   background-color: <%= appearance.header_and_footer_background_color %> !important;
 }
 body.public-facing footer.navbar .navbar-link { color: <%= appearance.footer_link_color %>; }
 body.public-facing footer.navbar .navbar-link:hover { color: <%= appearance.footer_link_hover_color %>; }
 body.public-facing footer.navbar .navbar-text,
-body.public-facing .navbar.navbar-expand-lg .navbar-nav a { 
+body.public-facing .navbar.navbar-expand-lg .navbar-nav a {
   color: <%= appearance.header_and_footer_text_color %> !important;
 }
 body.public-facing .navbar.navbar-expand-lg { border-color: <%= appearance.header_background_border_color %> !important; }
@@ -201,12 +201,10 @@ body.public-facing .card > .card-header,
 body.public-facing .card-header > .btn.w-100 {
   color: <%= appearance.facet_panel_text_color %>;
   background-color: <%= appearance.facet_panel_background_color %> !important;
-  border-color: <%= appearance.facet_panel_border_color %> !important;
 }
 body.public-facing .card-body > .facet-limit-active {
   color: <%= appearance.facet_panel_text_color %> !important;
   background-color: <%= appearance.facet_panel_background_color %>;
-  border-color: <%= appearance.facet_panel_border_color %> !important;
 }
 
 /* COLLECTION STYLES */