From 5fc86ddd31c01065d3f270d39dc72190279f65c7 Mon Sep 17 00:00:00 2001
From: Sarah Proctor <sarah.proctor@scientist.com>
Date: Fri, 31 Jan 2025 14:22:39 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixes=20header=20color=20change?=
 =?UTF-8?q?=20and=20footer=20height?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit:
- adds in the classes to the header that allowed for custom colorization
and refined the responsive layout
- Removes some of the padding in the footer to make it more compact in
mobile view to account for the height of the body being set in Hyrax
which assumes a footer height of 118px

Ref:
- https://github.com/notch8/palni_palci_knapsack/issues/142
---
 .../themes/institutional_repository.scss      | 10 ++++------
 app/views/shared/_footer.html.erb             |  8 ++++----
 .../_masthead.html.erb                        | 20 +++++++++----------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/themes/institutional_repository.scss b/app/assets/stylesheets/themes/institutional_repository.scss
index 6402e45e4..b56dcbc5e 100644
--- a/app/assets/stylesheets/themes/institutional_repository.scss
+++ b/app/assets/stylesheets/themes/institutional_repository.scss
@@ -41,12 +41,10 @@
 
   // styles the top nav menu application name
   .institutional-repository-application-name {
-    span {
-      color: #fff;
-      font-size: 20px;
-      line-height: 50px !important;
-      vertical-align: middle;
-    }
+    color: #fff;
+    font-size: 20px;
+    line-height: 50px !important;
+    vertical-align: middle;
   }
 
   // styles the search bar label in the navbar
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
index ad65d87b1..7ed358f58 100644
--- a/app/views/shared/_footer.html.erb
+++ b/app/views/shared/_footer.html.erb
@@ -8,16 +8,16 @@
   <div class="row navbar-text text-center">
 
     <div class="col-12 col-lg-6 text-lg-left">
-      <div class="p-2"><%= t('hyrax.footer.service_html') %></div>
-      <div class="p-2">Hyku v<%= Hyku::VERSION %> with Hyrax v<%= Hyrax::VERSION %></div>
+      <div class="p-1 p-lg-2"><%= t('hyrax.footer.service_html') %></div>
+      <div class="p-1 p-lg-2">Hyku v<%= Hyku::VERSION %> with Hyrax v<%= Hyrax::VERSION %></div>
     </div>
 
     <div class="col-12 col-lg-6 text-lg-right">
-      <div class="p-2">
+      <div class="p-1 p-lg-2">
         <%= t('hyrax.footer.copyright_html', current_year: current_year) %>
         <%= t('hyrax.background_attribution_html') %>
       </div>
-      <div class="p-2">
+      <div class="p-1 p-lg-2">
         <% if user_signed_in? %>
           <%= link_to t('hyrax.toolbar.profile.logout'), main_app.destroy_user_session_path, class: 'navbar-link' %>
         <% else %>
diff --git a/app/views/themes/institutional_repository/_masthead.html.erb b/app/views/themes/institutional_repository/_masthead.html.erb
index 75d042209..e8807971f 100644
--- a/app/views/themes/institutional_repository/_masthead.html.erb
+++ b/app/views/themes/institutional_repository/_masthead.html.erb
@@ -1,21 +1,21 @@
 <% # OVERRIDE: Hyrax v5.0.0rc2 - added the search bar and removed the /login and locale nav menu and moved to the /controls partial for theming %>
 <header aria-label="header" class="top-header">
-  <nav id="masthead" class="navbar-dark bg-dark institutional-repository-nav container-fluid py-2<%= placement_class %>" role="navigation" aria-label="masthead">
+  <nav id="masthead" class="navbar navbar-expand-lg navbar-dark bg-dark institutional-repository-nav container-fluid d-block py-2<%= placement_class %>" role="navigation" aria-label="masthead">
+
+    <div class="row align-items-center">
+      <div class="col-lg-6 col-md-5 col-sm-12">
+        <div class="row justify-content-start">
+          <div class="ml-2"><%= render '/logo' %>
+            <span class="institutional-repository-application-name"><%= application_name %></span>
+          </div>
 
-    <div class="row align-items-center justify-content-end">
-      <div class="col-12 col-md-6 pb-2 pb-md-0">
-        <div class="row align-items-center justify-content-start">
-          <div class="ml-2"><%= render '/logo' %></div>
-          <div class="institutional-repository-application-name col-10 text-center text-md-left">
-          <span><%= application_name %></span>
-        </div>
         </div>
       </div>
-
-      <div class="col-12 col-sm-10 col-md-6">
+      <div class="col-lg-6 col-md-7 col-sm-12">
         <%= render partial: 'catalog/search_form' %>
       </div>
     </div>
+
   </nav>
 </header>
 <%= render '/controls' %>