arclight 0.0.1 → 1.4.0

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

@@ -0,0 +1,220 @@
+.al-search-breadcrumb,
+.al-show-breadcrumb {
+  font-size: $font-size-sm;
+  margin-bottom: $spacer;
+}
+
+.al-show-breadcrumb {
+  border-bottom: $border-width solid $border-color;
+  padding-bottom: $spacer;
+  margin-bottom: $spacer * 0.75;
+  width: 100%;
+
+  $bent-arrow: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='15'><path fill-rule='evenodd' d='M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z'></path></svg>";
+
+  .breadcrumb {
+    margin: 0;
+
+    .breadcrumb-item .breadcrumb {
+      padding-left: 0.5rem;
+    }
+
+    .breadcrumb-item-1 > .breadcrumb {
+      padding-left: 1rem;
+    }
+
+    .breadcrumb-item-2 > .breadcrumb {
+      display: block;
+    }
+
+    .breadcrumb-item-3 {
+      display: inline-block;
+    }
+
+    .breadcrumb-item-3:first-of-type {
+      // This is if the series is a parent of this item.
+      &::before {
+        content: escape-svg(url($bent-arrow));
+      }
+    }
+
+    // last item doesn't get its own line unles s
+    .breadcrumb-item-4 {
+      display: inline-block;
+    }
+  }
+
+  .breadcrumb-item-4 {
+    &:first-child > .breadcrumb-text:first-child {
+      // This is if we're on a series (no svg node like on a collection). We still want the bent arrow to show.
+      &::before {
+        content: escape-svg(url($bent-arrow));
+      }
+    }
+  }
+
+  .breadcrumb-item-1,
+  .breadcrumb-item-4 {
+    // breadcrumb-item-3 can have multiple on one line
+    flex: 1 0 100%;
+    color: $gray-600;
+  }
+}
+
+// offcanvas sidebar is scrollable for smaller screens
+#sidebar {
+  overflow-y: scroll;
+
+  @include media-breakpoint-up(lg) {
+    overflow: hidden;
+  }
+}
+
+.collection-sidebar {
+  padding-right: 1rem;
+  border-right: $border-width solid $border-color;
+
+  h2 {
+    font-size: 1.6rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+}
+
+.sidebar-section {
+  border-bottom: $border-width solid $border-color;
+  margin-bottom: $spacer;
+  padding-bottom: $spacer * 1.33;
+  margin-left: $spacer;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.breadcrumb-home-link {
+  margin-bottom: ($spacer * 0.25);
+}
+
+.al-show-actions-box {
+  border: $default-border-styling;
+  background-color: $gray-200;
+  font-size: $font-size-sm;
+  padding: ($spacer * 0.5) $spacer ($spacer * 0.75);
+
+  @media (max-width: 767px) {
+    margin-top: $spacer;
+  }
+
+  .al-collection-id {
+    margin-bottom: $spacer * 0.75;
+  }
+
+  &-options {
+    display: flex;
+    align-items: center;
+  }
+
+  &-info {
+    .dropdown {
+      // prevent dropdown from being cut off by parent container
+      position: static;
+    }
+    .dropdown-toggle:after {
+      margin-left: 0;
+    }
+
+    table {
+      td {
+        text-align: right;
+      }
+    }
+  }
+
+  svg.bi {
+    vertical-align: text-bottom;
+    color: $light-icon-color;
+  }
+
+  .dropdown-item svg.bi {
+    color: $dark-icon-color;
+  }
+}
+
+.bookmark-toggle {
+  display: inline;
+  margin-left: 1em;
+
+  .toggle-bookmark {
+    display: inline;
+    margin-bottom: 0;
+    white-space: nowrap;
+  }
+}
+
+.show-document {
+  .title-container .bookmark-toggle {
+    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
+    padding: 0.5rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .show-document {
+    padding-left: 1.5rem !important;
+  }
+}
+
+.al-hierarchy-side-content {
+  .al-request-form {
+    display: inline;
+    float: right;
+  }
+}
+
+dl dd {
+  overflow-wrap: break-word;
+}
+
+dl.deflist dt {
+  text-align: left;
+}
+
+.chronlist-head,
+.list-head,
+.index-head,
+.table-head {
+  caption-side: top;
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.chronlist th,
+.chronlist-item-date {
+  font-weight: 500;
+}
+
+.chronlist-item-date {
+  width: 15ch;
+}
+
+.chronlist-item-event {
+  div:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
+#contents {
+  border-bottom: $border-width solid $border-color;
+  border-top: $border-width solid $border-color;
+  margin: $spacer 0;
+  padding: $spacer 0;
+}

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

@@ -0,0 +1,57 @@
+.navbar-search {
+  border-bottom: $default-border-styling;
+  border-top: $default-border-styling;
+  margin-bottom: ($spacer * 0.5);
+  z-index: 10;
+
+  .search-query-form {
+    max-width: 100% !important; // work around blacklight styles
+    display: flex;
+    gap: 0.5rem;
+
+    // wrap collection dropdown onto its own line on smaller screens
+    @include media-breakpoint-down(md) {
+      flex-wrap: wrap;
+    }
+
+    .input-group {
+      width: unset;
+      flex: auto;
+    }
+
+    .within-collection-dropdown {
+      flex: none;
+    }
+  }
+}
+
+.al-masthead {
+  --al-mastead-active-link-color: var(--bs-gray-700);
+  --al-masthead-title-size: #{$h2-font-size};
+
+  .h1 {
+    display: block;
+    font-size: var(--al-masthead-title-size);
+    margin: 0;
+    padding: ($spacer * 1.5) ($spacer * 0.5);
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+    font-weight: 700;
+
+    .active a {
+      color: var(--al-mastead-active-link-color);
+    }
+  }
+
+  @media (max-width: 767px) {
+    .nav-links {
+      justify-content: center !important;
+    }
+
+    h1 {
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+.blacklight-repositories-show {
+  .al-repository-show-header {
+    margin-bottom: ($spacer * 0.5);
+    margin-top: ($spacer * 2);
+  }
+
+  .al-repository-collections{
+    font-size: $font-size-sm;
+
+    &::after {
+      content: '\bb';
+    }
+  }
+
+  .al-document-title-bar {
+    border-top: $default-border-styling;
+    margin-bottom: $spacer;
+    padding-top: ($spacer * 0.5);
+
+    .al-document-abstract-or-scope,
+    .al-collection-id {
+      font-size: $font-size-sm;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+.al-repository {
+  border: $default-border-styling;
+}
+
+@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

@@ -0,0 +1,250 @@
+:root {
+  --al-content-icon-color: #{$secondary};
+}
+
+.documents-list {
+  margin-bottom: $spacer;
+
+  // Result item header
+  .al-document-title-bar {
+    background-color: $gray-200;
+    border: $default-border-styling;
+    font-size: $font-size-sm;
+    margin: 0 (-$result-item-body-padding - 1px) 0.5rem;
+    padding: 3px $result-item-body-padding;
+  }
+
+  // Result item body
+  article.document {
+    border-bottom: $default-border-styling;
+    margin-top: 0;
+    padding: $spacer 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    .document-title-heading {
+      font-size: $h5-font-size;
+      .al-document-extent {
+        @include extent-badge;
+      }
+    }
+
+    .breadcrumb-links,
+    .al-document-creator,
+    .al-document-extent,
+    .al-document-abstract-or-scope {
+      font-size: $font-size-sm;
+    }
+
+    .al-document-abstract-or-scope {
+      margin-bottom: $spacer * 0.5;
+      max-width: 45em;
+    }
+  }
+}
+
+article.document {
+  .blacklight-icons svg {
+    fill: var(--al-content-icon-color);
+  }
+  div.breadcrumb-links,
+  dd.al-document-abstract-or-scope,
+  dd.al-document-creator {
+    margin-top: ($spacer * 0.5);
+  }
+
+  form.bookmark-toggle.col-auto {
+    padding-right: 0;
+  }
+}
+
+.al-grouped-results {
+  .breadcrumb-links {
+    font-size: $font-size-sm;
+  }
+
+  .al-document-abstract-or-scope {
+    margin-bottom: 0;
+    margin-top: $spacer * 0.75;
+    max-width: 45em;
+  }
+  .al-grouped-repository {
+    font-size: $font-size-sm;
+    margin-bottom: $spacer * 0.75;
+  }
+  .al-grouped-title-bar {
+    background-color: $gray-200;
+    padding: $result-item-body-padding;
+
+    h3 {
+      display: inline;
+      font-size: $h4-font-size;
+    }
+  }
+  .grouped-documents {
+    margin: $result-item-body-padding 0;
+    h4 {
+      font-size: $h5-font-size;
+    }
+
+    .al-grouped-more {
+      border-bottom: $default-border-styling;
+      margin-bottom: $spacer;
+      padding: ($spacer * 0.5) 0;
+    }
+
+    .document {
+      border-bottom: $default-border-styling;
+      margin-top: 0;
+      padding: $spacer 0;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .al-document-extent {
+    @include extent-badge;
+    background-color: $gray-100;
+    border-color: $gray-400;
+    color: $gray-700;
+  }
+}
+
+.al-data-range-histogram {
+  margin-bottom: $spacer;
+}
+
+.blacklight-catalog-index #appliedParams {
+  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 {
+  padding-left: 0 !important;
+}
+
+.col-no-right-padding {
+  padding-right: 0 !important;
+}
+
+.breadcrumb-links a {
+  text-decoration-style: dotted;
+  color: $body-color;
+
+  &:hover,
+  &:active {
+    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 {
+  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

@@ -0,0 +1,38 @@
+// Collection context
+.al-show-sub-heading {
+  font-size: $h6-font-size;
+  text-transform: uppercase;
+}
+
+.al-collection-actions-menu {
+  float: right;
+}
+
+// Access
+#access-and-use {
+  dl dd {
+    line-height: 1.4;
+    margin-bottom: $spacer;
+  }
+
+  img {
+    margin-bottom: $headings-margin-bottom;
+    margin-right: $spacer;
+    max-height: 150px;
+    max-width: 150px;
+  }
+
+  .al-in-person-repository-name,
+  .al-in-person-repository-location {
+    font-size: $font-size-sm;
+    line-height: 1.25;
+  }
+
+  .al-repository-contact-city_state_zip_country {
+    margin-bottom: ($spacer * 0.5);
+  }
+}
+
+.al-digital-object.breadcrumb-item {
+  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/responsive.scss

@@ -0,0 +1,13 @@
+.my-w-25 {
+  width: 25% !important;
+}
+
+.my-w-75 {
+  width: 75% !important;
+}
+
+.w-md-100 {
+  @media (max-width: 767px) {
+    width: 100% !important;
+  }
+}

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

@@ -0,0 +1,25 @@
+// Colors
+$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 !default;
+
+// Mixins
+$default-border-styling: 1px solid $default-border-color !default;
+
+@mixin extent-badge {
+  background-color: $gray-200;
+  border: $default-border-styling;
+  border-radius: $border-radius-lg;
+  color: $dark;
+  font-size: $font-size-sm;
+  line-height: 1.2;
+  margin: 0;
+  padding: ($spacer * .25) ($spacer * .5);
+  text-align: left;
+  white-space: normal;
+}

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 %>