arclight 0.1.4 → 0.3.3

data/app/assets/javascripts/arclight/oembed_viewer.js

@@ -1,18 +1,24 @@
 Blacklight.onLoad(function () {
   'use strict';
+
   var onlineContentTabSelector = '[data-arclight-online-content-tab="true"]';
   var oEmbedViewerSelector = '[data-arclight-oembed="true"]';
 
-  $(onlineContentTabSelector).on('shown.bs.tab', function() {
+  $(onlineContentTabSelector).on('shown.bs.tab', function () {
     var $viewerElements = $(oEmbedViewerSelector);
-    if($viewerElements.length === 0) {
+    if ($viewerElements.length === 0) {
       return;
     }
 
     $viewerElements.each(function (i, element) {
       var $el = $(element);
+      var loadedAttr = $el.attr('loaded');
       var data = $el.data();
       var resourceUrl = data.arclightOembedUrl;
+      if (loadedAttr && loadedAttr === 'loaded') {
+        return;
+      }
+
       $.ajax({
         url: resourceUrl,
         dataType: 'html'
@@ -20,17 +26,18 @@ Blacklight.onLoad(function () {
         var links = $('<div>' + response.match(/<link .*>/g).join('') + '</div>'); // Parse out link elements so image assets are not loaded
         var oEmbedEndPoint = links.find('link[rel="alternate"][type="application/json+oembed"]').prop('href');
 
-        if(!oEmbedEndPoint || oEmbedEndPoint.length === 0) {
+        if (!oEmbedEndPoint || oEmbedEndPoint.length === 0) {
           return;
         }
 
         $.ajax({
           url: oEmbedEndPoint
         }).done(function (oEmbedResponse) {
-          if(oEmbedResponse.html) {
+          if (oEmbedResponse.html) {
             $el.hide()
                .html(oEmbedResponse.html)
                .fadeIn(500);
+            $el.attr('loaded', 'loaded');
           }
         });
       });

data/app/assets/javascripts/arclight/truncator.js.erb

@@ -10,8 +10,8 @@ Blacklight.onLoad(function () {
   });
 
   // When elements get loaded from hierarchy
-  $('.al-contents').on('navigation.contains.elements', function () {
-    $('a[data-toggle="pill"]').on('shown.bs.tab', function () {
+  $('.al-contents, .context-navigator').on('navigation.contains.elements', function (e) {
+    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
       $('[data-arclight-truncate="true"]').each(function (_, el) {
         $(el).responsiveTruncate({
           more: "<%= I18n.t 'arclight.truncation.view_more' %>",
@@ -19,5 +19,11 @@ Blacklight.onLoad(function () {
         });
       });
     });
+    $(e.target).find('[data-arclight-truncate="true"]').each(function (_, el) {
+      $(el).responsiveTruncate({
+        more: "<%= I18n.t 'arclight.truncation.view_more' %>",
+        less: "<%= I18n.t 'arclight.truncation.view_less' %>"
+      });
+    });
   });
 });

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

@@ -1,14 +1,17 @@
 @import 'bootstrap/functions';
 @import 'bootstrap/variables';
+@import 'bootstrap/mixins/breakpoints';
 @import 'bootstrap_overrides';
 @import 'variables';
+@import 'responsive';
 @import 'modules/collection_search';
 @import 'modules/highlights';
 @import 'modules/hierarchy_and_online_contents';
+@import 'modules/icons';
 @import 'modules/layout';
 @import 'modules/mastheads';
 @import 'modules/repositories.scss';
 @import 'modules/repository_card.scss';
 @import 'modules/search_results';
 @import 'modules/show_collection';
-@import 'modules/sidebar';
+@import 'modules/context_navigation'

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

@@ -1,3 +1,26 @@
 .nav.nav-pills {
   margin-bottom: $spacer;
 }
+
+.nav.nav-tabs {
+  margin-bottom: 0;
+  flex-wrap: nowrap;
+  & .nav-item .nav-link:not(.active) {
+    background: $gray-100;
+    border-color: $nav-tabs-border-color;
+  }
+  & .nav-item .nav-link {
+    height: 100%;
+  }
+  & .nav-item {
+      overflow-wrap: break-word;
+  }
+}
+
+.tab-pane {
+  border-style: solid;
+  border-width: 0 1px 1px 1px;
+  border-color: $nav-tabs-border-color;
+  border-radius: 0px 0px $nav-tabs-border-radius $nav-tabs-border-radius;
+  padding: $spacer*2;
+}

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

@@ -0,0 +1,75 @@
+#contents > .context-navigator,
+#collection-context > .context-navigator {
+  padding-left: $spacer;
+}
+
+ul.al-context-nav-parent {
+  padding-left: 0px;
+}
+
+li.al-collection-context  {
+  flex-grow: 1;
+  margin-right: 0;
+  margin-left: 0;
+  padding-left: 15px;
+  max-width: 100%;
+
+  .al-collection-context-collapsible {
+    width: 100%;
+  }
+
+  .blacklight-icons {
+    padding-top: $spacer * .25;
+  }
+
+  .al-number-of-children-badge {
+    font-size: 12px;
+    vertical-align: middle;
+  }
+
+  .documentHeader {
+    flex-grow: 1;
+    margin-bottom: $spacer;
+    width: 100%;
+  }
+
+  .document-title-heading {
+    font-size: 1.25rem;
+  }
+
+  .col.col-no-left-padding.d-flex.flex-wrap {
+    flex-grow: 1;
+  }
+  .order-2 .row {
+    margin-left: 0;
+  }
+
+  .al-document-abstract-or-scope {
+    max-width: 45em;
+  }
+
+  .blacklight-icons svg {
+    fill: $gray-600;
+  }
+
+  .al-online-content-icon svg {
+    fill: $green;
+  }
+  @media (max-width: 767px) {
+    padding-left: 0;
+    .al-document-abstract-or-scope {
+      max-width: 25em;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .blacklight-catalog.blacklight-catalog-show {
+    #context {
+      padding: 10px;
+    }
+  }
+  ul.al-context-nav-parent {
+    padding-left: 40px;
+  }
+}

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

@@ -1,4 +1,3 @@
-.documents-hierarchy,
 .documents-online_contents {
   .document-title-heading {
     font-size: $h5-font-size;
@@ -10,16 +9,6 @@
     }
   }
 
-  .al-toggle-view-all {
-    color: $gray-600;
-
-    &:before {
-      color: $gray-600;
-      content: "\2022";
-      padding-right: 3px;
-    }
-  }
-
   .al-hierarchy-children-status {
     font-size: $h6-font-size;
     margin-top: 6px;
@@ -31,17 +20,11 @@
     font-size: $font-size-sm;
   }
 
-  // Component title + children badge
-  .documentHeader {
-    border-bottom: $border-width dashed #ccc;
-    margin-bottom: ($spacer / 2);
-    margin-top: ($spacer * 2);
-  }
-
   // Headings and text
   .al-document-abstract-or-scope {
     font-size: 0.85rem;
-    line-height: 1.25;
+    line-height: 1.5;
+    max-width: 45em;
   }
 
   .al-hierarchy-sub-heading {
@@ -53,15 +36,13 @@
 
   // Series level
   .blacklight-series .document-title-heading,
+  .blacklight-subseries .document-title-heading,
   .blacklight-file .document-title-heading,
-  .blacklight-otherlevel .document-title-heading {
+  .blacklight-binder .document-title-heading,
+  .blacklight-other .document-title-heading {
     font-size: $h5-font-size;
     font-weight: 400;
     margin-bottom: ($spacer / 2);
-
-    > a {
-      color: $gray-900;
-    }
   }
 
   .blacklight-series,
@@ -69,7 +50,8 @@
     // Additional for levels below series
     .blacklight-subseries .document-title-heading,
     .blacklight-file .document-title-heading,
-    .blacklight-otherlevel .document-title-heading {
+    .blacklight-binder .document-title-heading,
+    .blacklight-other .document-title-heading {
       font-size: $h6-font-size;
 
       .documentHeader {
@@ -80,7 +62,8 @@
     // Icongraphy for each level
     .blacklight-subseries .document-title-heading,
     .al-hierarchy-level-1 .blacklight-file .document-title-heading,
-    .al-hierarchy-level-1 .blacklight-otherlevel .document-title-heading {
+    .al-hierarchy-level-1 .blacklight-binder .document-title-heading,
+    .al-hierarchy-level-1 .blacklight-other .document-title-heading {
       padding-left: 10px;
 
       &:before {
@@ -106,7 +89,7 @@
   }
 }
 
-.al-hierarchy-highlight {
+.al-hierarchy-highlight > .documentHeader {
   background: $mark-bg;
 }
 
@@ -127,13 +110,25 @@
   }
 }
 
+// Scope content
+.al-document-abstract-or-scope {
+  font-size: 0.85rem;
+  line-height: 1.5;
+  max-width: 45em;
+  margin-bottom: $spacer;
+}
+
 // Component show page, Collection context section
 #collection-context {
   h1 {
     font-size: $h5-font-size;
   }
 
-  .documents-hierarchy,
+  ul {
+    list-style: none;
+    flex-grow: 1;
+  }
+
   .documents-online_contents {
     .documentHeader {
       margin-top: 1.5rem;
@@ -142,25 +137,26 @@
 
   // Top-level context
   .al-hierarchy-level-0 .document-title-heading {
-    // background-color: red;
     font-size: $h5-font-size;
-    font-weight: 400;
     margin-bottom: ($spacer / 2);
-
-    > a {
-      color: $gray-900;
-    }
   }
 
   // All subsequent levels
   @for $i from 1 through 12 {
     .al-hierarchy-level-#{$i} .document-title-heading {
       font-size: $h6-font-size;
-      font-weight: 400;
+    }
+  }
 
-      > a {
-        color: $gray-900;
-      }
+  .prev-siblings li, li.al-collection-context {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s, height 0.5s, opacity 0.5s linear;
+
+    &.collapsed {
+      visibility: hidden;
+      height: 0;
+      opacity: 0;
     }
   }
 }

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

@@ -3,8 +3,9 @@
   padding-left: 10px;
   font-size: $font-size-sm;
   font-style: italic;
+  margin-bottom: $spacer;
   em {
-    background-color: yellow;
+    background-color: $background-highlight;
     font-weight: bold;
   }
 }

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

@@ -0,0 +1,4 @@
+.blacklight-icons svg {
+  height: 1rem;
+  width: 1rem;
+}

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

@@ -4,22 +4,126 @@
   margin-bottom: $spacer;
 }
 
-// Collapse arrow indicators
-.al-toggle-view-more,
-.al-toggle-view-all {
-  &[aria-expanded="true"] {
-    &::after {
-      content: '\25BC';
-      margin-left: 6px;
+.al-show-breadcrumb .breadcrumb {
+  background-color: transparent;
+  margin-bottom: 0;
+  padding: 0;
+
+  .breadcrumb-item + .breadcrumb-item {
+    padding-top: 2px;
+
+    &::before {
+      content: '';
     }
   }
+}
+
+.breadcrumb-home-link {
+  margin-bottom: ($spacer / 4);
+}
+.al-show-actions-box {
+  border: $default-border-styling;
+  background-color: $gray-200;
+  font-size: $font-size-sm;
+  height: 100%;
+  margin-bottom: $spacer * 2;
+  padding: ($spacer * .5) $spacer ($spacer * .75);
+
+  @media (max-width: 767px) {
+    margin-top: $spacer;
+  }
+
+  .al-collection-id {
+    margin-bottom: $spacer * .75;
+  }
 
-  &::after {
-    content: '\25B6';
-    margin-left: 6px;
+  &-options {
+    display: flex;
+    align-items: center;
+  }
+
+  &-downloads {
+    padding-top: $spacer * .25;
+    white-space: nowrap;
+
+    &-container {
+      margin-top: $spacer * .5;
+    }
+
+    &-file {
+      &.blacklight-icons {
+        margin-right: $spacer * .5;
+
+        svg {
+          fill: $secondary;
+        }
+      }
+    }
+  }
+}
+
+.al-show-breadcrumb h1 {
+  font-size: 1.5rem;
+
+  &.media .col {
+    padding-top: $spacer * .25;
   }
 }
 
+.breadcrumb-item {
+  flex: 1 0 100%;
+
+  &.al-bc-item {
+    &::before {
+      content: '»' !important;
+    }
+  }
+}
+
+// Show page breadcrumbs
+@for $i from 1 to 14 {
+  .breadcrumb-item.breadcrumb-item-#{$i}.media {
+    padding-left: 0;
+
+    @media (max-width: 767px) {
+      &::before {
+        padding-right: 0;
+      }
+    }
+
+    @media (min-width: 768px) {
+      padding-left: ($i - 1) * 10px;
+	  }
+  }
+}
+
+// Show page metadata.
+// Indent to match terminal show page breadcrumb.
+@for $i from 1 to 14 {
+  .al-metadata-section.breadcrumb-item-#{$i} {
+    padding-left: 0;
+
+    @media (min-width: 768px) {
+      padding-left: ($i * 10) + 10px;
+    }
+  }
+}
+
+// Collapse +/- indicators
+.al-toggle-view-children {
+  &:not(.collapsed) {
+    & {
+      content: image-url('blacklight/minus.svg');
+    }
+  }
+
+  content: image-url('blacklight/plus.svg');
+}
+
+.al-toggle-children-container {
+  margin-left: -1.5rem;
+}
+
 .bookmark-toggle .toggle-bookmark {
   display: inline;
   margin-bottom: 0;
@@ -28,7 +132,6 @@
 
 .bookmark-toggle {
   display: inline;
-  float: right;
 }
 
 .al-hierarchy-side-content {
@@ -51,3 +154,38 @@
     content: "\0229F";
   }
 }
+
+
+dl dd {
+  overflow-wrap: break-word;
+}
+
+dl.deflist dt {
+  text-align: left;
+}
+
+.chronlist-head, .list-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;
+}