diff --git a/app/assets/builds/blacklight.css b/app/assets/builds/blacklight.css new file mode 100644 index 000000000..d7d547a22 --- /dev/null +++ b/app/assets/builds/blacklight.css @@ -0,0 +1,438 @@ +/* This is the default blacklight theme. */ +/* This file is generated by Blacklight. You probably don't want to edit + this file directly, or you'll have to manually merge your changes if later + versions of Blacklight change this file. Instead, use your own CSS file + which over-rides things in this file. Or of course you can choose + not to use the Blacklight CSS file at all in your local app. */ +/* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */ +/* for compatability with BS < 5.3 */ +:root { + --bs-secondary-color: rgba(33, 37, 41, 0.75); /* for compatability with BS < 5.3 */ + --bl-main-padding-y: 0.5rem; + --bl-constraint-remove-hover-bg: #bb2d3b; + --bl-constraint-remove-hover-border-color: #bb2d3b; + --bl-field-name-color: var(--bs-secondary-color); +} + +.page-link { + white-space: nowrap; +} + +.modal[open] { + display: block; + background: none; + border: none; +} + +/* Generic layout stuff */ +main { + padding-block: var(--bl-main-padding-y); +} + +/* + Header bar at top (Bootstrap nav-bar) +*/ +.navbar-logo { + /* The main logo image for the Blacklight instance */ + background: transparent url("blacklight/logo.png") no-repeat top left; + background-size: 150px 50px; + height: 50px; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 150px; +} + +.navbar-search { + z-index: 1; +} +.navbar-search search { + display: contents; +} +.navbar-search .search-field { + min-width: 7em; +} + +.constraints-container { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.25rem; +} + +.applied-filter { + --separator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e"); +} +.applied-filter .constraint-value { + cursor: default; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: clamp(288px, 30vw, 500px); +} +.applied-filter .constraint-value .filter-name:after { + background-color: var(--bs-btn-color); + content: ""; + mask: var(--separator-icon); + mask-repeat: no-repeat; + display: inline-block; + height: 1.1rem; + width: 1.25rem; + vertical-align: text-bottom; + margin-right: -0.2rem; + margin-left: 0.25rem; + transition: background-color 0.15s ease-in-out; +} +.applied-filter .constraint-value:hover .filter-name:after { + background-color: var(--bs-btn-hover-color); +} +.applied-filter .remove { + --bs-btn-hover-bg: var(--bl-constraint-remove-hover-bg); + --bs-btn-hover-border-color: var(--bl-constraint-remove-hover-border-color); + --bs-btn-active-bg: var(--bl-constraint-remove-hover-bg); + --bs-btn-active-border-color: var( + --bl-constraint-remove-hover-border-color + ); +} + +.search-widgets { + display: flex; +} + +.sort-pagination, +.pagination-search-widgets { + border-bottom: var(--bs-border-width) solid var(--bs-border-color); +} + +.sort-pagination .dropdown-toggle { + cursor: pointer; +} + +.no-js .btn-group:focus-within .dropdown-menu { + display: block; /* show menu when tabbing to it, without Javascript */ +} + +.view-type { + display: inline-block; +} + +.modal_form { + margin-bottom: 0; +} + +.input-group > .search-q { + flex-grow: 4; +} + +.input-group > .search-autocomplete-wrapper { + display: inline-block; + flex-grow: 4; + padding: 0; + position: relative; +} +.input-group > .search-autocomplete-wrapper .search-q { + border: 0; + height: 100%; + width: 100%; +} +.input-group > .search-autocomplete-wrapper ul { + display: block; +} + +.search-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + display: flex; +} + +.documents-list { + --bl-results-document-margin-top: 1rem; + --bl-results-document-padding-top: 1rem; +} +.documents-list .document { + display: flex; + border-bottom: 1px dotted var(--bs-border-color); + margin-top: var(--bl-results-document-margin-top); + padding-top: var(--bl-results-document-padding-top); +} +.documents-list .document .document-main-section { + flex-grow: 1; +} +.documents-list .document .document-thumbnail { + flex-grow: 0; + margin-bottom: 3rem; + padding-left: 3rem; +} + +.page-links { + display: inline-block; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + padding-left: 0; +} + +@media (max-width: 575.98px) { + .pagination { + flex-wrap: wrap; + } +} + +.group-key { + --bl-border-color: var(--bs-gray-600); + border-bottom: 1px solid var(--bl-border-color); + clear: right; +} + +.grouped-documents .document { + border-bottom: 0; +} + +.bookmark-toggle { + /* override for line 21. + Creates weird spacing in toolbar when min-width is set to 8rem */ +} +.no-js .bookmark-toggle input[type=submit] { + display: inline; +} +.no-js .bookmark-toggle .toggle-bookmark { + display: none; +} +.bookmark-toggle input[type=submit] { + display: none; +} +.bookmark-toggle .toggle-bookmark { + cursor: pointer; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label { + font-weight: inherit; + min-width: 8.5em; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg { + height: 1.25rem; + width: 1.25rem; + overflow: visible; + fill: var(--bs-primary); +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-label .blacklight-icons svg.bookmark-checked { + display: none; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-checked { + display: inherit; +} +.bookmark-toggle .toggle-bookmark .toggle-bookmark-input:checked + span svg.bookmark-unchecked { + display: none; +} +.bookmark-toggle .header-tools .toggle-bookmark-label { + min-width: 2rem; +} + +.dl-invert dt { + font-weight: normal; + color: var(--bl-field-name-color); +} +@media (min-width: 768px) { + .dl-invert dt { + text-align: end; + } +} + +.sidenav { + --bl-facet-active-bg: #198754; + --bl-facet-active-item-color: #198754; + --bl-facet-remove-color: var(--bs-secondary-color); +} +.sidenav .facet-toggle-button [data-hide-label] { + display: inline; +} +.sidenav .facet-toggle-button [data-show-label] { + display: none; +} +.sidenav .facet-toggle-button[aria-expanded=false] [data-hide-label] { + display: none; +} +.sidenav .facet-toggle-button[aria-expanded=false] [data-show-label] { + display: inline; +} + +@media (max-width: 991.98px) { + .no-js #sidebar { + order: 6 !important; + } +} +.no-js .facet-content.collapse { + display: block; +} +.no-js .facet-toggle-handle { + display: none; +} +.no-js .pivot-facet.collapse { + display: block; +} +.no-js .facets-collapse.collapse { + display: block; +} + +.facets-header { + display: flex; + justify-content: space-between; + padding-bottom: 0.5rem; + padding-top: 0.5rem; +} + +.facets-heading { + line-height: inherit; +} + +.facet-limit { + --bs-accordion-btn-bg: var(--bs-gray-100); + --bs-btn-hover-bg: var(--bs-gray-200); + --bs-accordion-active-bg: var(--bs-accordion-btn-bg); +} + +.facet-limit-active { + --bs-accordion-btn-bg: var(--bl-facet-active-bg); + --bs-btn-hover-bg: var(--bs-accordion-btn-bg); + --bs-accordion-btn-color: #fff; + --bs-btn-hover-color: var(--bs-accordion-btn-color); + --bs-accordion-active-color: var(--bs-accordion-btn-color); +} + +.facet-values { + margin-bottom: 0; +} +.facet-values a { + text-decoration: none; +} +.facet-values li { + display: flex; + align-items: flex-start; + padding: 3px 0; +} +.facet-values li.treeitem { + display: block; +} +.facet-values li .selected { + color: var(--bl-facet-active-item-color); +} +.facet-values .remove { + color: var(--bl-facet-remove-color); + font-weight: bold; + padding-left: 0.5rem; + text-decoration: none; +} +.facet-values .remove:hover { + color: #dc3545; + text-decoration: none; +} +.facet-values .facet-label { + hyphens: auto; + overflow-wrap: break-word; + padding-left: 15px; + padding-right: 1em; + text-indent: -15px; +} +.facet-values .facet-count { + margin-left: auto; +} +.facet-values .facet-checkbox { + width: 1.25rem; +} + +.facet-extended-list .sort-options { + text-align: right; +} +.facet-extended-list .prev-next-links { + float: left; +} + +.facet-field-heading { + /* This prevents the contained stretch link from covering the panel body */ + position: relative; +} +.facet-field-heading a { + color: inherit; +} + +/* Sidenav +-------------------------------------------------- */ +.facet-pagination.top { + padding: 1rem; +} + +.pivot-facet.show { + display: flex; +} + +.facet-toggle-handle { + margin-block: 0; + padding-block: 0; + padding-inline: 0.5rem; + margin-inline-start: -0.75rem; +} +.pivot-facet .facet-toggle-handle { + margin-inline-start: -1.5rem; +} +.facet-toggle-handle.collapsed .show { + display: flex; +} +.facet-toggle-handle.collapsed .hide { + display: none; +} +.facet-toggle-handle .show { + display: none; +} +.facet-toggle-handle .hide { + display: flex; +} +.facet-toggle-handle .show .icon, +.facet-toggle-handle .hide .icon { + width: 1em; + height: 1em; + padding: 0.375rem 0.75rem; +} +.facet-toggle-handle .show .icon { + background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" /%3e%3c/svg%3e') center/1em auto no-repeat; +} +.facet-toggle-handle .hide .icon { + background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" /%3e%3c/svg%3e') center/1em auto no-repeat; +} + +/* Search History */ +.search-history { + --bl-history-filter-name-color: var(--bs-secondary-color); +} +.search-history td { + padding: 1rem; +} +.search-history .constraint { + padding-inline-end: 1rem; + display: block; +} +.search-history .filter-name { + color: var(--bl-history-filter-name-color); +} + +.modal-dialog { + border-radius: 5px; +} + +.modal-content .facet-pagination.top { + display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */ +} +.modal-content .page-sidebar { + display: none; +} +.modal-content .blacklight-modal-close { + display: block; +} +.modal-content .prev_next_links.btn-group .btn { + border: 0; +} + +.blacklight-modal-close { + display: none; +} + +.remove .bi { + height: 1em; + width: 1em; +} diff --git a/app/assets/stylesheets/blacklight/build.scss b/app/assets/stylesheets/blacklight/build.scss new file mode 100644 index 000000000..8cf1c485b --- /dev/null +++ b/app/assets/stylesheets/blacklight/build.scss @@ -0,0 +1,4 @@ +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/mixins/breakpoints"; +@import "bootstrap/scss/variables"; +@import "blacklight"; diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb index f8e8ecff1..d3d474ee9 100644 --- a/app/views/layouts/blacklight/base.html.erb +++ b/app/views/layouts/blacklight/base.html.erb @@ -12,6 +12,7 @@ <%= opensearch_description_tag application_name, opensearch_catalog_url(format: 'xml') %> <%= favicon_link_tag %> <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %> + <% if defined? Importmap %> <%= javascript_importmap_tags %> <% elsif defined? Propshaft %> diff --git a/lib/generators/blacklight/assets/importmap_generator.rb b/lib/generators/blacklight/assets/importmap_generator.rb index 71dc340af..f8d856c70 100644 --- a/lib/generators/blacklight/assets/importmap_generator.rb +++ b/lib/generators/blacklight/assets/importmap_generator.rb @@ -10,7 +10,7 @@ def import_javascript_assets <<~CONTENT pin "@github/auto-complete-element", to: "https://cdn.skypack.dev/@github/auto-complete-element" pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/dist/umd/popper.min.js" - pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@#{(defined?(Bootstrap) && Bootstrap::VERSION) || '5.3.2'}/dist/js/bootstrap.js" + pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@#{(defined?(Bootstrap) && Bootstrap::VERSION) || '5.3.3'}/dist/js/bootstrap.js" CONTENT end @@ -40,41 +40,21 @@ def append_blacklight_javascript end def add_stylesheet - unless used_bootstrap_css? - generate_with_sassc_rails - return - end - - if ENV['CI'] - run "yarn add file:#{Blacklight::Engine.root}" + if File.exist? 'app/assets/stylesheets/application.bootstrap.scss' + append_to_file 'app/assets/stylesheets/application.bootstrap.scss' do + <<~CONTENT + @import url("blacklight.css"); + CONTENT + end else - run "yarn add blacklight-frontend@#{Blacklight::VERSION}" - end - - append_to_file 'app/assets/stylesheets/application.bootstrap.scss' do - <<~CONTENT - @import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight"; - CONTENT - end - end - - private - - # Did they generate the rails app with `--css bootstrap' ? - def used_bootstrap_css? - File.exist? 'app/assets/stylesheets/application.bootstrap.scss' - end - - def generate_with_sassc_rails - gem "sassc-rails", "~> 2.1" - # This could be skipped if you want to use shakapacker or cssbunding-rails - gem 'bootstrap', options[:'bootstrap-version'].presence - - create_file 'app/assets/stylesheets/blacklight.scss' do - <<~CONTENT - @import 'bootstrap'; - @import 'blacklight/blacklight'; - CONTENT + append_to_file 'app/assets/stylesheets/application.css' do + <<~CONTENT + /* + *= require blacklight + */ + @import url(https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css); + CONTENT + end end end end diff --git a/lib/generators/blacklight/assets/propshaft_generator.rb b/lib/generators/blacklight/assets/propshaft_generator.rb index 9466fb232..cf3373cdd 100644 --- a/lib/generators/blacklight/assets/propshaft_generator.rb +++ b/lib/generators/blacklight/assets/propshaft_generator.rb @@ -18,7 +18,7 @@ def add_third_party_packages def add_package_assets append_to_file 'app/assets/stylesheets/application.bootstrap.scss' do <<~CONTENT - @import "blacklight-frontend/app/assets/stylesheets/blacklight/blacklight"; + @import url("blacklight.css"); CONTENT end diff --git a/lib/generators/blacklight/assets_generator.rb b/lib/generators/blacklight/assets_generator.rb index c2c273562..a9b9c442a 100644 --- a/lib/generators/blacklight/assets_generator.rb +++ b/lib/generators/blacklight/assets_generator.rb @@ -2,7 +2,7 @@ module Blacklight class AssetsGenerator < Rails::Generators::Base - class_option :'bootstrap-version', type: :string, default: ENV.fetch('BOOTSTRAP_VERSION', '~> 5.3'), desc: "Set the generated app's bootstrap version" + class_option :'bootstrap-version', type: :string, default: ENV.fetch('BOOTSTRAP_VERSION', '5.3.3'), desc: "Set the generated app's bootstrap version" def run_asset_pipeline_specific_generator generated_options = "--bootstrap-version='#{options[:'bootstrap-version']}'" if options[:'bootstrap-version'] diff --git a/package.json b/package.json index 4b4d81d2d..827b403b7 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "type": "module", "scripts": { + "build": "sass ./app/assets/stylesheets/blacklight/build.scss:./app/assets/builds/blacklight.css --no-source-map --load-path=node_modules --quiet-deps", "prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap" }, "repository": { @@ -31,7 +32,9 @@ "homepage": "https://github.com/projectblacklight/blacklight#readme", "devDependencies": { "rollup": "^4.24.0", - "rollup-plugin-includepaths": "^0.2.4" + "rollup-plugin-includepaths": "^0.2.4", + "sass": "^1.80.3", + "bootstrap": "^5.3.3" }, "browserslist": [ "defaults",