arclight 0.3.0 → 1.6.2

data/app/assets/stylesheets/arclight/modules/mastheads.scss

@@ -1,115 +1,42 @@
-.al-homepage-masthead.jumbotron {
+.navbar-search {
   border-bottom: $default-border-styling;
-  padding: ($spacer * 2) $spacer $spacer;
-
-  .navbar-nav {
-    flex-direction: row;
-    font-weight: 700;
-    margin-bottom: ($spacer * 1);
-  }
-
-  h1 {
-    font-size: 2.25rem;
-    margin-bottom: ($spacer * 2);
-  }
+  border-top: $default-border-styling;
+  margin-bottom: ($spacer * 0.5);
+  z-index: 10;
 
   .search-query-form {
-    margin-bottom: $spacer;
-    max-width: 100%;
-  }
-
-  .navbar {
-    padding-bottom: 0;
+    max-width: 100% !important; // work around blacklight styles
+    display: flex;
+    gap: 0.5rem;
 
-    a {
-      font-weight: $font-weight-bold;
+    // wrap collection dropdown onto its own line on smaller screens
+    @include media-breakpoint-down(md) {
+      flex-wrap: wrap;
     }
-  }
 
-  @media (max-width: 767px) {
-    .masthead-center {
-      text-align: center;
-    }
-    h2 {
-      display: inline-block;
-    }
-    .nav-links {
-      justify-content: center !important;
+    .input-group {
+      width: unset;
+      flex: auto;
     }
-  }
-}
-
-
-.navbar-search {
-  // Undo some of Blacklight's extending of column classes.
-  .search-query-form {
-    flex-basis: auto !important;
-    max-width: 100% !important;
-  }
-}
 
-.within-collection-dropdown {
-  min-width: 0;
-
-  @include media-breakpoint-up(sm) {
-    width: 50% !important;
-  }
-
-  @include media-breakpoint-up(lg) {
-    min-width: 0;
+    .within-collection-dropdown {
+      flex: none;
+    }
   }
 }
 
 .al-masthead {
-  h1, .h1 {
-    display: block;
-    font-size: $h2-font-size;
-    margin: 0;
-    padding: ($spacer * 1.5) ($spacer / 2);
-  }
-
-  .navbar-nav {
-    flex-direction: row;
-    font-weight: 700;
+  --al-mastead-active-link-color: var(--bs-gray-700);
+  --al-masthead-title-size: #{$h2-font-size};
+  --bs-nav-link-font-weight: 700;
 
-  .active a {
-      color: $gray-700;
-    }
+  .h1 {
+    font-size: var(--al-masthead-title-size);
   }
 
-  + .navbar-search {
-    border-bottom: $default-border-styling;
-    border-top: $default-border-styling;
-    margin-bottom: ($spacer / 2);
-
-    a {
-      font-weight: $font-weight-bold;
-    }
-
+  .navbar-nav {
     .active a {
-      color: $gray-700;
-    }
-
-    .navbar-toggler {
-      background-color: $white;
-      border: $default-border-styling;
-    }
-
-    .navbar-toggler-icon {
-      background-image: $navbar-light-toggler-icon-bg;
-    }
-  }
-
-  @media (max-width: 767px) {
-    .nav-links {
-      justify-content: center !important;
-    }
-  }
-
-  @media (max-width: 992px) {
-    h1,
-    + .navbar-search {
-      text-align: center;
+      color: var(--al-mastead-active-link-color);
     }
   }
 }

data/app/assets/stylesheets/arclight/modules/repositories.scss

@@ -1,6 +1,6 @@
 .blacklight-repositories-show {
   .al-repository-show-header {
-    margin-bottom: ($spacer / 2);
+    margin-bottom: ($spacer * 0.5);
     margin-top: ($spacer * 2);
   }
 
@@ -15,7 +15,7 @@
   .al-document-title-bar {
     border-top: $default-border-styling;
     margin-bottom: $spacer;
-    padding-top: ($spacer / 2);
+    padding-top: ($spacer * 0.5);
 
     .al-document-abstract-or-scope,
     .al-collection-id {

data/app/assets/stylesheets/arclight/modules/repository_card.scss

@@ -1,53 +1,9 @@
 .al-repository {
-  background-color: $gray-200;
   border: $default-border-styling;
-  margin-bottom: $spacer;
-
-  .al-repository-information {
-    font-size: $font-size-sm;
-    padding: $spacer;
-
-    @media (min-width: 992px) {
-      padding-left: 0;
-    }
-
-    address {
-      margin-bottom: 0;
-    }
-
-    .repo-name {
-      margin-bottom: $spacer;
-    }
-
-    .al-repository-contact,
-    .al-repository-extra-collection-count {
-      font-weight: 300;
-    }
-
-    .al-repository-street-address {
-      margin-bottom: 0.5rem;
-    }
-
-    .al-repository-description {
-      margin-right: $spacer;
-      padding-left: $spacer * 2;
-
-      @media (min-width: 992px) {
-        border-left: $default-border-styling;
-      }
-    }
-
-    .al-repository-extra {
-      text-align: center;
-
-      .al-repository-extra-collection-count {
-        font-style: italic;
-        margin-bottom: $spacer;
-      }
+}
 
-      .al-repository-collection-count {
-        font-weight: $font-weight-bold;
-      }
-    }
+@include media-breakpoint-up(sm) {
+  .al-repository-description {
+    border-left: $default-border-styling;
   }
 }

data/app/assets/stylesheets/arclight/modules/search_form.scss

@@ -0,0 +1,9 @@
+// Original style comes from https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_dropdown.scss#L184
+// via https://github.com/projectblacklight/blacklight/blob/v8.1.0/app/assets/stylesheets/blacklight/_search_form.scss#L25
+.input-group > .search-autocomplete-wrapper {
+  ul {
+    li {
+      white-space: normal;
+    }
+  }
+}

data/app/assets/stylesheets/arclight/modules/search_results.scss

@@ -1,5 +1,8 @@
-.documents-list,
-.documents-online_contents {
+:root {
+  --al-content-icon-color: #{$secondary};
+}
+
+.documents-list {
   margin-bottom: $spacer;
 
   // Result item header
@@ -28,10 +31,6 @@
       }
     }
 
-    form.bookmark-toggle.col-auto {
-      padding-right: 0;
-    }
-
     .breadcrumb-links,
     .al-document-creator,
     .al-document-extent,
@@ -40,7 +39,7 @@
     }
 
     .al-document-abstract-or-scope {
-      margin-bottom: $spacer * .5;
+      margin-bottom: $spacer * 0.5;
       max-width: 45em;
     }
   }
@@ -48,21 +47,16 @@
 
 article.document {
   .blacklight-icons svg {
-    fill: $secondary;
-  }
-  .blacklight-icons.al-online-content-icon svg {
-    fill: $green;
+    fill: var(--al-content-icon-color);
   }
   div.breadcrumb-links,
-  div.al-document-abstract-or-scope,
-  div.al-document-creator {
-    margin-top: ($spacer * .5);
+  dd.al-document-abstract-or-scope,
+  dd.al-document-creator {
+    margin-top: ($spacer * 0.5);
   }
-}
 
-.documents-compact {
-  h3 {
-    font-size: $h5-font-size;
+  form.bookmark-toggle.col-auto {
+    padding-right: 0;
   }
 }
 
@@ -73,12 +67,12 @@ article.document {
 
   .al-document-abstract-or-scope {
     margin-bottom: 0;
-    margin-top: $spacer * .75;
+    margin-top: $spacer * 0.75;
     max-width: 45em;
   }
   .al-grouped-repository {
     font-size: $font-size-sm;
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
   .al-grouped-title-bar {
     background-color: $gray-200;
@@ -97,7 +91,8 @@ article.document {
 
     .al-grouped-more {
       border-bottom: $default-border-styling;
-      padding: ($spacer * .5) 0;
+      margin-bottom: $spacer;
+      padding: ($spacer * 0.5) 0;
     }
 
     .document {
@@ -119,15 +114,6 @@ article.document {
   }
 }
 
-.documents-compact {
-  .document {
-    .breadcrumb-links,
-    .al-repository-footer {
-      font-size: $font-size-sm;
-    }
-  }
-}
-
 .al-data-range-histogram {
   margin-bottom: $spacer;
 }
@@ -136,27 +122,38 @@ article.document {
   margin-bottom: ($spacer * 3) !important;
 }
 
-
 // Compact Search Results
 .documents-compact {
   margin-bottom: $spacer;
 
+  h3 {
+    font-size: $h5-font-size;
+  }
+
   .document {
     border-bottom: $default-border-styling;
+    display: flex;
     padding: $spacer 0;
 
     &:first-child {
       padding-top: 0;
     }
+    .breadcrumb-links,
+    .al-repository-footer {
+      font-size: $font-size-sm;
+    }
   }
 }
 
 .index-document-functions {
   display: flex;
+  justify-content: flex-end !important;
 }
 
 .al-document-container.text-muted {
   color: $gray-600 !important;
+  font-size: 16px;
+  float: right;
 }
 
 .col-no-left-padding {
@@ -167,34 +164,87 @@ article.document {
   padding-right: 0 !important;
 }
 
-.breadcrumb .media .col, h1.media .col {
-  flex-basis: auto;
-}
-
-.breadcrumb .media svg, h1.media svg {
-  fill: $gray-600;
-}
-
 .breadcrumb-links a {
-  border-bottom: 1px dashed $gray-600;
+  text-decoration-style: dotted;
   color: $body-color;
 
   &:hover,
   &:active {
-    border-color: inherit;
-    border-bottom-style: solid;
-    text-decoration: none;
+    text-decoration-style: solid;
   }
 }
 
 .breadcrumb-links .col {
   flex-basis: auto;
- }
+}
 
 .btn-outline-secondary svg {
   fill: $gray-600;
 }
 
-.btn-outline-secondary:not(:disabled):not(.disabled).active svg, .btn-outline-secondary:hover svg {
+.btn-outline-secondary:not(:disabled):not(.disabled).active svg,
+.btn-outline-secondary:hover svg {
   fill: $white;
 }
+
+.sort-pagination {
+  flex-wrap: wrap;
+}
+
+.search-widgets {
+  width: 100%;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.result-type-group {
+  order: -1;
+  flex-grow: 1;
+  &.btn-group > .btn {
+    flex-grow: 0;
+  }
+}
+@include media-breakpoint-down(md) {
+  .result-type-group {
+    margin-bottom: 0.5rem;
+    width: 100%;
+  }
+
+  .search-widgets {
+    justify-content: flex-start;
+  }
+}
+
+.show-document {
+  .al-contents {
+    .breadcrumb-links {
+      display: none;
+    }
+
+    .sort-pagination {
+      margin-bottom: 0;
+    }
+
+    article {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    article:first-child {
+      padding-top: 1rem;
+    }
+
+    article:nth-child(odd) {
+      background-color: $gray-100;
+    }
+
+    .index_title {
+      font-size: 1rem;
+    }
+
+    .bookmark-toggle {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/arclight/modules/show_collection.scss

@@ -1,37 +1,15 @@
 // Collection context
-.al-sticky-sidebar {
-  position: sticky;
-  top: 0;
-}
-
 .al-show-sub-heading {
   font-size: $h6-font-size;
   text-transform: uppercase;
-
-  + dl > dt {
-    font-size: $font-size-sm;
-    margin-top: 4px;
-    text-transform: uppercase;
-  }
 }
 
 .al-collection-actions-menu {
   float: right;
 }
 
-.al-online-content-icon .blacklight-icons svg {
-  fill: $green;
-}
-
-p.media .col {
-  flex: auto;
-}
-// Access tab
-#access {
-  dl dt {
-    font-size: $font-size-sm;
-  }
-
+// Access
+#access-and-use {
   dl dd {
     line-height: 1.4;
     margin-bottom: $spacer;
@@ -45,21 +23,16 @@ p.media .col {
   }
 
   .al-in-person-repository-name,
-  .al-in-person-repository-location,
-  .al-in-person-repository-contact {
+  .al-in-person-repository-location {
     font-size: $font-size-sm;
     line-height: 1.25;
   }
 
   .al-repository-contact-city_state_zip_country {
-    margin-bottom: ($spacer / 2);
+    margin-bottom: ($spacer * 0.5);
   }
 }
 
 .al-digital-object.breadcrumb-item {
-  margin-bottom: ($spacer / 2);
-}
-
-p.media.breadcrumb-item {
-  margin-bottom: ($spacer / 2);
+  margin-bottom: ($spacer * 0.5);
 }

data/app/assets/stylesheets/arclight/modules/truncator.scss

@@ -0,0 +1,58 @@
+.truncator {
+  // content is clamped to 3 lines unless expanded
+  .content {
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &.expanded .content {
+    display: initial;
+  }
+
+  // safari truncation fix
+  .content > * {
+    margin: 0;
+  }
+
+  // expand/collapse toggle is only shown if content is truncated
+  button {
+    display: none;
+  }
+
+  &.truncated button {
+    display: inline-block;
+  }
+
+  // "view more"/"view less" text swaps when content is expanded
+  .view-more {
+    color: shade-color($link-color, 20%);
+    display: inline;
+  }
+
+  .view-less {
+    color: shade-color($link-color, 20%);
+    display: none;
+  }
+
+  &.expanded {
+    .view-more {
+      display: none;
+    }
+
+    .view-less {
+      display: inline;
+    }
+  }
+
+  // icon rotates when content is expanded
+  .icon::before {
+    content: "▶";
+  }
+
+  &.expanded .icon::before {
+    content: "▼";
+  }
+}

data/app/assets/stylesheets/arclight/variables.scss

@@ -1,12 +1,15 @@
 // Colors
-$background-highlight: #ffffaa;
-$default-border-color: $border-color;
+$online-icon-color: $green !default;
+$background-highlight: #ffffaa !default;
+$default-border-color: $border-color  !default;
+$light-icon-color: #f5f5f5 !default;
+$dark-icon-color: $secondary !default;
 
 // Spacing
-$result-item-body-padding: 12px;
+$result-item-body-padding: 12px !default;
 
 // Mixins
-$default-border-styling: 1px solid $default-border-color;
+$default-border-styling: 1px solid $default-border-color !default;
 
 @mixin extent-badge {
   background-color: $gray-200;

data/app/components/arclight/access_component.html.erb

@@ -0,0 +1,14 @@
+
+<% access_content = capture do %>
+  <%= render Arclight::MetadataSectionComponent.with_collection(section_names,
+              metadata_attr: { layout: Arclight::UpperMetadataLayoutComponent },
+              presenter: presenter) %>
+<% end %>
+
+<% if access_content.present? %>
+  <div id="<%= t('arclight.views.show.sections.access_field').parameterize %>">
+    <h2 class="al-show-sub-heading"><%= t 'arclight.views.show.sections.access_field' %></h2>
+
+    <%= access_content%>
+  </div>
+<% end %>

data/app/components/arclight/access_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Arclight
+  # Render access information for a document
+  class AccessComponent < ViewComponent::Base
+    def initialize(presenter:)
+      super()
+      @show_config = presenter.configuration.show
+      @presenter = presenter
+    end
+
+    attr_reader :presenter, :show_config
+
+    delegate :collection?, to: :presenter
+
+    # @return Array<Symbol> a list of metadata section names
+    def section_names
+      return Array(collection_access_items) if collection?
+
+      Array(component_access_items)
+    end
+
+    delegate :collection_access_items, :component_access_items, to: :show_config
+  end
+end

data/app/components/arclight/bookmark_component.html.erb

@@ -0,0 +1,25 @@
+<% if current_or_guest_user %>
+  <%= form_tag(bookmark_path,
+              authenticity_token: false,
+              method:  bookmarked? ? :delete : :put,
+              class: "bookmark-toggle ms-2",
+              data: {
+                'doc-id' => document.id,
+                present: "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.present')}</span>",
+                absent: "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.absent')}</span>",
+                inprogress: t('blacklight.search.bookmarks.inprogress')
+              }) do %>
+    <div class="checkbox toggle-bookmark">
+      <label class="toggle-bookmark" data-checkboxsubmit-target="label">
+        <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
+        <span data-checkboxsubmit-target="span"><%= bookmarked? ? "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.present')}</span>".html_safe : "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.absent')}</span>".html_safe %></span>
+      </label>
+    </div>
+
+    <%= submit_tag(t(bookmarked? ? 'remove.button' : 'add.button', scope: 'blacklight.bookmarks'),
+                  id: "bookmark_toggle_#{document.id.to_s.parameterize}",
+                  class: "bookmark-#{bookmarked? ? 'remove' : 'add'} btn btn-outline-secondary") %>
+  <% end %>
+<% else %>
+  &nbsp;
+<% end %>

data/app/components/arclight/bookmark_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Arclight
+  # A component to render a bookmark button for a document
+  class BookmarkComponent < Blacklight::Document::BookmarkComponent
+    delegate :current_or_guest_user, :blacklight_icon, to: :helpers
+    attr_accessor :document
+  end
+end