Restructure the component-level UI layout; fixes #1148

projectblacklight · Oct 13, 2022 · 2429819 · 2429819
1 parent f59f274
commit 2429819
Show file tree

Hide file tree

Showing 34 changed files with 194 additions and 634 deletions.
diff --git a/app/assets/javascripts/arclight/arclight.js b/app/assets/javascripts/arclight/arclight.js
@@ -1,4 +1,3 @@
-//= require arclight/collection_scrollspy
 //= require arclight/collection_navigation
 //= require arclight/context_navigation
 //= require arclight/oembed_viewer

diff --git a/app/assets/javascripts/arclight/collection_navigation.js b/app/assets/javascripts/arclight/collection_navigation.js
@@ -77,12 +77,6 @@
     });
 
     $('.al-contents').on('navigation.contains.elements', function (e) {
-      var toEnable = $('[data-hierarchy-enable-me]');
-      var srOnly = $('h2[data-sr-enable-me]');
-      toEnable.removeClass('disabled');
-      toEnable.text(srOnly.data('hasContents'));
-      srOnly.text(srOnly.data('hasContents'));
-
       $(e.target).find('.collapse').on('show.bs.collapse', function (ee) {
         var $newTarget = $(ee.target);
         $newTarget.find('.al-contents').each(function (i, element) {

diff --git a/app/assets/javascripts/arclight/collection_scrollspy.js b/app/assets/javascripts/arclight/collection_scrollspy.js
diff --git a/app/assets/javascripts/arclight/context_navigation.js b/app/assets/javascripts/arclight/context_navigation.js
@@ -304,23 +304,9 @@ class ContextNavigation {
     }
     this.el.parent().data('resolved', true);
     this.addListenersForPlusMinus();
-    this.enablebuttons();
-    this.updateScreenReaderText();
-    Blacklight.doBookmarkToggleBehavior();
     this.el.trigger('navigation.contains.elements');
   }
 
-  enablebuttons() {
-    const toEnable = this.findTarget('enableButton');
-    toEnable.classList.remove('disabled');
-    toEnable.innerHTML = toEnable.dataset.hasContents;
-  }
-
-  updateScreenReaderText() {
-    const srOnly = this.findTarget('screenReaderText');
-    srOnly.innerHTML = srOnly.dataset.hasContents;
-  }
-
   // eslint-disable-next-line class-methods-use-this
   findTarget(name) {
     return document.querySelector(`[data-arclight-context-navigation-target="${name}"`);

diff --git a/app/assets/stylesheets/arclight/application.scss b/app/assets/stylesheets/arclight/application.scss
@@ -1,6 +1,3 @@
-@import 'bootstrap/functions';
-@import 'bootstrap/variables';
-@import 'bootstrap/mixins/breakpoints';
 @import 'bootstrap_overrides';
 @import 'variables';
 @import 'responsive';

diff --git a/app/assets/stylesheets/arclight/modules/context_navigation.scss b/app/assets/stylesheets/arclight/modules/context_navigation.scss
@@ -1,75 +1,38 @@
-#contents > .context-navigator,
-#collection-context > .context-navigator {
-  padding-left: $spacer;
+#contents {
+  overflow-y: auto;
 }
 
-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%;
+.context-navigator {
+  font-size: 0.875rem;
 
-  .al-collection-context-collapsible {
-    width: 100%;
+  .al-context-nav-parent {
+    list-style: none;
+    overflow-wrap: break-word;
+    padding-left: 2rem;
   }
 
-  .blacklight-icons {
-    padding-top: $spacer * .25;
+  .prev-siblings {
+    list-style: none;
   }
 
-  .al-number-of-children-badge {
-    font-size: 12px;
-    vertical-align: middle;
+  .al-toggle-view-children {
+    @extend .pr-2;
+    margin-left: -2rem;
   }
 
   .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;
+    display: flex;
+    justify-content: flex-start;
   }
 
-  .al-online-content-icon svg {
-    fill: $green;
-  }
-  @media (max-width: 767px) {
-    padding-left: 0;
-    .al-document-abstract-or-scope {
-      max-width: 25em;
-    }
-  }
-}
+  .al-collection-context {
+    @extend .my-2;
 
-@media (max-width: 767px) {
-  .blacklight-catalog.blacklight-catalog-show {
-    #context {
-      padding: 10px;
+    &.collapsed {
+      visibility: hidden;
+      height: 0;
+      opacity: 0;
+      margin: 0 !important;
     }
   }
-  ul.al-context-nav-parent {
-    padding-left: 40px;
-  }
 }
diff --git a/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss b/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
@@ -1,94 +1,3 @@
-.documents-online_contents {
-  .document-title-heading {
-    font-size: $h5-font-size;
-  }
-
-  .document-title-containers {
-    &:after {
-      padding-right: 3px;
-    }
-  }
-
-  .al-hierarchy-children-status {
-    font-size: $h6-font-size;
-    margin-top: 6px;
-    text-align: left;
-  }
-
-  .bookmark-toggle,
-  .al-request-form {
-    font-size: $font-size-sm;
-  }
-
-  // Headings and text
-  .al-document-abstract-or-scope {
-    font-size: 0.85rem;
-    line-height: 1.5;
-    max-width: 45em;
-  }
-
-  .al-hierarchy-sub-heading {
-    color: $gray-600;
-    font-size: $font-size-sm;
-    font-weight: normal;
-    text-transform: uppercase;
-  }
-
-  // Series level
-  .blacklight-series .document-title-heading,
-  .blacklight-subseries .document-title-heading,
-  .blacklight-file .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);
-  }
-
-  .blacklight-series,
-  .blacklight-file {
-    // Additional for levels below series
-    .blacklight-subseries .document-title-heading,
-    .blacklight-file .document-title-heading,
-    .blacklight-binder .document-title-heading,
-    .blacklight-other .document-title-heading {
-      font-size: $h6-font-size;
-
-      .documentHeader {
-        margin-top: $spacer;
-      }
-    }
-
-    // Icongraphy for each level
-    .blacklight-subseries .document-title-heading,
-    .al-hierarchy-level-1 .blacklight-file .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 {
-        color: $gray-600;
-        content: "\027E9";
-        padding-right: 3px;
-      }
-    }
-
-    .al-hierarchy-level-2 .document-title-heading,
-    .al-hierarchy-level-2 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9";
-      }
-    }
-
-    .al-hierarchy-level-3 .document-title-heading,
-    .al-hierarchy-level-3 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9 \027E9";
-      }
-    }
-  }
-}
-
 .al-hierarchy-highlight > .documentHeader {
   background: $mark-bg;
 }
@@ -118,60 +27,16 @@
   margin-bottom: $spacer;
 }
 
-// Component show page, Collection context section
-#collection-context {
-  h1 {
-    font-size: $h5-font-size;
-  }
-
-  ul {
-    list-style: none;
-    flex-grow: 1;
-  }
-
-  .documents-online_contents {
-    .documentHeader {
-      margin-top: 1.5rem;
-    }
-  }
-
-  // Top-level context
-  .al-hierarchy-level-0 .document-title-heading {
-    font-size: $h5-font-size;
-    margin-bottom: ($spacer / 2);
-  }
-
-  // All subsequent levels
-  @for $i from 1 through 12 {
-    .al-hierarchy-level-#{$i} .document-title-heading {
-      font-size: $h6-font-size;
-    }
-  }
-
-  .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;
-    }
+.alert {
+  .blacklight-icons svg {
+    height: 1.5rem;
+    width: 1.5rem;
   }
 }
 
-// Indentation styling for all level hierarchies
-@mixin hierarchy-levels {
-  @for $i from 1 through 12 {
-    .al-hierarchy-level-#{$i} {
-      margin-left: 20px;
-      // provides for n indention
-      &.extra-indent {
-        margin-left: ($i * 20) + px;
-      }
-    }
+.online-contents {
+  h2 {
+    font-size: 1rem;
+    text-transform: uppercase;
   }
 }
-
-@include hierarchy-levels;
diff --git a/app/assets/stylesheets/arclight/modules/layout.scss b/app/assets/stylesheets/arclight/modules/layout.scss
@@ -18,6 +18,25 @@
   }
 }
 
+.collection-sidebar {
+  padding-right: 1rem;
+  border-right: 1px solid #eee;
+
+  h2, h3, h4 {
+    @extend .h5;
+  }
+}
+
+.sidebar-section {
+  border-bottom: #eee 1px solid;
+  margin-bottom: $spacer;
+  padding-bottom: $spacer * 1.33;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 .breadcrumb-home-link {
   margin-bottom: ($spacer / 4);
 }
@@ -26,8 +45,6 @@
   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) {
@@ -134,6 +151,14 @@
   display: inline;
 }
 
+.show-document {
+  .bookmark-toggle {
+    @extend .card;
+    @extend .bg-light;
+    @extend .py-2;
+  }
+}
+
 .al-hierarchy-side-content {
   .al-request-form {
     display: inline;
@@ -150,9 +175,6 @@
       margin-right: ($spacer / 2);
     }
 
-  &:before {
-    content: "\0229F";
-  }
 }