From f31c42eec0ffa330f1ec8722aa149fec362cd3a3 Mon Sep 17 00:00:00 2001
From: Kirk Wang <kirk.wang@scientist.com>
Date: Fri, 24 Jan 2025 11:46:10 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Clean=20up=20featured=20collecti?=
 =?UTF-8?q?on=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit will add a few more html tags to the featured collections,
both from the admin end and public facing end, to make it look more like
the featured works.  This will fix custom font issues where the titles
of the collections were not getting the correct font that was set.
---
 app/assets/stylesheets/hyku.scss              | 13 +++++++++++++
 .../themes/institutional_repository.scss      |  1 -
 .../homepage/_explore_collections.html.erb    |  4 ++--
 .../_featured_collection_fields.html.erb      | 19 ++++++-------------
 .../_sortable_featured_collections.html.erb   |  8 +++-----
 app/views/shared/_appearance_styles.html.erb  |  6 +++---
 6 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/hyku.scss b/app/assets/stylesheets/hyku.scss
index 2ce0a2e65..76fca1abb 100644
--- a/app/assets/stylesheets/hyku.scss
+++ b/app/assets/stylesheets/hyku.scss
@@ -519,6 +519,15 @@ body.public-facing {
   border: 1px solid #ccc;
 }
 
+.new_featured_collection_list {
+  width: 100%;
+}
+
+// align featured collections with featured works
+#featured_collections {
+  margin-top: -5px;
+}
+
 .mb-30 {
   margin-bottom: 30px;
 }
@@ -714,6 +723,10 @@ tr[data-feature="use-iiif-print"] {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
+
+  h3 {
+    font-size: inherit;
+  }
 }
 
 // slideshow heading
diff --git a/app/assets/stylesheets/themes/institutional_repository.scss b/app/assets/stylesheets/themes/institutional_repository.scss
index 753f0806a..111a8446f 100644
--- a/app/assets/stylesheets/themes/institutional_repository.scss
+++ b/app/assets/stylesheets/themes/institutional_repository.scss
@@ -105,7 +105,6 @@
     padding-bottom: 0 !important;
   }
 
-  .collections-container,
   .recently-uploaded {
     a {
       img {
diff --git a/app/views/hyrax/homepage/_explore_collections.html.erb b/app/views/hyrax/homepage/_explore_collections.html.erb
index f76355c3a..11c580800 100644
--- a/app/views/hyrax/homepage/_explore_collections.html.erb
+++ b/app/views/hyrax/homepage/_explore_collections.html.erb
@@ -12,11 +12,11 @@
           ) %>
         <% end %>
       </div>
-      <div>
+      <h3>
         <%= link_to [hyrax, featured_collection] do %>
           <%= markdown(featured_collection.title.first) %>
         <% end %>
-      </div>
+      </h3>
     </div>
   </td>
 </tr>
diff --git a/app/views/hyrax/homepage/_featured_collection_fields.html.erb b/app/views/hyrax/homepage/_featured_collection_fields.html.erb
index 50f638475..afd98a5b1 100644
--- a/app/views/hyrax/homepage/_featured_collection_fields.html.erb
+++ b/app/views/hyrax/homepage/_featured_collection_fields.html.erb
@@ -1,17 +1,10 @@
-<div class="featured-item-title d-flex">
-  <div class="sr-only">
-    <%= t('hyrax.homepage.featured_collections.document.title_label') %>
-  </div>
-  <div class='homepage-work-thumbnail'>
-    <%= link_to [hyrax, featured] do %>
-      <%= render_thumbnail_tag(featured.solr_document, {suppress_link: true}) %>
-    <% end %>
-  </div>
-  <div>
-    <h5>
+<div>
+  <div class="featured-item-title">
+    <span class="sr-only"><%= t('hyrax.homepage.featured_collections.document.title_label') %></span>
+    <h3>
       <%= link_to [hyrax, featured] do %>
-        <%= markdown(featured.title.first) %>
+        <%= render_thumbnail_tag(featured.solr_document, {alt: "#{featured.title.first.to_s} #{ t('hyrax.homepage.admin_sets.thumbnail')}" }, {suppress_link: true})%><%= markdown(featured.title.first) %>
       <% end %>
-    </h5>
+    </h3>
   </div>
 </div>
diff --git a/app/views/hyrax/homepage/_sortable_featured_collections.html.erb b/app/views/hyrax/homepage/_sortable_featured_collections.html.erb
index 77ee8ac59..3b90ac189 100644
--- a/app/views/hyrax/homepage/_sortable_featured_collections.html.erb
+++ b/app/views/hyrax/homepage/_sortable_featured_collections.html.erb
@@ -1,13 +1,11 @@
 <% presenter = f.object.presenter %>
 <li class="dd-item dd3-item featured-item" data-id="<%= presenter.id %>">
-  <div class="dd-handle dd3-handle">
-    <%= t 'hyrax.homepage.featured_works.drag' %>
-  </div>
+  <div class="dd-handle dd3-handle"><%= t 'hyrax.homepage.featured_works.drag' %></div>
   <div class="dd3-content card">
     <%= f.hidden_field :id %>
     <%= f.hidden_field :order, data: { property: "order" } %>
-    <div class="card-body row">
-      <div class="col-md-12">
+    <div class="main row">
+      <div class="col-sm-12">
         <% if can? :destroy, FeaturedCollection %>
           <h3 class="float-right">
             <%= link_to main_app.featured_collection_path(presenter, format: :json),
diff --git a/app/views/shared/_appearance_styles.html.erb b/app/views/shared/_appearance_styles.html.erb
index 480721d44..36fd88747 100644
--- a/app/views/shared/_appearance_styles.html.erb
+++ b/app/views/shared/_appearance_styles.html.erb
@@ -8,17 +8,17 @@
   @import url(//<%= appearance.font_import_headline_url %>);
 <% end %>
 
-body.public-facing { font-family: <%= appearance.font_body_family %>; }
+body.public-facing { font-family: <%= appearance.font_body_family %> !important; }
 body.public-facing h1,
 body.public-facing h2,
 body.public-facing h3,
 body.public-facing h4,
 body.public-facing h5,
-body.public-facing h6 { font-family: <%= appearance.font_headline_family %>; }
+body.public-facing h6 { font-family: <%= appearance.font_headline_family %> !important; }
 
 /* LINK COLORS */
 body.public-facing a,
-body.public-facing .dropdown-menu a { 
+body.public-facing .dropdown-menu a {
   color: <%= appearance.link_color %>;
 }
 body.public-facing a:hover,