arclight 0.4.0 → 1.0.0.beta1

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

@@ -4,29 +4,102 @@
   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 * .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 + .breadcrumb-item {
-    padding-top: 2px;
+    .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);
 
   @media (max-width: 767px) {
@@ -42,95 +115,51 @@
     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;
-      }
-    }
-
-    @media (min-width: 768px) {
-      padding-left: ($i - 1) * 10px;
-	  }
+.bookmark-toggle {
+  display: inline;
+  margin-left: 1em;
+  
+  .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 {
+  @extend .ps-lg-4;
 
-// Collapse +/- indicators
-.al-toggle-view-children {
-  &::after {
-    content: image-url('blacklight/plus.svg');
+  .title-container .bookmark-toggle {
+    @extend .card;
+    @extend .bg-light;
+    @extend .p-2;
   }
-  &:not(.collapsed)::after {
-    content: image-url('blacklight/minus.svg');
-  }
-}
-
-.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 {
@@ -140,21 +169,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;
 }
@@ -188,3 +202,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;
+}

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

@@ -1,62 +1,22 @@
-.al-homepage-masthead.jumbotron {
-  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);
-  }
-
+.navbar-search {
   .search-query-form {
-    margin-bottom: $spacer;
-    max-width: 100%;
-  }
-
-  .navbar {
-    padding-bottom: 0;
+    max-width: 100% !important;   // work around blacklight styles
+    display: flex;
+    gap: .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;
+    .input-group {
+      width: unset;
+      flex: auto;
     }
-    .nav-links {
-      justify-content: center !important;
-    }
-  }
-}
-
-
-.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;
+    }
   }
 }
 
@@ -65,7 +25,7 @@
     display: block;
     font-size: $h2-font-size;
     margin: 0;
-    padding: ($spacer * 1.5) ($spacer / 2);
+    padding: ($spacer * 1.5) ($spacer * 0.5);
   }
 
   .navbar-nav {
@@ -80,7 +40,7 @@
   + .navbar-search {
     border-bottom: $default-border-styling;
     border-top: $default-border-styling;
-    margin-bottom: ($spacer / 2);
+    margin-bottom: ($spacer * 0.5);
 
     a {
       font-weight: $font-weight-bold;
@@ -104,9 +64,7 @@
     .nav-links {
       justify-content: center !important;
     }
-  }
 
-  @media (max-width: 992px) {
     h1,
     + .navbar-search {
       text-align: center;

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_results.scss

@@ -1,5 +1,4 @@
-.documents-list,
-.documents-online_contents {
+.documents-list {
   margin-bottom: $spacer;
 
   // Result item header
@@ -28,10 +27,6 @@
       }
     }
 
-    form.bookmark-toggle.col-auto {
-      padding-right: 0;
-    }
-
     .breadcrumb-links,
     .al-document-creator,
     .al-document-extent,
@@ -50,19 +45,17 @@ article.document {
   .blacklight-icons svg {
     fill: $secondary;
   }
-  .blacklight-icons.al-online-content-icon svg {
-    fill: $green;
+  .al-online-content-icon .blacklight-icons svg {
+    fill: $online-icon-color;
   }
   div.breadcrumb-links,
-  div.al-document-abstract-or-scope,
-  div.al-document-creator {
+  dd.al-document-abstract-or-scope,
+  dd.al-document-creator {
     margin-top: ($spacer * .5);
   }
-}
 
-.documents-compact {
-  h3 {
-    font-size: $h5-font-size;
+  form.bookmark-toggle.col-auto {
+    padding-right: 0;
   }
 }
 
@@ -97,6 +90,7 @@ article.document {
 
     .al-grouped-more {
       border-bottom: $default-border-styling;
+      margin-bottom: $spacer;
       padding: ($spacer * .5) 0;
     }
 
@@ -119,15 +113,6 @@ article.document {
   }
 }
 
-.documents-compact {
-  .document {
-    .breadcrumb-links,
-    .al-repository-footer {
-      font-size: $font-size-sm;
-    }
-  }
-}
-
 .al-data-range-histogram {
   margin-bottom: $spacer;
 }
@@ -141,22 +126,34 @@ article.document {
 .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;
+  @extend .justify-content-end;
 }
 
 .al-document-container.text-muted {
   color: $gray-600 !important;
+  font-size: 16px;
+  float: right;
 }
 
 .col-no-left-padding {
@@ -167,23 +164,13 @@ 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;
   }
 }
 
@@ -198,3 +185,67 @@ article.document {
 .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);
 }