diff --git a/app/assets/images/nla-stacked-logo-black.svg b/app/assets/images/nla-stacked-logo-black.svg new file mode 100644 index 00000000..6ddb31e9 --- /dev/null +++ b/app/assets/images/nla-stacked-logo-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/images/nla_logo.svg b/app/assets/images/nla_logo.svg index d9c2a7ae..ca87165e 100644 --- a/app/assets/images/nla_logo.svg +++ b/app/assets/images/nla_logo.svg @@ -1,45 +1,4 @@ - - nla_logo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_alert.scss b/app/assets/stylesheets/nla/_alert.scss new file mode 100644 index 00000000..1673bbf0 --- /dev/null +++ b/app/assets/stylesheets/nla/_alert.scss @@ -0,0 +1,68 @@ +@charset "UTF-8"; +@import "variables"; +@import "nla-custom-bootstrap"; + +.alert { + border-width: 0; + border-left-style: solid; + border-left-width: 0.25rem; + color: $grey-700; + padding-left: 3rem; + position: relative; + + &:before { + position: absolute; + top: 1rem; + left: 1rem; + width: 1rem; + height: 1rem; + font: var(--fa-font-regular); + } + +} + + +.alert-success { + background: $success-light; + border-left-color: $success-dark; + + &:before { + content: "\f058"; + color: $success-dark; + } +} + +.alert-info { + background: $info-light; + border-left-color: $info-dark; + + &:before { + content: "\f05a"; + color: $info-dark; + } +} + +.alert-warning { + background: $warning-light; + border-left-color: $warning-dark; + + &:before { + content: "\f06a"; + color: $warning-dark; + } +} + +.alert-error { + background: $error-light; + border-left-color: $error-dark; + + &:before { + content: "\f057"; + color: $error-dark; + } +} + + +.alert p { + margin-bottom: 0; +} \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_buttons.scss b/app/assets/stylesheets/nla/_buttons.scss index 32ae46ea..b9c32bd4 100644 --- a/app/assets/stylesheets/nla/_buttons.scss +++ b/app/assets/stylesheets/nla/_buttons.scss @@ -3,16 +3,14 @@ @import "nla-custom-bootstrap"; .btn { - text-transform: uppercase; - letter-spacing: 0.5px; - + border-radius: 5rem; + &.arrow-before { position: relative; padding-left: 3rem; padding-right: 2rem; &::after { - color: var(--#{$prefix}orange); content: "\F177"; font: var(--fa-font-regular); position: absolute; @@ -25,7 +23,6 @@ &:hover::after, &:focus::after { left: 1.25rem; - color: $white; } } @@ -35,7 +32,6 @@ padding-right: 3rem; &::after { - color: $orange; content: "\F178"; font: var(--fa-font-regular); position: absolute; @@ -48,7 +44,6 @@ &:hover::after, &:focus::after { right: 1.25rem; - color: $white; } } @@ -58,7 +53,6 @@ padding-right: 3rem; &::after { - color: $orange; content: "\f1f8"; font: var(--fa-font-regular); position: absolute; @@ -71,29 +65,66 @@ &:hover::after, &:focus::after { font: var(--fa-font-solid); - color: $white; } } } -.btn-primary:focus, -.btn-primary:hover, -.btn-primary:active { - background: $light-purple; - border-color: $light-purple; - background: $black; -} .btn-outline-primary, .btn-outline-secondary { background: $white; + + &:focus, + &:hover, + &:active { + background-color: $lightest-teal; + color: $black; + text-decoration: none; + } } - -.dropdown-item { +.btn-primary { + background: $black; + color: $white; + border: 1px solid $black; + + &:focus, &:hover, + &:active { + background: $light-teal; + color: $black; + border-color: $light-teal; + box-shadow: none; + } +} + + +.btn-secondary { + background-color: $white; + border: 1px solid $black; + color: $black; + &:focus, - &.active { + &:hover, + &:active { + background-color: $light-teal; color: $black; - background-color: #e9ecef; + border-color: $light-teal; + text-decoration: none; + box-shadow: none; } } + +.btn-tertiary { + background-color: $white; + border-color: $black; + color: $black; + + &:focus, + &:hover, + &:active { + background-color: $black; + color: $white; + text-decoration: none; + } +} + diff --git a/app/assets/stylesheets/nla/_dark-mode.scss b/app/assets/stylesheets/nla/_dark-mode.scss new file mode 100644 index 00000000..24346082 --- /dev/null +++ b/app/assets/stylesheets/nla/_dark-mode.scss @@ -0,0 +1,470 @@ +@charset "UTF-8"; +@import "variables"; +@import "nla-custom-bootstrap"; + + +@media screen and (prefers-color-scheme: dark) { + + body { + background-color: $body-bg-dark; + color: $body-color-dark; + } + + a:not(.btn, .page-link) { + color: $link-color-dark; + + &:focus, + &:hover, + &:active { + color: $link-hover-color-dark; + background-color: $link-hover-bg-color-dark; + box-shadow: 0 0 0 4px $link-hover-bg-color-dark; + } + } + + h1 { + color: $body-color-dark; + } + + .al-show-breadcrumb, + .title-container, + .sidebar-section { + border-bottom-color: $grey-300; + } + + .collection-sidebar { + border-right-color: $grey-300; + } + + .breadcrumb { + color: $body-color-dark; + + .breadcrumb-item { + &::before, + &.active { + color: $body-color-dark; + } + } + } + + // Form inputs + .navbar-search { + .input-group { + .input-group-text { + color: $body-color-dark; + } + .form-select, + .form-control, + .navbar-search .input-group > .search-autocomplete-wrapper .search-q { + background-color: $black !important; + border-color: $white !important; + color: $body-color-dark; + + &::placeholder { + color: $grey-100; + } + + &:focus { + color: $body-color-dark; + background-color: $grey-200 !important; + border-color: $grey-200 !important; + box-shadow: 0 0 0 1px $grey-200; + + &::placeholder { + color: $grey-700; + } + } + + #autocomplete-popup { + background: $white; + color: $black; + box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.08); + } + } + } + } + + // Buttons + .btn-primary { + color: $black; + background-color: $white; + border-color: $white; + } + + .btn-secondary, + .btn-tertiary { + color: $white; + background-color: $black; + border-color: $white; + } + + .btn-tertiary { + &:focus, + &:hover, + &:active { + color: $black; + background-color: $white; + } + } + + .btn-link { + color: $body-color-dark; + + &:focus, + &:hover, + &:active { + color: $body-color-dark; + } + } + + + // Header + .header { + border-bottom-color: $grey-300; + + .top-bar { + background-color: $light-teal; + + .navbar-nav { + .nav-link { + color: $black; + + &:focus, + &:hover, + &:active { + color: $white; + background-color: $link-hover-bg-color; + box-shadow: 0 0 0 4px $link-hover-bg-color; + + } + } + } + } + + .bottom-bar { + background: $body-bg-dark !important; + + .navbar-brand.navbar-logo { + filter: invert(100%); + } + .navbar-collapse { + .navbar-nav { + .nav-link { + color: $body-color-dark; + + &:focus, + &:hover, + &:active, + &.active { + color: $body-color-dark; + } + } + } + } + } + } + + + + + // Search results + .sort-pagination { + border-top-color: $grey-300; + + .result-type-group, .view-type-group { + .btn { + color: $body-color-dark; + + &:not(.active) { + & path:not([fill="none"]) { + fill: $body-color-dark; + } + } + } + + &:has(.btn:not(.active):focus), + &:has(.btn:not(.active):hover) { + background: $grey-600; + } + } + + .sort-dropdown, + .per_page-dropdown { + .btn { + color: $body-color-dark; + + .d-sm-inline { + color: $body-color-dark; + } + } + } + + } + + .al-grouped-results, + .documents-list { + .document-title-heading, + .al-grouped-title-bar { + a { + &:focus, + &:hover { + color: $body-color-dark; + } + } + } + + + } + + .al-grouped-results { + .al-grouped-title-bar { + background: $grey-600; + } + } + + .al-document-listings, + .documents-list { + article { + &.document { + border-bottom: 1px dotted $grey-600; + + &:focus, + &:hover, + &:has(.document-title-heading a:focus) { + background: $grey-600; + } + + .document-title-heading { + a { + color: $body-color-dark; + + &:focus, + &:hover, + &:active { + color: $body-color-dark; + box-shadow: none; + } + } + } + + .dl-invert { + dt { + color: $grey-50; + } + } + } + } + } + + + // Facets + .page-sidebar .facets.sidenav, + .page-sidebar .advanced-facet-limits { + .facets-header { + border-bottom: 1px solid $white; + + .facets-heading { + color: $body-color-dark; + } + } + + .facets-collapse { + .facet-limit { + border-bottom-color: $body-bg-dark; + color: $body-color-dark; + + &.card { + background-color: $grey-300; + } + + .facet-field-heading { + background-color: $grey-300 !important; + + &:has([aria-expanded="true"]) { + .btn { + color: $black; + } + } + + .btn { + color: $body-color-dark; + } + } + + .facet-content { + .facet-values { + .facet-select, + .selected { + color: $body-color-dark !important; + } + + .facet-count { + color: $white; + + &.selected { + color: $white !important; + } + } + + .remove { + color: $grey-500; + } + } + } + } + } + } + + + // Pagination + .page-link { + color: $pagination-color-dark; + } + + + // Record page + .title-container { + h1, + h2 { + color: $body-color-dark; + } + } + + .al-show-sub-heading, + .collection-sidebar h2 { + color: $body-color-dark; + } + + .online-contents { + color: $body-color-dark; + background-color: $grey-600; + } + + .al-digital-object { + a { + color: $black !important; + background: $white; + border: 1px solid $white; + + &:hover, + &:focus { + border-color: $light-teal; + } + } + } + + + .al-show-actions-box { + background-color: $grey-600; + + h2, + h3 { + color: $body-color-dark; + } + + .al-show-actions-box-info { + .btn { + svg { + fill: $white; + } + + &:focus, + &:hover, + &:active, + .show { + svg { + fill: $black; + } + } + } + } + } + + .al-collection-context { + + &:hover, + &:has(a:focus) { + background-color: $grey-600; + } + + + &.al-hierarchy-highlight { + background-color: $grey-600; + } + + a { + &:focus, + &:hover { + color: $body-color-dark !important; + } + } + } + + .dl-invert { + dt { + color: $grey-50; + } + } + + #access-and-use { + img { + filter: invert(1); + } + } + + + + + // Alerts + .alert-info { + background: $info-dark; + border-color: $info-light; + color: $body-color-dark; + + &:before { + color: $body-color-dark; + } + + a { + color: $link-color-dark; + + &:focus, + &:hover, + &:active { + color: $body-color; + text-decoration: none; + background-color: $link-hover-bg-color-dark; + outline: none; + box-shadow: 0 0 0 4px $link-hover-bg-color-dark; + } + } + } + + + // Footer + .footer { + .footer-ask-a-librarian { + background-color: $grey-700; + } + + .connect .list-inline-item a { + &:focus, + &:hover, + &:active { + color: $body-color-dark; + } + } + + h2 { + &.h4 { + color: $body-color-dark; + } + } + + .footer-bottom { + background-color: $light-teal; + } + } + + +} \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_facets.scss b/app/assets/stylesheets/nla/_facets.scss index 370941fc..e2d93c2e 100644 --- a/app/assets/stylesheets/nla/_facets.scss +++ b/app/assets/stylesheets/nla/_facets.scss @@ -3,77 +3,147 @@ @import "nla-custom-bootstrap"; // Facets -.facets { - .card { - border: none; - } +.page-sidebar .facets.sidenav, +.page-sidebar .advanced-facet-limits { - .facets-heading { - font-family: $font-family-sans-serif; - font-size: 1.375rem; - color: $purple; - font-weight: bold; - text-shadow: 0 1px 0 $white; - text-transform: uppercase; - margin-left: 0; - } + //background: $light-grey; + background: transparent; - .card-header { - background: $white; - } + .facets-header { + border-bottom: 1px solid $grey-700; - h3 { - font-family: $font-family-sans-serif; - } - - .facet-field-heading { - .btn:after { - float: none; - display: inline-block; - } - .btn:not(.collapsed):after { - transform: rotate(90deg); - transition: transform 0.15s ease-in-out; + .facets-heading { + font-family: $font-family-sans-serif; + font-size: 1.25rem; + color: $black; + font-weight: 600; + margin-bottom: 0; + //margin-left: 0; } } - .facet-label { - padding-left: 0; - text-indent: 0; - } - - .facet-select { - text-decoration: none; - - &:hover, - &:focus { - color: $blue; - text-decoration: underline; + // Facet body + .facets-collapse { + .card { + border-radius: 0 !important; + margin-bottom: 1rem; } - } - - .facet-limit-active { - border-color: rgba(0,0,0,0.125) !important; - .card-header { - background: $white !important; - + h3 { + font-family: $font-family-sans-serif; + .btn { - color: $black; + text-underline-offset: 2px; + text-underline-position: under; + text-decoration: none; + + &:focus, + &:hover, + &:active { + text-decoration: underline; + } } } - .selected { - color: $gray-medium !important; + .facet-limit:not(:first-child) { + margin-top: 1rem; } - .remove { - .remove-icon { - font-weight: normal; - color: rgba(70,71,74,0.3); + .facet-limit { + border-bottom: 1px solid $white; + + &.card { + background-color: $light-grey; + } + + &.facet-limit-active { + border: none; + } + + + .facet-field-heading { + background: $light-grey !important; + border-bottom: none; + + &:has([aria-expanded="true"]) { + background-color: $light-teal !important; + } + + .btn { + border: none; + color: $black; + padding: 0.75rem 1rem !important; + + &:after { + margin-left: 0.5rem; + } + } + + .btn:after { + float: none; + display: inline-block; + } + + .btn:not(.collapsed):after { + transform: rotate(90deg); + transition: transform 0.15s ease-in-out; + } + } + + // Items within the facet + .facet-content { + .card-body { + padding: 0; + } - &:hover { - color: $orange; + .facet-values { + li { + padding: 0.5rem 1rem; + + &:has(.selected) { + border-left: 2px solid $dark-teal; + } + } + + .facet-select { + text-decoration: none; + color: $body-color; + + &:focus, + &:hover, + &:active { + color: $body-color; + background-color: transparent; + box-shadow: none; + text-decoration: underline; + } + } + + .facet-count { + color: $grey-300; + font-size: 0.875rem; + + &.selected { + color: $grey-300 !important; + } + } + + .selected { + color: $body-color !important; + } + + .remove { + font-weight: normal; + color: $grey-300; + + &:focus, + &:hover, + &:active { + color: $muted-orange; + background-color: transparent !important; + box-shadow: none; + } + } } } } diff --git a/app/assets/stylesheets/nla/_footer.scss b/app/assets/stylesheets/nla/_footer.scss index b44115c1..31b07c17 100644 --- a/app/assets/stylesheets/nla/_footer.scss +++ b/app/assets/stylesheets/nla/_footer.scss @@ -3,38 +3,126 @@ @import "nla-custom-bootstrap"; .footer { - margin-top: 0.5rem !important; - color: $white; - - a { - color: $white; - text-decoration: none; + /* + a:not(.btn) { + color: $black; + text-decoration: underline; &:focus, - &:hover { + &:hover, + &:active { color: $white; - text-decoration: underline; + text-decoration: none; } } - .connect .list-inline-item a { + + a.btn { &:focus, - &:hover { - color: $orange; + &:hover, + &:active { + //box-shadow: none; } } + */ - h2 { - &.h4 { + .footer-ask-a-librarian { color: $white; + background-color: $black; + padding-top: 6.125rem; + padding-bottom: 6.125rem; + position: relative; + + .arrow-tip { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + line-height: 0; + + svg { + height: 18px; + } + } + + .h2 { + font-family: $font-family-sans-serif; + font-size: 2rem; + font-weight: 600; + color: $white; + + } } + + + .footer-top { + padding-top: 6.125rem; + padding-bottom: 6.125rem; + } + + .connect .list-inline-item a { + display: inline-block; + transition: 0.2s; - &.h6 { - font-family: $font-family-sans-serif; - color: $white; + + &:focus, + &:hover, + &:active { + color: $body-color; + background: transparent; + transform: translateY(-4px) scale(1.1); + box-shadow: none; } } - hr { - border-top-color: $white; + h2 { + &.h4 { + color: $black; + font-size: 1.25rem; + } + } + + .footer-bottom { + background-color: $lightest-teal; + + .primary-links, + .secondary-links { + display: flex; + column-gap: 2rem; + flex-direction: row; + justify-content: center; + list-style-type: none; + + a { + color: $black; + text-decoration: none; + + &:focus, + &:hover, + &:active { + color: $white; + background-color: $link-hover-bg-color; + box-shadow: 0 0 0 4px $link-hover-bg-color; + } + } + } + + .primary-links { + a { + font-weight: 700; + } + } + + .secondary-links { + font-size: 0.875rem; + } + + .footer-logo a { + &:focus, + &:hover, + &:active { + background-color: transparent; + box-shadow: none; + } + } } } diff --git a/app/assets/stylesheets/nla/_header.scss b/app/assets/stylesheets/nla/_header.scss index 9c123c37..c68c9781 100644 --- a/app/assets/stylesheets/nla/_header.scss +++ b/app/assets/stylesheets/nla/_header.scss @@ -2,62 +2,129 @@ @import "variables"; @import "nla-custom-bootstrap"; -.navbar-brand.navbar-logo { - height: 80px; - background-size: contain; - margin-top: 0; -} - -.navbar-dark { - .navbar-nav { - .nav-link { - font-size: 1.1875rem; - font-weight: 700; - border-bottom-width: 0.375rem; - border-bottom-style: solid; - border-bottom-color: transparent; - padding-left: 0.625rem; - padding-right: 0.625rem; - padding-bottom: 0.75rem; - line-height: 1.2; +.header { + border-bottom: 1px solid #e6e6e6; + + .top-bar { + background-color: $lightest-teal; + font-weight: 400; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + + .navbar-nav { + gap: 1.5rem; - &:hover, - &:focus, - &.active { - border-bottom-color: $orange; - } - } - - .dropdown-menu { - border-color: $purple; - - .dropdown-item { + .nav-link { + padding: 0; + text-decoration: none; + transition: all 0.25s; + &:hover, &:focus, &.active { color: $white; - background-color: $purple; } } } } - - .dropdown-menu { - .dropdown-item { + + .bottom-bar { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + + .navbar-brand.navbar-logo { + height: 45px; + width: 178px; + background-size: contain; + margin-top: 0; + &:hover, &:focus, &.active { - color: $white; - background-color: $purple; + background-color: transparent; + box-shadow: none; + } + } + + @media (min-width: 768px) { + .navbar-brand.navbar-logo { + height: 73px; + width: 294px; + background-size: contain; + } + } + + .navbar-collapse { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + + .navbar-nav { + gap: 1.875rem; + + .nav-link { + padding: 0; + color: $black; + font-size: 1.25rem; + font-weight: 600; + line-height: 1.2; + text-underline-offset: 2px; + text-underline-position: under; + text-decoration: none; + + &:hover, + &:focus, + &:active, + &.active { + color: $black; + background-color: transparent; + text-decoration: underline; + box-shadow: none; + } + } + + .dropdown-menu { + background-color: $white; + box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.08); + + .dropdown-item { + color: $grey-700; + text-decoration: none; + + &:hover, + &:focus, + &.active { + background-color: $light-grey; + color: $grey-700; + box-shadow: none; + } + } + } + + @media (min-width: 768px) { + .navbar-nav { + gap: 1.5rem; + + .nav-link { + font-size: 1rem; + } + } + } + + @media (min-width: 992px) { + .navbar-nav { + gap: 1.875rem; + + .nav-link { + font-size: 1.25rem; + } + } + } + } } - } - &.bottombar { - border-top: 1px solid #4c4c4c; - color: $white; - font-family: $font-family-serif; - font-size: 2rem; - font-weight: 700; } -} + + + +} \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_main.scss b/app/assets/stylesheets/nla/_main.scss index a5296f34..8b771abf 100644 --- a/app/assets/stylesheets/nla/_main.scss +++ b/app/assets/stylesheets/nla/_main.scss @@ -2,4 +2,5 @@ #main-container { margin-top: 0.5rem !important; + margin-bottom: 4rem; } diff --git a/app/assets/stylesheets/nla/_nla-arclight.scss b/app/assets/stylesheets/nla/_nla-arclight.scss index 0be07128..09c8d4d1 100644 --- a/app/assets/stylesheets/nla/_nla-arclight.scss +++ b/app/assets/stylesheets/nla/_nla-arclight.scss @@ -13,9 +13,12 @@ @import "record"; @import "typography"; @import "repository"; +@import "alert"; -@import "./components/show_actions"; +//@import "./components/show_actions"; @import "./components/bookmarks"; // Vendor + plugins @import "./plugins/blacklight_range_limit"; + +@import "dark-mode"; \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_nla-custom-bootstrap.scss b/app/assets/stylesheets/nla/_nla-custom-bootstrap.scss index 0b23a281..d3a9feef 100644 --- a/app/assets/stylesheets/nla/_nla-custom-bootstrap.scss +++ b/app/assets/stylesheets/nla/_nla-custom-bootstrap.scss @@ -4,9 +4,53 @@ $enable-negative-margins: true; $breadcrumb-divider: quote("»"); -$focus-ring-color: rgba($purple, $focus-ring-opacity); +//$focus-ring-color: rgba($purple, $focus-ring-opacity); // Colours to override in Bootstrap +$black: #000; +$warm-grey: #685E57; +$light-grey: #F2F2F2; +$white: #FFF; +$dark-teal: #58a291; +$mid-teal: #6bbbae; +$light-teal: #a1d6ca; +$lightest-teal: #def0ed; +$dark-red: #9a3324; +$muted-orange: #dc764c; +$light-muted-orange: #f5a992; +$lightest-orange: #fcd9c9; +$dark-blue: #2e86ab; +$mid-blue: #96c2d7; +$light-blue: #c9e1ea; +$lightest-blue: #d9eef4; +$muted-yellow: #e4dc95; +$parchment: #fff7d2; + +$success-light: #e5f6e6; +$success-dark: #008a07; +$error-light: #f7e7eb; +$error-mid: #ffb8c1; +$error-dark: #b81237; +$warning-light: #fbeee5; +$warning-dark: #c95000; +$info-light: #eaedf4; +$info-dark: #2e5299; + +$grey-800: #121212; +$grey-700: #1c1c1e; +$grey-600: #2c2c2e; +$grey-500: #3a3a3c; +$grey-400: #48484a; +$grey-350: #585a5a; +$grey-300: #636366; +$grey-200: #707075; +$grey-100: #75757b; +$grey-50: #828282; + +$disabled-text: #666666; +$link-hover-bg-color: rgba(0,0,0,0.65); +$tags-surface: #dcdcdc; + $white: #FFF; $orange: #E03100; $purple: #34075B; @@ -21,15 +65,66 @@ $gray-light: #E1E3E5; $gray-medium-light: #677078; $gray-medium: #46474A; +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; + +$nla-colors: ( + "black": $black, + "warm-grey": $warm-grey, + "light-grey": $light-grey, + "white": $white, + "dark-teal": $dark-teal, + "mid-teal": $mid-teal, + "light-teal": $light-teal, + "lightest-teal": $lightest-teal, + "dark-red": $dark-red, + "muted-orange": $muted-orange, + "light-muted-orange": $light-muted-orange, + "lightest-orange": $lightest-orange, + "dark-blue": $dark-blue, + "mid-blue": $mid-blue, + "light-blue": $light-blue, + "lightest-blue": $lightest-blue, + "muted-yellow": $muted-yellow, + "parchment": $parchment, + + "success-light": $success-light, + "success-dark": $success-dark, + "error-light": $error-light, + "error-mid": $error-mid, + "error-dark": $error-dark, + "warning-light": $warning-light, + "warning-dark": $warning-dark, + "info-light": $info-light, + "info-dark": $info-dark, -$colors: ( + "grey-800": $grey-800, + "grey-700": $grey-700, + "grey-600": $grey-600, + "grey-500": $grey-500, + "grey-400": $grey-400, + "grey-350": $grey-350, + "grey-300": $grey-300, + "grey-200": $grey-200, + "grey-100": $grey-100, + "grey-50": $grey-50, + + "disabled-text": $disabled-text, + "link-hover-bg-color": $link-hover-bg-color, + "tags-surface": $tags-surface, + + "primary": $light-teal, + "secondary": $black, + "tertiary": $white, + "light": $white, + "dark": $lightest-teal, + "cyan": $cyan, "orange": $orange, "light-yellow": $light-yellow, "yellow": $yellow, "light-purple": $light-purple, - "blue": $blue, - "light-blue": $light-blue, "purple": $purple, "gray-very-light": $gray-very-light, "gray-light": $gray-light, @@ -37,6 +132,10 @@ $colors: ( "gray-medium": $gray-medium, ); + +$theme-colors: map-merge($nla-colors, $theme-colors); + +/* $theme-colors: ( "primary": $orange, "secondary": $purple, @@ -47,12 +146,15 @@ $theme-colors: ( "light": $light, "dark": $purple ); +*/ $logo-image: url('nla_logo.svg'); // Body -$body-bg: $gray-very-light; -$body-color: $gray-medium; +$body-bg: $white; +$body-bg-dark: $black; +$body-color: $grey-700; +$body-color-dark: $light-grey; // Components @@ -60,33 +162,49 @@ $border-radius: 0; $border-radius-lg: 0; $border-radius-sm: 0; - // Typography -$font-family-sans-serif: "Roboto Condensed", sans-serif; +// Typography +$font-family-serif: "STIX Two Text", serif; +$font-family-sans-serif: "Open Sans", sans-serif; +$btn-font-family: $font-family-sans-serif; $text-muted: $gray-medium-light; $font-weight-semi-bold: 500; // Headings -$headings-font-family: "Frank Rhule Libre", serif; -$headings-font-weight: 900; +$headings-font-family: $font-family-sans-serif; +$headings-font-weight: 600; $headings-line-height: 1.2; -$headings-color: $purple; +$headings-color: $grey-700; // Links -$link-color: $blue; +$link-color: $black; +$link-color-dark: $white; $link-decoration: underline; -$link-hover-color: $light-blue; +$link-hover-color: $white; +$link-hover-color-dark: $black; $link-hover-decoration: none; +$link-hover-bg-color: rgba(0,0,0,0.65); +$link-hover-bg-color-dark: rgba(255,255,255,0.8); + +// Focus +$focus-ring-color: $light-teal; // Buttons $btn-padding-x: 2rem; +$btn-padding-y: 0.75rem; $btn-padding-x-sm: 1.5rem; $btn-padding-x-lg: 2rem; -$btn-font-weight: 700; +$btn-font-weight: 400; +$btn-border-width: 1px; +$btn-border-radius: 20rem; +$btn-link-color: $black; +$btn-link-hover-color: $black; // Form inputs $input-border-color: $gray-light; -$input-placeholder-color: $gray-medium-light; +$input-border-radius: 4px; +$input-placeholder-color: $disabled-text; +$component-active-bg: $purple; $input-bg: $white; $input-focus-bg: $white; @@ -95,26 +213,46 @@ $input-group-addon-bg: #e9ecef; $component-active-bg: $purple; // Navbar -$navbar-dark-color: $white; -$navbar-dark-hover-color: $orange; -$navbar-dark-active-color: $orange; -$navbar-dark-toggler-border-color: $white; +$navbar-light-color: $black; +$navbar-light-hover-color: $black; +$navbar-light-active-color: $black; +$navbar-dark-color: $black; +$navbar-dark-hover-color: $black; +$navbar-dark-active-color: $black; +$navbar-dark-toggler-border-color: $black; +$navbar-padding-y: 0; +$nav-link-padding-x: 0; // Pagination -$pagination-color: $purple; +$pagination-color: $grey-700; +$pagination-color-dark: $white; $pagination-bg: transparent; $pagination-border-width: 1px; $pagination-border-color: transparent; +$pagination-border-radius: 2px; + +$pagination-focus-color: $white; +$pagination-focus-bg: $warm-grey; +$pagination-focus-border-color: $warm-grey; $pagination-hover-color: $white; -$pagination-hover-bg: $purple; -$pagination-hover-border-color: $purple; +$pagination-hover-bg: $warm-grey; +$pagination-hover-border-color: $warm-grey; + +$pagination-active-color: $white; +$pagination-active-bg: $warm-grey; +$pagination-active-border-color: $warm-grey; $pagination-disabled-bg: transparent; $pagination-disabled-border-color: transparent; + // Card $card-bg: $white; +$card-bg-dark: $black; +$card-border-color: transparent; +$card-border-radius: 4px; +$card-cap-bg: rgba($white, .03); // Dropdowns $dropdown-bg: $white; @@ -142,4 +280,13 @@ $table-variants: ( "light": $light, "dark": $dark, "purple": $purple -) +); + +// Modal +$modal-backdrop-bg: $black; +$modal-backdrop-opacity: 0.7; +$btn-close-color: $muted-orange; + + +// Badge +$badge-border-radius: 8px; diff --git a/app/assets/stylesheets/nla/_pagination.scss b/app/assets/stylesheets/nla/_pagination.scss index 199a38a5..26f188ac 100644 --- a/app/assets/stylesheets/nla/_pagination.scss +++ b/app/assets/stylesheets/nla/_pagination.scss @@ -2,22 +2,16 @@ @import "variables"; @import "nla-custom-bootstrap"; -.page-link { - border: 1px solid transparent; - &:hover { - background-color: $purple; - border: 1px solid transparent; - color: $white; - } +.page-link { + border: none; + font-weight: 700; + //text-decoration: none; - &:focus { - text-decoration: none; + &:focus, + &:hover, + &:active { + //background-color: $warm-grey; + //box-shadow: none; } -} - -.page-link.active, -.active > .page-link { - background-color: $purple; - border: 1px solid transparent; -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_record.scss b/app/assets/stylesheets/nla/_record.scss index 4884be02..9f3b6dce 100644 --- a/app/assets/stylesheets/nla/_record.scss +++ b/app/assets/stylesheets/nla/_record.scss @@ -17,39 +17,93 @@ .tab-content { background-color: $white; } -.al-hierarchy-highlight > .documentHeader { - background-color: $light-yellow; + +.al-show-breadcrumb, +.title-container, +.sidebar-section { + border-bottom-color: #e6e6e6; +} + +.collection-sidebar { + border-right-color: #e6e6e6; +} + + .al-collection-context { + padding: 0.5rem; + border-radius: 4px; + + &:hover, + &:has(a:focus) { + background-color: $light-grey; + } + + &.al-hierarchy-highlight { + border-left: 2px solid $dark-teal; + background-color: $light-grey; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + > .documentHeader { + background-color: transparent; + } + } + + a { + text-decoration: none !important; + + &:focus, + &:hover { + color: $body-color !important; + background-color: transparent !important; + text-decoration: underline !important; + box-shadow: none !important; + } + } } li.al-collection-context .al-online-content-icon svg, .al-online-content-icon .blacklight-icons svg { - fill: $light-purple; + fill: $dark-teal; +} + +.title-container { + h1 { + font-family: $font-family-serif; + font-size: 2.5rem; + font-weight: 400; + } } .al-digital-object { + margin-top: 2rem; + margin-bottom: 2rem; + a { - color: $white; - background: $orange; - font-weight: bold; - letter-spacing: 0.5px; + color: $white !important; + background: $black; padding-left: 2rem; padding-right: 2rem; - padding-top: 0.375rem; - padding-bottom: 0.375rem; - text-decoration: none; - text-transform: uppercase; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + text-decoration: none !important; text-align: center; - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;display: inline-block; width: auto; + border-radius: 3rem; + transition: all 0.25s; &:hover, &:focus { - color: $white; - background: $light-purple; + color: $black !important; + background: $light-teal !important; + box-shadow: none !important; } } } +.online-contents { + background-color: $light-grey; +} + .al-grouped-title-bar { h3 a { text-decoration: none; @@ -60,6 +114,11 @@ li.al-collection-context .al-online-content-icon svg, } } +.al-show-sub-heading { + text-transform: none; + font-size: 1.125rem; +} + .documentHeader { a { text-decoration: none; @@ -96,3 +155,39 @@ li.al-collection-context .al-online-content-icon svg, } } } + +#collection-context { + ul { + margin: 0; + padding: 0; + + .al-collection-context { + margin-bottom: 1rem; + } + } +} + +.al-show-actions-box { + border: none; + background-color: $light-grey; + border-radius: 4px; + + .al-show-actions-box-info { + svg { + fill: $black; + } + + .al-online-content-icon { + svg { + fill: $dark-teal; + } + } + + } +} + +#access-and-use { + img { + margin-bottom: 1rem; + } +} diff --git a/app/assets/stylesheets/nla/_search-results.scss b/app/assets/stylesheets/nla/_search-results.scss index f1b4ac1f..a1a082ea 100644 --- a/app/assets/stylesheets/nla/_search-results.scss +++ b/app/assets/stylesheets/nla/_search-results.scss @@ -6,60 +6,114 @@ margin-bottom: 0.5rem !important; } +.navbar-search { + border-top: none; + border-bottom: none; + + .input-group { + gap: 1rem; + + .input-group-text { + background: transparent; + border: none; + } + + .form-select, + .form-control { + border: 1px solid $warm-grey !important; + border-radius: 4px !important; + + &:focus { + border-color: $black; + box-shadow: 0 0 0 1px $black; + } + } + + > .search-autocomplete-wrapper { + border: none !important; + } + + .btn-primary { + border-top-left-radius: 5rem !important; + border-bottom-left-radius: 5rem !important; + } + } +} + .constraints-container { margin-top: 1rem; .applied-filter { - .constraint-value { - border-top-left-radius: 3rem; - border-bottom-left-radius: 3rem; - border-right-width: 0; - font-size: 0.75rem; - font-weight: normal; - text-transform: none; - letter-spacing: 0; - padding-left: 1rem; - padding-right: 1rem; + color: $warm-grey; + font-weight: normal; + text-transform: none; + letter-spacing: 0; + + &:focus, + &:hover { + .constraint-value { + background: $grey-350; + color: $white; + } + } + + &:focus, + &:hover { + .remove { + background: $grey-350; + color: $white; + } + } + + .constraint-value, + .remove { + background-color: $tags-surface; + border: none; + font-size: 0.875rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + line-height: 1; - &:hover, - &:focus { - background-color: $white; - color: $purple; - cursor: default; + &.btn { + padding-top: 0.5rem !important; + padding-bottom: 0 !important; } } + .constraint-value { + border-top-left-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + } + .remove { - border-top-right-radius: 3rem; - border-bottom-right-radius: 3rem; - border-left-width: 0; + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; padding-left: 0; - padding-right: 1rem; - font-size: 0.75rem; - font-weight: normal; - color: rgba(70,71,74, 0.3); + z-index: 10; &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):focus, &:not(:disabled):not(.disabled):active { - background: $white; - color: $orange; - border-color: $purple; + color: $muted-orange; cursor: pointer; text-decoration: none; + box-shadow: none; } } - } + } } + .sort-pagination { + border-top: 1px solid rgb(230,230,230); + .result-type-wrapper { flex-grow: 1; } .result-type-group, .view-type-group { - border: 1px solid $purple; - background-color: $white; + border: 1px solid $warm-grey; + background-color: transparent; border-radius: 3rem; flex-grow: 0; @@ -67,22 +121,30 @@ border-radius: 3rem; background: transparent; border-color: transparent; + color: $body-color; + &.active { border-radius: 3rem; - background: $purple; + background: $warm-grey; + color: $white; + + &:focus { + box-shadow: none; + } } &:not(.active) { border-color: transparent; border-radius: 3rem; - &:hover { - background-color: transparent; - color: $purple; + & path:not([fill="none"]) { + fill: $body-color; } } } + + &:has(.btn:not(.active):focus), &:has(.btn:not(.active):hover) { - background: rgba(52,7,91,0.15); + background: $light-grey; } } @@ -94,11 +156,114 @@ padding-right: 1em; } } + + .sort-dropdown, + .per_page-dropdown { + .btn { + border: none; + background: transparent; + color: $body-color; + + &:focus, + &:hover, + &:active, + &.active, + &.show { + //background: transparent; + box-shadow: none; + //color: $body-color; + } + + } + } + + .sort-dropdown { + .btn { + .d-sm-inline { + font-weight: 600; + color: $black; + } + } + } + + .per_page-dropdown { + .btn { + font-weight: 600; + color: $black; + + .d-sm-inline { + font-weight: 400; + color: $grey-700; + } + } + } + + .dropdown-menu.show { + background-color: $white; + box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.08); + + .dropdown-item { + color: $grey-700; + text-decoration: none; + + &:focus, + &:hover, + &:active, + &.active { + background-color: $light-grey; + color: $grey-700; + box-shadow: none; + } + } + } +} + + +.al-grouped-results, +.documents-list, +.documents-compact { + .document-title-heading, + .al-grouped-title-bar { + a { + padding-right: 1.5rem; + text-decoration: none; + + &:focus, + &:hover { + color: $body-color; + text-decoration: underline; + background-color: transparent; + box-shadow: none; + + &:after { + content: " \F061"; + font: var(--fa-font-regular); + box-shadow: none; + } + } + } + + .badge { + color: $warm-grey; + background-color: $tags-surface; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 400; + border: none; + } + } + + .al-online-content-icon .blacklight-icons svg { + fill: $dark-teal !important; + } + + } .al-grouped-results { .al-grouped-title-bar { - background: $white; + background: $light-grey; + padding: 1rem; } .al-document-extent { @@ -129,44 +294,66 @@ } } -.documents-list { - article.document:first-child { - padding-top: 1rem; - } - - .document { - margin-top: 0; - padding: 1rem; - - &:first-child { - padding-top: 1rem; - } - - &:focus, - &:hover { - background: $white; - box-shadow: 3px 3px 6px 0 rgba(112,57,150,0.1); - } - - .document-thumbnail { - float: none; - margin-bottom: 0; - padding-left: 0; - } - - .al-document-container.text-muted { - color: $gray-medium-light !important; - font-size: 0.875rem; +.documents-list, +.documents-compact { + article { + &.document { + margin-top: 0; + padding: 1rem; + + &:first-child { + padding-top: 1rem; + } + + &:focus, + &:hover, + &:has(.document-title-heading a:focus) { + background: $light-grey; + } + + .document-title-heading { + a { + padding-right: 1.5rem; + text-decoration: none; + + &:focus, + &:hover { + color: $body-color; + text-decoration: underline; + background-color: transparent; + box-shadow: none; + + &:after { + content: " \F061"; + font: var(--fa-font-regular); + box-shadow: none; + } + } + } + + .badge { + color: $warm-grey; + background-color: $tags-surface; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 400; + } + } + + .document-thumbnail { + float: none; + margin-bottom: 0; + padding-left: 0; + } + + .al-document-container.text-muted { + color: $gray-medium-light !important; + font-size: 0.875rem; + } } } } -article.document { - .al-online-content-icon .blacklight-icons svg { - fill: $light-purple !important; - } -} - .al-document-highlight em { background-color: $light-yellow; } diff --git a/app/assets/stylesheets/nla/_typography.scss b/app/assets/stylesheets/nla/_typography.scss index 63b992ed..59426eb0 100644 --- a/app/assets/stylesheets/nla/_typography.scss +++ b/app/assets/stylesheets/nla/_typography.scss @@ -1,16 +1,44 @@ @charset "UTF-8"; @import "variables"; @import "nla-custom-bootstrap"; -@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700&family=Roboto+Condensed:wght@300;400;700&display=swap'); +a:not(.btn, .page-link) { + color: $link-color; + text-decoration: underline; + text-underline-offset: 2px; + text-underline-position: under; + transition: all 0.25s; + + &:focus, + &:hover, + &:active { + color: $white; + text-decoration: none; + background-color: $link-hover-bg-color; + outline: none; + box-shadow: 0 0 0 4px $link-hover-bg-color; + } +} -a:hover { - color: $blue; +a.btn, +a.page-link { text-decoration: none; + + &:focus, + &:hover, + &:active { + box-shadow: none; + } } -a:active, -a:focus { - color: $light-blue; - text-decoration: underline; +h1 { + font-family: $font-family-serif; + color: $body-color; + font-weight: 400; } + +.blacklight-bookmarks { + h1 { + margin-top: 3rem; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/nla/_variables.scss b/app/assets/stylesheets/nla/_variables.scss index d03220d1..8b049166 100644 --- a/app/assets/stylesheets/nla/_variables.scss +++ b/app/assets/stylesheets/nla/_variables.scss @@ -1,3 +1,3 @@ // Typography -$font-family-serif: "Frank Rhule Libre", serif; -$font-family-sans-serif: "Roboto Condensed", sans-serif; \ No newline at end of file +//$font-family-serif: "Frank Rhule Libre", serif; +//$font-family-sans-serif: "Roboto Condensed", sans-serif; \ No newline at end of file diff --git a/app/assets/stylesheets/nla/components/_bookmarks.scss b/app/assets/stylesheets/nla/components/_bookmarks.scss index 58f345fe..c21b20d7 100644 --- a/app/assets/stylesheets/nla/components/_bookmarks.scss +++ b/app/assets/stylesheets/nla/components/_bookmarks.scss @@ -10,7 +10,7 @@ label { cursor: pointer; min-width: auto; - color: $light-purple; + color: $dark-teal; } input[type=checkbox] { diff --git a/app/assets/stylesheets/nla/components/_show_actions.scss b/app/assets/stylesheets/nla/components/_show_actions.scss index 569b8866..9fa36181 100644 --- a/app/assets/stylesheets/nla/components/_show_actions.scss +++ b/app/assets/stylesheets/nla/components/_show_actions.scss @@ -1,4 +1,4 @@ .al-show-actions-box { - border: none; - background-color: white; + //border: none; + //background-color: white; } diff --git a/app/assets/stylesheets/nla/plugins/_blacklight_range_limit.scss b/app/assets/stylesheets/nla/plugins/_blacklight_range_limit.scss index 96254c0c..249c7870 100644 --- a/app/assets/stylesheets/nla/plugins/_blacklight_range_limit.scss +++ b/app/assets/stylesheets/nla/plugins/_blacklight_range_limit.scss @@ -9,18 +9,18 @@ .slider-handle { background-image: none; background-color: $white; - border: 2px solid $purple; + border: 2px solid $dark-teal; opacity: 1; &:active, &:hover { - background-color: $purple; + background-color: $light-teal; } } .slider-selection { background-image: none; - background: $light-purple !important; + background: $light-teal !important; } } diff --git a/app/components/blacklight/search_context/server_applied_params_component.html.erb b/app/components/blacklight/search_context/server_applied_params_component.html.erb index 3510eb18..030a2e3b 100644 --- a/app/components/blacklight/search_context/server_applied_params_component.html.erb +++ b/app/components/blacklight/search_context/server_applied_params_component.html.erb @@ -1,4 +1,4 @@
<%= render 'start_over' %> - <%= link_back_to_catalog class: 'btn btn-sm btn-outline-secondary' %> + <%= link_back_to_catalog class: 'btn btn-sm btn-secondary' %>
diff --git a/app/components/blacklight/start_over_button_component.rb b/app/components/blacklight/start_over_button_component.rb index e8e1f8a1..a8d257be 100644 --- a/app/components/blacklight/start_over_button_component.rb +++ b/app/components/blacklight/start_over_button_component.rb @@ -4,7 +4,7 @@ module Blacklight class StartOverButtonComponent < Blacklight::Component def call - link_to t("blacklight.search.start_over"), start_over_path, class: "catalog_startOverLink btn btn-sm btn-outline-secondary arrow-before" + link_to t("blacklight.search.start_over"), start_over_path, class: "catalog_startOverLink btn btn-sm btn-secondary arrow-before" end private diff --git a/app/components/blacklight/top_navbar_component.html.erb b/app/components/blacklight/top_navbar_component.html.erb index 392b4680..af44fd42 100644 --- a/app/components/blacklight/top_navbar_component.html.erb +++ b/app/components/blacklight/top_navbar_component.html.erb @@ -1,19 +1,26 @@ -
-
\ No newline at end of file diff --git a/app/controllers/catalog_controller.rb b/app/controllers/catalog_controller.rb index b2a264ce..0fc5909c 100644 --- a/app/controllers/catalog_controller.rb +++ b/app/controllers/catalog_controller.rb @@ -23,7 +23,7 @@ class CatalogController < ApplicationController # config.response_model = Blacklight::Solr::Response ## The destination for the link around the logo in the header - config.logo_link = "https://www.nla.gov.au" + config.logo_link = "https://library.gov.au" ## Default parameters to send to solr for all search-like requests. See also SearchBuilder#processed_parameters config.default_solr_params = { @@ -78,7 +78,6 @@ class CatalogController < ApplicationController config.add_nav_action(:catalogue, partial: "shared/nav/catalogue") config.add_nav_action(:eresources, partial: "shared/nav/eresources") config.add_nav_action(:finding_aids, partial: "shared/nav/finding_aids") - config.add_nav_action(:ask_a_librarian, partial: "shared/nav/ask_a_librarian") config.add_nav_action(:help, partial: "shared/nav/help") # solr field configuration for search results/index views diff --git a/app/helpers/blacklight/layout_helper_behavior.rb b/app/helpers/blacklight/layout_helper_behavior.rb new file mode 100644 index 00000000..3b3c96a9 --- /dev/null +++ b/app/helpers/blacklight/layout_helper_behavior.rb @@ -0,0 +1,114 @@ +# frozen_string_literal: true + +# Methods added to this helper will be available to all templates in the hosting +# application +module Blacklight + # A module for useful methods used in layout configuration + module LayoutHelperBehavior + ## + # Classes added to a document's show content div + # @return [String] + def show_content_classes + "#{main_content_classes} show-document" + end + + ## + # Attributes to add to the tag (e.g. lang and dir) + # @return [Hash] + def html_tag_attributes + {lang: I18n.locale} + end + + ## + # Classes added to a document's sidebar div + # @return [String] + def show_sidebar_classes + sidebar_classes + end + + ## + # Classes used for sizing the main content of a Blacklight page + # @return [String] + def main_content_classes + "col-lg-9" + end + + ## + # Classes used for sizing the sidebar content of a Blacklight page + # @return [String] + def sidebar_classes + "page-sidebar col-lg-3" + end + + ## + # Class used for specifying main layout container classes. + # Set config.full_width_layout to true to use a fluid layout. + # @return [String] + def container_classes + blacklight_config.full_width_layout ? "container-fluid" : "container-xxl" + end + + ## + # Render "document actions" area for navigation header + # (normally renders "Saved Searches", "History", "Bookmarks") + # These things are added by add_nav_action + # + # @param [Hash] options + # @return [String] + def render_nav_actions(options = {}, &) + render_filtered_partials(blacklight_config.navbar.partials, options, &) + end + + ## + # Open Search discovery tag for HTML links + # @return [String] + def opensearch_description_tag title, href + tag.link(href: href, title: title, type: "application/opensearchdescription+xml", rel: "search") + end + + ## + # Get the page's HTML title + # + # @return [String] + # rubocop:disable Rails/HelperInstanceVariable + def render_page_title + (content_for(:page_title) if content_for?(:page_title)) || @page_title || application_name + end + # rubocop:enable Rails/HelperInstanceVariable + + ## + # Create links from a documents dynamically + # provided export formats. + # + # Returns empty string if no links available. + # + # @param [SolrDocument] document + # @param [Hash] options + # @option options [Boolean] :unique ensures only one link is output for every + # content type, e.g. as required by atom + # @option options [Array] :exclude array of format shortnames to not include in the output + # @return [String] + # rubocop:disable Rails/HelperInstanceVariable + def render_link_rel_alternates(document = @document, options = {}) + return if document.nil? + + document_presenter(document).link_rel_alternates(options) + end + # rubocop:enable Rails/HelperInstanceVariable + + ## + # Render classes for the element + # @return [String] + def render_body_class + extra_body_classes.join " " + end + + ## + # List of classes to be applied to the element + # @see render_body_class + # @return [Array] + def extra_body_classes + @extra_body_classes ||= ["blacklight-#{controller.controller_name}", "blacklight-#{[controller.controller_name, controller.action_name].join("-")}"] + end + end +end diff --git a/app/javascript/blacklight_custom.js b/app/javascript/blacklight_custom.js index b27c8806..31df8966 100644 --- a/app/javascript/blacklight_custom.js +++ b/app/javascript/blacklight_custom.js @@ -17,9 +17,9 @@ $(function() { $('.blrl-plot-config').each(function() { $(this).data('plot-config', { - selection: { color: '#46474A' }, + selection: { color: '#685E57' }, colors: ['#ffffff'], - series: { lines: { fillColor: 'rgba(112,57,150, 0.8)' }}, + series: { lines: { fillColor: '#a1d6ca' }}, grid: { color: '#677078', tickColor: '#f4f5f6', borderWidth: 1 } }); }); diff --git a/app/views/arclight/requests/_catalogue.html.erb b/app/views/arclight/requests/_catalogue.html.erb index 6074640f..d684034a 100644 --- a/app/views/arclight/requests/_catalogue.html.erb +++ b/app/views/arclight/requests/_catalogue.html.erb @@ -1,3 +1,3 @@ <% catalogue_request ||= Requests::Catalogue.new(document) %> -<%= link_to t("request_this"), catalogue_request.url, class: "btn btn-primary btn-sm" %> +<%= link_to t("request_this"), catalogue_request.url, class: "btn btn-primary" %> diff --git a/app/views/bookmarks/_clear_bookmarks_widget.html.erb b/app/views/bookmarks/_clear_bookmarks_widget.html.erb index 37b710a9..dbe422e3 100644 --- a/app/views/bookmarks/_clear_bookmarks_widget.html.erb +++ b/app/views/bookmarks/_clear_bookmarks_widget.html.erb @@ -5,4 +5,4 @@ turbo_method: :delete, turbo_confirm: t('blacklight.bookmarks.clear.action_confirm') }, - class: 'clear-bookmarks btn btn-outline-primary' %> + class: 'clear-bookmarks btn btn-link' %> diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb index c89d0642..51b3bcdc 100644 --- a/app/views/layouts/blacklight/base.html.erb +++ b/app/views/layouts/blacklight/base.html.erb @@ -34,7 +34,7 @@ - + <%= csrf_meta_tags %> <%= content_for(:head) %> diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb index 97f780e5..66055993 100644 --- a/app/views/shared/_footer.html.erb +++ b/app/views/shared/_footer.html.erb @@ -1,71 +1,113 @@ -