🎁 Add campuses to index page

This commit will add the campuses to the index page and do some minimum
styling.  Also the scroll to top button was added as well all its
accompanying files.  The repositories.yml was updated to NGAO's current
one so we can see more than one campus.  We also introduced a decorator
pattern to override the repositories controller to add the campus logic.

app/assets/stylesheets/arclight.scss

@@ -4,3 +4,5 @@ $logo-image: image_url('arclight/logo.png') !default;
 @import 'blacklight/blacklight';
 @import 'arclight/application';
 @import 'breadcrumbs';
+@import 'campus';
+@import 'scroll_to_top';

app/assets/stylesheets/campus.scss

@@ -0,0 +1,54 @@
+.campus {
+  background-color: #fff;
+  margin: 1em 0;
+  border-radius: 1em;
+  padding: 0.5em;
+
+  .campus-header {
+    margin: 0.1rem;
+    min-height: 4rem;
+    font-size: 20px;
+  }
+
+  .campus_image {
+    height: auto;
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  .campus_footer {
+    margin-top: 0.5em;
+  }
+
+  .campus_link {
+    margin-bottom: 0;
+  }
+
+  a.button {
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #990000;
+    background: none;
+    background-color: transparent;
+    text-decoration: none;
+  }
+
+  .button {
+    display: inline-block;
+    cursor: pointer;
+    -webkit-appearance: none;
+    border: 1px solid transparent;
+    border-width: 2px;
+    border-radius: 20px;
+    padding: 0.5625em 1em;
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    background-color: #900;
+    color: #fff;
+    font-family: BentonSansBold, Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.18s ease-out;
+  }
+}

app/assets/stylesheets/scroll_to_top.scss

@@ -0,0 +1,19 @@
+// scroll to top button
+.scrollToTop {
+  margin: 0;
+  position: fixed;
+  bottom: 8.5%;
+  right: 0;
+  z-index: 100;
+  display: none;
+  text-decoration: none;
+  color: #ffffff;
+  background-color: rgba(153, 0, 0, 0.7);
+  padding: 10px 20px 10px 10px;
+  font-size: 12px;
+}
+.scrollToTop:hover {
+  background-color: rgba(153, 0, 0, 1);
+  color: #ffffff;
+  text-decoration: none;
+}

app/controllers/arclight/repositories_controller_decorator.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# OVERRIDE: Arclight v1.4.0 to add campus level
+module Arclight
+  module RepositoriesControllerDecorator
+    def index
+      super
+      set_campuses
+    end
+
+    private
+
+    def set_campuses
+      @campuses =
+        @repositories.group_by(&:campus)
+                     .sort do |a, b|
+                       helpers.convert_campus_id(a.first).downcase <=> helpers.convert_campus_id(b.first).downcase
+                     end
+    end
+  end
+end
+
+Arclight::RepositoriesController.prepend(Arclight::RepositoriesControllerDecorator)

app/javascript/application.js

@@ -5,4 +5,5 @@ import bootstrap from "bootstrap"
 import githubAutoCompleteElement from "@github/auto-complete-element"
 import Blacklight from "blacklight"
 
-import "arclight"
+import "arclight"
+import "repositories"

app/javascript/repositories.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function() {
+  $('.campus_link').click(function() {
+    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+      if (target.length) {
+        $('html,body').animate({
+          scrollTop: target.offset().top - 160
+        }, 1000);
+        return false;
+      }
+    }
+  });
+
+  $(window).scroll(function(){
+    if ($(this).scrollTop() > 600) {
+        $(".scrollToTop").fadeIn(1000)
+    } else {
+        $(".scrollToTop").fadeOut(1000);
+    }
+  });
+
+  //Click event to scroll to top
+  $(".scrollToTop").click(function(){
+      $('html, body').animate({scrollTop : 0},500);
+      return false;
+  });
+});

app/views/arclight/repositories/_campus_card.html.erb

@@ -0,0 +1,16 @@
+<div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
+  <div class="campus">
+    <div class="text-center">
+      <h3 class="campus-header"><%= convert_campus_id(campus) %></h3>
+    </div>
+    <div>
+      <%= image_tag(campus_image(campus), class: 'campus_image', alt:"#{convert_campus_id(campus)}") %>
+    </div>
+    <div class="text-center campus_footer">
+      <a class="button campus_link" href="#<%= campus %>">
+        <div class="sr-only visually-hidden"><%= "Explore #{convert_campus_id(campus)} Repositories" %></div>
+        <div aria-hidden="true">Explore Repositories</div>
+      </a>
+    </div>
+  </div>
+</div>

app/views/arclight/repositories/index.html.erb

@@ -0,0 +1,34 @@
+<%#
+  OVERRIDE Arclight v1.4.0 to add custom campus content
+%>
+
+<% breadcrumb :repositories %>
+
+<h1 class="sr-only visually-hidden"><%= t('arclight.repositories') %></h1>
+
+<div class="al-repositories">
+  <% @page_title = t('arclight.views.repositories.title') %>
+  <%= render 'shared/breadcrumbs' %>
+
+  <%# ADD CUSTOM CONTENT HERE FOR NGAO REPOSITORY PAGE CONTENT %>
+  <h2>Welcome to Archives Online</h2>
+  <p>Archives Online is a portal for accessing descriptions of archival and special collections held by libraries, archives and other cultural heritage units at Indiana University or affiliated with Indiana University. The collection descriptions (finding aids) are for non-book and original research materials such as correspondence and photographs. This new Archives Online site is currently under development and does not yet contain links to digitized materials from collections or all collections from IUPUI. To view digitized archival materials, visit <a href="https://webapp1.dlib.indiana.edu/findingaids">Legacy Archives Online</a>. To view additional IUPUI collections, visit <a href="https://www.ulib.iupui.edu/special">Ruth Lilly Special Collections &amp; Archives</a>.</p>
+
+  <div class="col-md-12 light-gray">
+    <%# ADD CAMPUS CARDS %>
+    <div class="row">
+      <% @campuses.each do |campus| %>
+        <%= render partial: 'campus_card', locals: {campus: campus.first} %>
+      <% end %>
+    </div>
+
+    <%# ADDED CAMPUS LEVEL FOR DISPLAY %>
+    <% @campuses.each do |campus, repositories| %>
+      <h2 id="<%= campus %>" class="repository-header"><%= convert_campus_id(campus) %></h2>
+      <% repositories.sort{|a,b| a.name <=> b.name}.each do |repository| %>
+        <%= render partial: 'repository', locals: { repository: repository } %>
+      <% end %>
+    <% end %>
+  </div>
+  <a href="#" class="scrollToTop"><%= blacklight_icon("chevron-double-up") %> Back to top</a>
+</div>

config/application.rb

@@ -20,5 +20,16 @@ class Application < Rails::Application
     #
     # config.time_zone = "Central Time (US & Canada)"
     # config.eager_load_paths << Rails.root.join("extras")
+
+    config.to_prepare do
+      # Allows us to use decorator files
+      Dir.glob(File.join(File.dirname(__FILE__), '../app/**/*_decorator*.rb')).sort.each do |c|
+        Rails.configuration.cache_classes ? require(c) : load(c)
+      end
+
+      Dir.glob(File.join(File.dirname(__FILE__), '../lib/**/*_decorator*.rb')).sort.each do |c|
+        Rails.configuration.cache_classes ? require(c) : load(c)
+      end
+    end
   end
 end

config/importmap.rb

@@ -14,3 +14,4 @@
 # TODO: We may be able to move these to a single importmap for arclight.
 pin 'arclight/oembed_controller', to: 'arclight/oembed_controller.js'
 pin 'arclight/truncate_controller', to: 'arclight/truncate_controller.js'
+pin 'repositories', to: 'repositories.js'