I142 home page themes

app/assets/stylesheets/hyku.scss

@@ -89,19 +89,39 @@
   background-color: #9bafbf;
 }
 
+///// FOOTER /////
+
+// overrides Hyrax styles that prevent footer from sitting at the bottom of the page
+body.neutral_repository {
+  margin-bottom: 0;
+}
+
+// overrides Hyrax styles that prevent footer from sitting at the bottom of the page
+.default_home, .cultural_repository, .institutional_repository {
+  footer {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
 footer.navbar {
-  border-radius: 0;
+  display: block;
   font-size: 0.9em;
-  min-height: 40px;
-  vertical-align: middle;
 
-  p {
-    margin: 10px;
-    text-align: center;
+  .navbar-text {
+    display: flex;
+  }
 
-    strong {
-      font-weight: 500;
-    }
+  strong {
+    font-weight: 500;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  @media (max-width: 992px) {
+    justify-content: center;
   }
 }
 
@@ -523,11 +543,6 @@ body.public-facing {
   width: 100%;
 }
 
-// align featured collections with featured works
-#featured_collections {
-  margin-top: -5px;
-}
-
 .mb-30 {
   margin-bottom: 30px;
 }
@@ -720,10 +735,6 @@ tr[data-feature="use-iiif-print"] {
 
 // Featured collection
 #featured_collections {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: left;
-
   h3 {
     font-size: inherit;
   }

app/assets/stylesheets/themes/cultural_repository.scss

@@ -1,9 +1,6 @@
 .cultural_repository {
+
   ////// Navbar //////
-  .navbar-header {
-    display: flex;
-    margin-left: -10px;
-  }
 
   .navbar-expand-lg .navbar-collapse {
     @media (min-width: 992px) {
@@ -46,11 +43,6 @@
     display: none;
   }
 
-  .search-items {
-    padding: 0;
-    margin: 8px -16px 8px 0px
-  }
-
   .cultural-homepage > .container {
     display: flex;
   }
@@ -303,16 +295,20 @@
     body.dashboard {
       padding-top: 0 !important;
     }
+  }
+
+  @media (max-width: 992px) {
+    #facets .top-card-heading {
+      border: 1px solid #fff;
+      background-color: #fff;
+    }
 
-    .facet-panel-background-color {
+    #facets .facet-panel-background-color {
       background-color: transparent;
     }
-  }
 
-  @media (max-width: 768px) {
-    // Note: copied over to override /* line 163, /usr/local/bundle/gems/blacklight-6.23.0/app/assets/stylesheets/blacklight/_facets.scss */
-    #facets .top-card-heading {
-      border: 1px solid #999999 !important;
+    #facets .facets-heading {
+      margin-top: 8px;
     }
   }
 }

app/assets/stylesheets/themes/institutional_repository.scss

@@ -39,20 +39,12 @@
 
   ////// Navbar //////
 
-  .navbar-collapse {
-    justify-content: space-between;
-  }
-
-  // styles the top nav menu application name that is centered
+  // styles the top nav menu application name
   .institutional-repository-application-name {
-    text-align: center;
-
-    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

app/assets/stylesheets/themes/neutral_repository.scss

@@ -174,6 +174,9 @@
     div.neutral-repository-collections:nth-of-type(2n+3) {
       clear: left;
     }
+    .theme-container {
+      display: block;
+    }
   }
 
   @media (min-width: 992px) {

app/views/_user_util_links.html.erb

@@ -1,4 +1,4 @@
-<ul id="user_utility_links" class="navbar-nav ml-auto">
+<ul id="user_utility_links" class="navbar-nav ml-auto text-right">
   <%= render 'shared/locale_picker' if available_translations.size > 1 %>
   <% if user_signed_in? %>
     <li class="nav-item">

app/views/catalog/_search_form.html.erb

@@ -2,13 +2,13 @@
 <%= form_tag search_form_action, method: :get, class: "search-form", id: "search-form-header", role: "search" do %>
   <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:q, :search_field, :qt, :page, :utf8)) %>
   <%= hidden_field_tag :search_field, 'all_fields' %>
-  <div class="form-group row">
+  <div class="form-group row pt-4 pt-sm-0">
 
     <label class="col-sm-3 mb-0" for="search-field-header">
       <%= t("hyrax.search.form.q.label", application_name: application_name) %>
     </label>
 
-    <div class="input-group col-sm-9">
+    <div class="input-group">
       <%= text_field_tag :q, current_search_parameters , 'aria-label': 'Search', class: "q form-control", id: "search-field-header", placeholder: t("hyrax.search.form.q.placeholder") %>
 
       <div class="input-group-append">

app/views/hyrax/homepage/_explore_collections.html.erb

@@ -2,12 +2,12 @@
 
 <% featured_collection = f.object.presenter %>
 <tr>
-  <td>
+  <td class="p-2">
     <div class="d-flex">
       <div>
         <%= link_to [hyrax, featured_collection] do %>
           <%= render_thumbnail_tag(featured_collection,
-                                   { class: 'img-fluid d-none d-sm-block file_listing_thumbnail', alt: "#{featured_collection.title_or_label} #{ t('hyrax.homepage.admin_sets.thumbnail')}" },
+                                   { class: 'img-fluid d-none d-sm-block file_listing_thumbnail mt-0', alt: "#{featured_collection.title_or_label} #{ t('hyrax.homepage.admin_sets.thumbnail')}" },
                                    {suppress_link: true}
           ) %>
         <% end %>

app/views/hyrax/homepage/_home_content.html.erb

@@ -5,7 +5,7 @@
   also, to render featured collections
 %>
 
-<div class="<%= @presenter.display_featured_works? || @presenter.display_recently_uploaded? ? 'col-md-6' : '' %>">
+<div class="<%= @presenter.display_featured_works? || @presenter.display_recently_uploaded? ? 'col-md-6 mb-4' : '' %>">
   <ul id="homeTabs" class="nav nav-tabs" role="list">
     <%# add check for featured works %>
     <% if @presenter.display_featured_works? %>

app/views/shared/_footer.html.erb

@@ -1,32 +1,31 @@
 <%# Override Hyrax 5.0.1
   - add privacy policy partial
   - add login & logout link
-  - add Hyku version
-  - navbar-inverse class %>
+  - add Hyku version %>
 <% current_year = Time.now.year %>
-<footer class="navbar navbar-inverse navbar-dark bg-dark site-footer w-100">
-  <div class="container-fluid">
-    <div class="navbar-text d-flex justify-content-between w-100">
-      <!-- Left Column -->
-      <div class="d-flex flex-column">
-        <div class='p-2'><%= t('hyrax.footer.service_html') %></div>
-        <div class='p-2'>Hyku v<%= Hyku::VERSION %> with Hyrax v<%= Hyrax::VERSION %></div>
+
+<footer class="navbar navbar-dark container-fluid">
+  <div class="row navbar-text text-center">
+
+    <div class="col-12 col-lg-6 text-lg-left">
+      <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-1 p-lg-2">
+        <%= t('hyrax.footer.copyright_html', current_year: current_year) %>
+        <%= t('hyrax.background_attribution_html') %>
       </div>
-      <!-- Right Column -->
-      <div class="d-flex flex-column align-items-end flex-fill">
-        <div class='p-2'>
-          <%= t('hyrax.footer.copyright_html', current_year: current_year) %>
-          <%= t('hyrax.background_attribution_html') %>
-        </div>
-        <div class='p-2'>
-          <% if user_signed_in? %>
-            <%= link_to t("hyrax.toolbar.profile.logout"), main_app.destroy_user_session_path, class: 'navbar-link' %>
-          <% else %>
-            <%= link_to t('hyku.footer.admin_login', default: [:'hyrax.toolbar.profile.login']), main_app.new_user_session_path, class: 'navbar-link' %>
-          <% end %>
-          <span class='navbar-link'><%= render 'hyrax/base/privacy_policy' %></span>
-        </div>
+      <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 %>
+          <%= link_to t('hyku.footer.admin_login', default: [:'hyrax.toolbar.profile.login']), main_app.new_user_session_path, class: 'navbar-link' %>
+        <% end %>
+        <span class="navbar-link"><%= render 'hyrax/base/privacy_policy' %></span>
       </div>
     </div>
+
   </div>
 </footer>

app/views/themes/cultural_repository/_facets.html.erb

@@ -1,12 +1,12 @@
 <% # main container for facets/limits menu -%>
 <% if has_facet_values? %>
 <div id="facets" class="cultural-repository facets sidenav">
-  <div class="top-card-heading">
+  <div class="top-card-heading text-center">
     <button type="button" class="facets-toggle navbar-toggler" data-toggle="collapse" data-target="#facet-panel-collapse" aria-expanded="false" aria-controls="facet-panel-collapse">
       <span class="sr-only">Toggle facets</span>
       <span class="navbar-toggler-icon"></span>
     </button>
-    <h2 class='facets-heading'>
+    <h2 class="facets-heading">
       Browse by
     </h2>
   </div>

app/views/themes/cultural_repository/_masthead.html.erb

@@ -1,25 +1,21 @@
 <% # OVERRIDE: Hyrax 5.0.0rc2 template to change the size of the column on line 20 from col-md-4 to col-md-6  %>
 <header aria-label="header" class="top-header">
   <nav id="masthead" class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between cultural-repository-nav <%= placement_class %>" role="navigation" aria-label="masthead">
-    <div class="container-fluid">
-      <!-- Brand and toggle get grouped for better mobile display -->
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top-navbar-collapse" aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <%= render '/logo' %>
-      </div>
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <%= render '/logo' %>
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top-navbar-collapse" aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
-      <div class="collapse navbar-collapse" id="top-navbar-collapse">
-        <% if admin_host? %>
-          <%= render '/admin_util_links' %>
-        <% else %>
-          <%= render '/user_util_links' %>
-          <div class="col-8 ml-auto search-items">
-            <%= render partial: 'catalog/search_form' %>
-          </div>
-        <% end %>
-      </div>
+    <div class="collapse navbar-collapse" id="top-navbar-collapse">
+      <% if admin_host? %>
+        <%= render '/admin_util_links' %>
+      <% else %>
+        <%= render '/user_util_links' %>
+        <div class="w-100">
+          <%= render partial: 'catalog/search_form' %>
+        </div>
+      <% end %>
     </div>
   </nav>
 </header>

app/views/themes/cultural_repository/_user_util_links.html.erb

@@ -1,4 +1,4 @@
-<ul id="user_utility_links" class="cultural-repository nav navbar-nav ml-auto">
+<ul id="user_utility_links" class="cultural-repository navbar-nav ml-auto text-right">
   <%= render 'shared/locale_picker' if available_translations.size > 1 %>
   <li class="nav-item <%= 'active' if current_page?(hyrax.root_path) %>">
     <%= link_to t(:'hyrax.controls.home'), hyrax.root_path, class: 'nav-link', aria: current_page?(hyrax.root_path) ? {current: 'page'} : nil %>

app/views/themes/cultural_repository/catalog/_search_form.html.erb

@@ -9,7 +9,7 @@
       <%= t("hyrax.search.form.q.label", application_name: application_name) %>
     </label>
 
-    <div class="input-group col-sm-8">
+    <div class="input-group col-sm-10 col-md-8 col-xl-6">
       <%= text_field_tag :q, current_search_parameters , class: "q form-control", id: "search-field-header", placeholder: t("hyrax.search.form.q.placeholder") %>
 
       <div class="input-group-append">

app/views/themes/cultural_repository/layouts/homepage.html.erb

@@ -5,7 +5,7 @@
     <div class="background-container" title="<%= block_for(name: 'banner_image_text') %>" style="background-image: url('<%= "#{banner_image}?#{Time.now.to_i}" %>')"></div>
     <div class="container">
       <% if controller_name == 'homepage' %>
-      <div class="col-md-3 facet-panel-background-color mt-4 mb-4">
+      <div class="facet-panel-background-color col-6 col-md-4 my-lg-2">
         <%= render 'themes/cultural_repository/facets' %>
       </div>
       <% end %>

app/views/themes/institutional_repository/_controls.html.erb

@@ -1,6 +1,6 @@
 <% # OVERRIDE: Hyrax v5.0.0rc2 - added the admin login menu from _user_util_links partial for theming %>
-<nav class="navbar navbar-light bg-light navbar-expand-sm justify-content-between align-items-center px-2 py-3 border-bottom" role="navigation" aria-label="Root Menu">
-  <ul class="nav navbar-nav col-sm-5">
+<nav class="navbar navbar-light bg-light navbar-expand-sm justify-content-between align-items-center px-2 py-3 border-bottom flex-wrap" role="navigation" aria-label="Root Menu">
+  <ul class="navbar-nav col-sm-5">
     <li class="nav-item <%= 'active' if current_page?(hyrax.root_path) %>">
       <%= link_to t(:'hyrax.controls.home'), hyrax.root_path, class: "nav-link", aria: current_page?(hyrax.root_path) ? {current: 'page'} : nil %></li>
     <li class="nav-item <%= 'active' if current_page?(hyrax.about_path) %>">

app/views/themes/institutional_repository/_logo.html.erb

@@ -1,6 +1,6 @@
 <% # OVERRIDE: Hyrax v5.0.0rc2 - added globe back to logo %>
 <% if logo_image %>
-  <a id="logo" class="col-sm-5" href="<%= hyrax.root_path %>" data-no-turbolink="true">
+  <a id="logo" href="<%= hyrax.root_path %>" data-no-turbolink="true">
     <%= image_tag logo_image, alt: block_for(name: 'logo_image_text') %>
   </a>
 <% end %>

app/views/themes/institutional_repository/_masthead.html.erb

@@ -1,26 +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 navbar-expand-lg navbar-dark bg-dark justify-content-between institutional-repository-nav <%= placement_class %>" role="navigation" aria-label="masthead">
-    <div class="container-fluid">
-      <!-- Brand and toggle get grouped for better mobile display -->
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top-navbar-collapse" aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="d-lg-none d-md-none"><%= render '/logo' %></div>
-      </div>
-      <div class="collapse navbar-collapse" id="top-navbar-collapse">
-        <div class="d-none d-lg-block d-md-block"><%= render '/logo' %></div>
+  <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="institutional-repository-application-name col-lg-2 col-md-2">
-          <span><%= application_name %></span>
-        </div>
+    <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="navbar-right col-lg-6 col-md-5">
-          <%= render partial: 'catalog/search_form' %>
         </div>
       </div>
+      <div class="col-lg-6 col-md-7 col-sm-12">
+        <%= render partial: 'catalog/search_form' %>
+      </div>
     </div>
+
   </nav>
 </header>
 <%= render '/controls' %>