arclight 0.4.0 → 1.6.2

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

@@ -1,112 +1,90 @@
-.documents-online_contents {
-  .document-title-heading {
-    font-size: $h5-font-size;
-  }
+:root {
+  --al-toggle-icon-color: #{$navbar-light-color};
+  /* Font Awesome Free 6.5.2 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0 License) Copyright 2024 Fonticons, Inc. */
+  --al-hierarchy-view-expand-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/></svg>");
+  --al-hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475 512'><path stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke='rgb(0, 0, 0)' fill='rgb(0, 0, 0)' d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm88 200H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/></svg>");
+}
 
-  .document-title-containers {
-    &:after {
-      padding-right: 3px;
-    }
-  }
+// Collapse +/- indicators
+.al-toggle-view-children {
+  background-color: var(--al-toggle-icon-color);
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-left: -1.25rem;
+  margin-right: 0.25 * $spacer;
+  margin-top: 0.1 * $spacer;
+  mask: var(--al-hierarchy-view-expand-icon);
+  width: 1.1rem;
 
-  .al-hierarchy-children-status {
-    font-size: $h6-font-size;
-    margin-top: 6px;
-    text-align: left;
+  &:not(.collapsed) {
+    mask: var(--al-hierarchy-view-collapse-icon);
   }
+}
 
-  .bookmark-toggle,
-  .al-request-form {
-    font-size: $font-size-sm;
-  }
+.al-hierarchy-highlight > .documentHeader {
+  background: $mark-bg;
+}
 
-  // Headings and text
-  .al-document-abstract-or-scope {
-    font-size: 0.85rem;
-    line-height: 1.5;
-    max-width: 45em;
+#collection-context {
+  ul {
+    list-style: none;
+
+    padding-left: 1.5rem;
+
+    ul {
+      padding-left: 1rem;
+    }
   }
 
-  .al-hierarchy-sub-heading {
-    color: $gray-600;
-    font-size: $font-size-sm;
-    font-weight: normal;
-    text-transform: uppercase;
+  .documentHeader {
+    display: flex;
+    margin-bottom: 0.5 * $spacer;
   }
 
-  // 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);
+  .al-document-container {
+    display: none;
   }
 
-  .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;
-      }
+  turbo-frame[busy] {
+    &::before {
+      animation: placeholder-glow 2s ease-in-out infinite;
+      background-color: currentcolor;
+      content: "Loading...";
+      cursor: wait;
+      display: inline-block;
+      min-height: 1em;
+      opacity: 0.5;
+      vertical-align: middle;
+      display: inline-block;
+      margin-left: 1.5rem;
     }
+  }
+}
 
-    // 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;
-      }
-    }
+#contents {
+  .documents {
+    list-style: none;
+    padding-left: 0;
 
-    .al-hierarchy-level-2 .document-title-heading,
-    .al-hierarchy-level-2 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9";
-      }
+    li {
+      padding: 0.25 * $spacer 0.5 * $spacer;
     }
 
-    .al-hierarchy-level-3 .document-title-heading,
-    .al-hierarchy-level-3 .blacklight-file .document-title-heading {
-      &:before {
-        content: "\027E9 \027E9 \027E9";
-      }
+    li:nth-of-type(odd) {
+      background-color: $table-striped-bg;
     }
   }
-}
-
-.al-hierarchy-highlight > .documentHeader {
-  background: $mark-bg;
-}
 
-// Placeholder styling
-.al-hierarchy-placeholder {
-  margin-top: $spacer;
-
-  h3 {
-    background-color: $gray-200;
-    border-radius: 5px;
-    height: $h3-font-size;
+  .documentHeader {
+    display: flex;
+    gap: 2rem;
+    justify-content: space-between;
+    margin-bottom: 0.5 * $spacer;
   }
 
-  p {
-    background-color: $gray-200;
-    border-radius: 5px;
-    height: $font-size-base;
+  .al-document-container {
+    flex-basis: 25%;
+    text-align: right;
   }
 }
 
@@ -118,60 +96,60 @@
   margin-bottom: $spacer;
 }
 
-// Component show page, Collection context section
-#collection-context {
-  h1 {
-    font-size: $h5-font-size;
+.alert {
+  .blacklight-icons svg {
+    height: 1.5rem;
+    width: 1.5rem;
   }
+}
 
-  ul {
-    list-style: none;
-    flex-grow: 1;
+.title-container {
+  border-bottom: $border-width solid $border-color;
+  padding-bottom: $spacer * 0.5;
+  margin-bottom: $spacer * 0.75;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-areas:
+    "title bookmark-toggle"
+    "request request"
+    "sidebar-toggle sidebar-toggle"
+    "online-contents online-contents";
+  justify-content: space-between; // This will push the bookmark control to the right when the title is short
+  align-items: start;
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "title request bookmark-toggle"
+      "sidebar-toggle sidebar-toggle sidebar-toggle"
+      "online-contents online-contents online-contents";
   }
 
-  .documents-online_contents {
-    .documentHeader {
-      margin-top: 1.5rem;
-    }
+  h1 {
+    grid-area: title;
+    margin-bottom: 0;
   }
 
-  // Top-level context
-  .al-hierarchy-level-0 .document-title-heading {
-    font-size: $h5-font-size;
-    margin-bottom: ($spacer / 2);
+  .al-request {
+    grid-area: request;
   }
 
-  // All subsequent levels
-  @for $i from 1 through 12 {
-    .al-hierarchy-level-#{$i} .document-title-heading {
-      font-size: $h6-font-size;
-    }
+  .bookmark-toggle {
+    grid-area: bookmark-toggle;
+    margin-left: 0 !important;
   }
 
-  .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;
-    }
+  .sidebar-toggle {
+    grid-area: sidebar-toggle;
+    max-width: fit-content;
   }
-}
 
-// 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 {
+    grid-area: online-contents;
+    margin-bottom: 1rem;
+
+    h2 {
+      font-size: 1rem;
+      text-transform: uppercase;
     }
   }
 }
-
-@include hierarchy-levels;

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

@@ -1,4 +1,20 @@
-.blacklight-icons svg {
-  height: 1rem;
-  width: 1rem;
+:root {
+  --al-online-icon-color: #{$online-icon-color};
+}
+.toggle-bookmark,
+.breadcrumb-item,
+.document,
+.al-online-content-icon {
+  .blacklight-icons svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.al-online-content-icon .blacklight-icons svg {
+  fill: var(--al-online-icon-color);
+}
+
+.btn > .bi:first-child {
+  margin-inline-end: 0.25rem !important;
 }

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

@@ -4,37 +4,112 @@
   margin-bottom: $spacer;
 }
 
-.al-show-breadcrumb .breadcrumb {
-  background-color: transparent;
-  margin-bottom: 0;
-  padding: 0;
+.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 + .breadcrumb-item {
-    padding-top: 2px;
+    .breadcrumb-item-1 > .breadcrumb {
+      padding-left: 1rem;
+    }
+
+    .breadcrumb-item-2 > .breadcrumb {
+      display: block;
+    }
+
+    .breadcrumb-item-3 {
+      display: inline-block;
+    }
 
-    &::before {
-      content: '';
+    .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 / 4);
+  margin-bottom: ($spacer * 0.25);
 }
+
 .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);
+  padding: ($spacer * 0.5) $spacer ($spacer * 0.75);
 
   @media (max-width: 767px) {
     margin-top: $spacer;
   }
 
   .al-collection-id {
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
 
   &-options {
@@ -42,97 +117,57 @@
     align-items: center;
   }
 
-  &-downloads {
-    padding-top: $spacer * .25;
-    white-space: nowrap;
-
-    &-container {
-      margin-top: $spacer * .5;
+  &-info {
+    .dropdown {
+      // prevent dropdown from being cut off by parent container
+      position: static;
+    }
+    .dropdown-toggle:after {
+      margin-left: 0;
     }
 
-    &-file {
-      &.blacklight-icons {
-        margin-right: $spacer * .5;
-
-        svg {
-          fill: $secondary;
-        }
+    table {
+      td {
+        text-align: right;
       }
     }
   }
-}
-
-.al-show-breadcrumb h1 {
-  font-size: 1.5rem;
 
-  &.media .col {
-    padding-top: $spacer * .25;
+  svg.bi {
+    vertical-align: text-bottom;
+    color: $light-icon-color;
   }
-}
-
-.breadcrumb-item {
-  flex: 1 0 100%;
 
-  &.al-bc-item {
-    &::before {
-      content: '»' !important;
-    }
+  .dropdown-item svg.bi {
+    color: $dark-icon-color;
   }
 }
 
-// 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;
-      }
-    }
+.bookmark-toggle {
+  display: inline;
+  margin-left: 1em;
 
-    @media (min-width: 768px) {
-      padding-left: ($i - 1) * 10px;
-	  }
+  .toggle-bookmark {
+    display: inline;
+    margin-bottom: 0;
+    white-space: nowrap;
   }
 }
 
-// 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;
-    }
+.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;
   }
 }
 
-// Collapse +/- indicators
-.al-toggle-view-children {
-  &::after {
-    content: image-url('blacklight/plus.svg');
-  }
-  &:not(.collapsed)::after {
-    content: image-url('blacklight/minus.svg');
+@media (min-width: 992px) {
+  .show-document {
+    padding-left: 1.5rem !important;
   }
 }
 
-.al-toggle-children-container {
-  margin-left: -1.5rem;
-}
-
-.bookmark-toggle .toggle-bookmark {
-  display: inline;
-  margin-bottom: 0;
-  white-space: nowrap;
-}
-
-.bookmark-toggle {
-  display: inline;
-}
-
 .al-hierarchy-side-content {
   .al-request-form {
     display: inline;
@@ -140,21 +175,6 @@
   }
 }
 
-.al-request-button {
-  &.btn-link {
-    font-weight: 600;
-    line-height: 1;
-  }
-    @media (min-width: 1200px) {
-      margin-right: ($spacer / 2);
-    }
-
-  &:before {
-    content: "\0229F";
-  }
-}
-
-
 dl dd {
   overflow-wrap: break-word;
 }
@@ -163,7 +183,10 @@ dl.deflist dt {
   text-align: left;
 }
 
-.chronlist-head, .list-head {
+.chronlist-head,
+.list-head,
+.index-head,
+.table-head {
   caption-side: top;
   font-size: 1.25rem;
   font-weight: 500;
@@ -188,3 +211,10 @@ dl.deflist dt {
 .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;
+}