diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js index 9f0ce25060..9a6ae5706b 100644 --- a/app/assets/javascripts/blacklight/blacklight.js +++ b/app/assets/javascripts/blacklight/blacklight.js @@ -14,11 +14,7 @@ //= require blacklight/autocomplete // //Bootstrap JS for providing collapsable tablet/mobile menu/alert boxes -//= require bootstrap/transition -//= require bootstrap/collapse -//= require bootstrap/dropdown -//= require bootstrap/alert -//= require bootstrap/modal +//= require bootstrap-sprockets // Twitter Typeahead for autocomplete //= require twitter/typeahead diff --git a/app/assets/javascripts/blacklight/checkbox_submit.js b/app/assets/javascripts/blacklight/checkbox_submit.js index 98ebba22fe..607d3bd0b1 100644 --- a/app/assets/javascripts/blacklight/checkbox_submit.js +++ b/app/assets/javascripts/blacklight/checkbox_submit.js @@ -42,7 +42,6 @@ //for both bookmarks/$doc_id. But let's take out the irrelevant parts //of the form to avoid any future confusion. form.find("input[type=submit]").remove(); - form.addClass('form-horizontal'); //View needs to set data-doc-id so we know a unique value //for making DOM id diff --git a/app/assets/stylesheets/blacklight/_balanced_list.scss b/app/assets/stylesheets/blacklight/_balanced_list.scss index 7b6b3d673a..6bcaaadf11 100644 --- a/app/assets/stylesheets/blacklight/_balanced_list.scss +++ b/app/assets/stylesheets/blacklight/_balanced_list.scss @@ -1,6 +1,6 @@ .dl-horizontal { dd { - margin-bottom: $padding-base-vertical; + margin-bottom: $spacer-y; &:after { clear: none; @@ -12,6 +12,16 @@ dt { font-weight: normal; color: $field_name_color; + text-align: right; + + @media (max-width: breakpoint-max(sm)) { + text-align: left; + } + + @media (min-width: breakpoint-max(sm)) { + text-align: right; + } + } } diff --git a/app/assets/stylesheets/blacklight/_blacklight_base.scss b/app/assets/stylesheets/blacklight/_blacklight_base.scss index 321a8733c3..10cbb0fe29 100644 --- a/app/assets/stylesheets/blacklight/_blacklight_base.scss +++ b/app/assets/stylesheets/blacklight/_blacklight_base.scss @@ -7,7 +7,7 @@ not to use the Blacklight CSS file at all in your local app. */ @import 'blacklight/blacklight_defaults'; - +@import "blacklight/bootstrap_overrides"; @import "blacklight/layout"; @import "blacklight/header"; @import "blacklight/constraints"; diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss index 0f5acf6c4d..cda02f02c5 100644 --- a/app/assets/stylesheets/blacklight/_bookmark.scss +++ b/app/assets/stylesheets/blacklight/_bookmark.scss @@ -1,7 +1,3 @@ -.clear-bookmarks { - margin-left: $border-radius-base; -} - label.toggle_bookmark { font-weight: inherit; min-width: 8.5em; diff --git a/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss b/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss new file mode 100644 index 0000000000..c7ab7bc296 --- /dev/null +++ b/app/assets/stylesheets/blacklight/_bootstrap_overrides.scss @@ -0,0 +1,22 @@ +.navbar + .container { + @extend .p-y-2; +} + +.card-header.collapse-toggle { + margin-bottom: 0; + + &::after { + content: "❯"; + float: right; + transform: rotate(90deg); + } + + &.collapsed { + border-bottom: 0; + + &::after { + transform: rotate(0deg); + transition: transform 0.1s ease; + } + } +} diff --git a/app/assets/stylesheets/blacklight/_constraints.scss b/app/assets/stylesheets/blacklight/_constraints.scss index 68d622a6c8..ca1ca6472a 100644 --- a/app/assets/stylesheets/blacklight/_constraints.scss +++ b/app/assets/stylesheets/blacklight/_constraints.scss @@ -1,5 +1,6 @@ .constraints-container { - @extend .well; + @extend .card; + background-color: $gray-lightest; line-height: 2.5; padding: 16px 19px; } @@ -14,36 +15,34 @@ span.constraints-label { text-overflow: ellipsis; overflow: hidden; - @media (max-width: $screen-xs-max) { - max-width: $screen-xs-min / 2; + @media (max-width: breakpoint-max(xs)) { + max-width: breakpoint-max(xs) / 2; } - @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - max-width: $screen-sm-min / 2; + @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) { + max-width: breakpoint-min(sm) / 2; } - @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { - max-width: $screen-md-min / 2; + @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) { + max-width: breakpoint-min(md) / 2; } - @media (min-width: $screen-lg-min) { - max-width: $screen-lg-min / 2; + @media (min-width: breakpoint-min(lg)) { + max-width: breakpoint-min(lg) / 2; } &:hover, &:active { - background-color: $btn-default-bg; - border-color: $btn-default-border; + background-color: $btn-secondary-bg; + border-color: $btn-secondary-border; box-shadow: none; } } .filterName:after { @extend .text-muted; - font-family: 'Glyphicons Halflings'; - /* glyphicon-chevron-right */ - content: "\e080"; - font-size: 70%; - padding-left: $caret-width-base; + content: "❯"; + font-size: 90%; + padding-left: $caret-width; } .remove:hover, .remove:active { diff --git a/app/assets/stylesheets/blacklight/_controls.scss b/app/assets/stylesheets/blacklight/_controls.scss index b0bfaf8fed..b960a1c9d1 100644 --- a/app/assets/stylesheets/blacklight/_controls.scss +++ b/app/assets/stylesheets/blacklight/_controls.scss @@ -1,6 +1,6 @@ .sort-pagination, .pagination-search-widgets { - border-bottom: 1px solid $pagination-border; + border-bottom: $pagination-border-width solid $pagination-border-color; margin-bottom: 1em; padding-bottom: 1em; } @@ -8,7 +8,7 @@ .pagination-search-widgets { @extend .clearfix; padding-top: 1px; - padding-bottom: $padding-base-vertical; + padding-bottom: $spacer-y; } .sort-pagination .dropdown-toggle { @@ -43,7 +43,7 @@ color: $link-color; .caret { - color: $text-color; + color: $body-color; } } @@ -51,7 +51,7 @@ width: 80%; } -@media (max-width: $screen-sm-min) { +@media (max-width: breakpoint-max(xs)) { .search-input-group { width: auto; } diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss index 5e3439c94c..caab45ed74 100644 --- a/app/assets/stylesheets/blacklight/_facets.scss +++ b/app/assets/stylesheets/blacklight/_facets.scss @@ -1,41 +1,12 @@ -.page-sidebar, -.facets { - @extend .clearfix; - padding-bottom: $padding-large-vertical; -} - .facets .facets-heading { @extend h4; } -.no-js { - .page-sidebar .collapse { - @extend .in; - } -} - .facet_limit-active { - @extend .panel-success; -} - -.facets > .collapse { - @extend .navbar-collapse; - padding-left: 0; - padding-right: 0; - border-top: none; - box-shadow: none; - max-height: none; -} - -.facets-toggle { - @extend .navbar-toggle; - @extend .btn; - @extend .btn-default; + @extend .card-outline-success; - border-color: $navbar-default-toggle-border-color; - - .icon-bar { - background-color: $navbar-default-toggle-icon-bar-bg; + .card-header { + background-color: $brand-success; } } @@ -43,6 +14,7 @@ display: table; table-layout: fixed; width: 100%; + margin-bottom: 0; li { @@ -54,18 +26,14 @@ } .remove { - @extend .text-muted; - text-indent: $padding-base-horizontal; - - .glyphicon { - top: 0.1em; - vertical-align: text-top; - } + color: $text-muted; + font-weight: bold; + padding-left: $spacer-x / 2; &:hover { color: $brand-danger; + text-decoration: none; } - } @mixin hyphens-auto { @@ -80,7 +48,7 @@ padding-right: 1em; text-indent: -15px; padding-left: 15px; - padding-bottom: $padding-base-vertical; + padding-bottom: $spacer-y; @include hyphens-auto; } @@ -107,22 +75,8 @@ } -.collapse-toggle { - cursor: pointer; -} - -.panel-heading.collapse-toggle .panel-title:after { - /* symbol for "opening" panels */ - font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ - content: "\e114"; /* adjust as needed, taken from bootstrap.css */ - float: right; /* adjust as needed */ - color: grey; /* adjust as needed */ - font-size: 0.8em; - line-height: normal; -} -.panel-heading.collapse-toggle.collapsed .panel-title:after { - /* symbol for "collapsed" panels */ - content: "\e080"; /* adjust as needed, taken from bootstrap.css */ +.facet-field-heading { + @extend .h6; } /* Sidenav @@ -137,29 +91,6 @@ } -// Facet modal alphabetical filter -.alpha-filter { - .btn { - vertical-align: top; - } - - .pagination { - margin: 0; - } -} - -@media (max-width: $grid-float-breakpoint) { - - .facets-toggle { - margin-top: 3px; - } - - .facets .top-panel-heading { - border: 1px solid $breadcrumb-color; - margin-bottom: 1em; - @include border-bottom-radius($panel-border-radius - 1); - } -} /* style for pivot facet's nested list */ @@ -168,7 +99,7 @@ ul, .pivot-facet { @extend .list-unstyled; - padding-bottom: $padding-base-vertical; - padding-left: $padding-large-horizontal; + @extend .p-y-1; + @extend .p-x-3; } } diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss index fc4b3d0826..73bab9f09d 100644 --- a/app/assets/stylesheets/blacklight/_header.scss +++ b/app/assets/stylesheets/blacklight/_header.scss @@ -3,33 +3,22 @@ */ .navbar-brand { /* The main logo image for the Blacklight instance */ - width: 150px; - height: 50px; background:transparent image_url($logo_image) no-repeat top left; display: inline-block; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - padding-right:0; + height: 50px; margin-right:20px; + margin-top: -0.4rem; + overflow: hidden; padding-left: 0; + padding-right: 0; + text-indent: 100%; + white-space: nowrap; + width: 150px; } .navbar-search { z-index: 1; - .input-group { - width: 100%; - } - - .input-group-addon { - &.for-search-field { - background-color: $input-bg; - border-radius: $border-radius-base 0 0 $border-radius-base; - width: 15ch; - } - } - .search_field { background: transparent; border: none; @@ -37,22 +26,17 @@ .search-query-form { @extend .col-md-8; - border: 0; padding-left: 0; } + + .input-group-addon.for-search-field { + padding-bottom: calc(0.5rem - 1px); + } + .submit-search-text { // hide 'search' label at very small screens - @media screen and (max-width: $screen-xs-min ) { - // copied from .sr-only, sadly can't seem to use @extend in a media - // query like this, have to copy. - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; + @media screen and (max-width: breakpoint-max(xs)) { + @include sr-only(); } } } diff --git a/app/assets/stylesheets/blacklight/_layout.scss b/app/assets/stylesheets/blacklight/_layout.scss index 6e0239c652..cc684afaa8 100644 --- a/app/assets/stylesheets/blacklight/_layout.scss +++ b/app/assets/stylesheets/blacklight/_layout.scss @@ -1,11 +1,5 @@ /* Generic layout stuff */ -.navbar + .navbar { - margin-top: -$navbar-margin-bottom; -} - -.navbar-inverse .navbar-toggle { - &:focus, &:hover { - border-color: $gray-light; - } +.welcome .nav { + margin-left: -1rem; } \ No newline at end of file diff --git a/app/assets/stylesheets/blacklight/_pagination.scss b/app/assets/stylesheets/blacklight/_pagination.scss index 3218615364..dbf1b3fdb4 100644 --- a/app/assets/stylesheets/blacklight/_pagination.scss +++ b/app/assets/stylesheets/blacklight/_pagination.scss @@ -1,21 +1,6 @@ .page_links { display: inline-block; border: 1px solid transparent; - padding: $padding-base-vertical $padding-base-horizontal; + padding: $btn-padding-y $btn-padding-x; padding-left: 0; } - -.pagination { - text-align: center ; -} - - -.pagination-xs { - li { - a, - span { - border: none; - padding: $padding-xs-vertical $padding-xs-horizontal; - } - } -} diff --git a/app/assets/stylesheets/blacklight/_search_history.scss b/app/assets/stylesheets/blacklight/_search_history.scss index d3178ef93a..3b306a5097 100644 --- a/app/assets/stylesheets/blacklight/_search_history.scss +++ b/app/assets/stylesheets/blacklight/_search_history.scss @@ -4,10 +4,9 @@ .constraint { + @extend .p-x-3; display: block; - text-indent: -$padding-large-horizontal; - padding-left: $padding-large-horizontal; - + text-indent: -1 * map-get(map-get($spacers, 3), x); } .filterName, .filterSeparator diff --git a/app/assets/stylesheets/blacklight/_search_results.scss b/app/assets/stylesheets/blacklight/_search_results.scss index 04a467f6aa..f406cddd6a 100644 --- a/app/assets/stylesheets/blacklight/_search_results.scss +++ b/app/assets/stylesheets/blacklight/_search_results.scss @@ -1,10 +1,10 @@ // the search results on the index view of the catalog .documents-list { .document { - margin-top: $padding-base-vertical; - padding-top: $padding-base-vertical; - border-bottom:1px dotted $table-border-color; @extend .clearfix; + border-bottom: 1px dotted $table-border-color; + margin-top: $spacer-y; + padding-top: $spacer-y; .document-title-heading { @extend h5; @@ -13,16 +13,17 @@ // bookmarks checkbox on index, give it some // lower margin when it collapses .index-document-functions { - margin-bottom: ($line-height-computed / 2); - @media (min-width: $screen-sm-min) { + margin-bottom: ($line-height-base / 2); + + @media (min-width: breakpoint-min(sm)) { margin-bottom: 0; } } .document-thumbnail { float: right; - padding-left: $line-height-computed; - margin-bottom: $line-height-computed; + margin-bottom: $line-height-base; + padding-left: $line-height-base; } } } diff --git a/app/helpers/blacklight/facets_helper_behavior.rb b/app/helpers/blacklight/facets_helper_behavior.rb index 7c99b096c2..6e96b8df8a 100644 --- a/app/helpers/blacklight/facets_helper_behavior.rb +++ b/app/helpers/blacklight/facets_helper_behavior.rb @@ -149,7 +149,7 @@ def render_selected_facet_value(facet_field, item) content_tag(:span, facet_display_value(facet_field, item), class: "selected") + # remove link link_to(remove_href, class: "remove") do - content_tag(:span, '', class: "glyphicon glyphicon-remove") + + content_tag(:span, '✖', class: "remove-icon") + content_tag(:span, '[remove]', class: 'sr-only') end end + render_facet_count(item.hits, :classes => ["selected"]) diff --git a/app/views/_user_util_links.html.erb b/app/views/_user_util_links.html.erb index cae9ea3933..8d058fc15d 100644 --- a/app/views/_user_util_links.html.erb +++ b/app/views/_user_util_links.html.erb @@ -1,26 +1,22 @@ -
- +
+ diff --git a/app/views/blacklight/nav/_bookmark.html.erb b/app/views/blacklight/nav/_bookmark.html.erb index 86ad414220..b88631f3d0 100644 --- a/app/views/blacklight/nav/_bookmark.html.erb +++ b/app/views/blacklight/nav/_bookmark.html.erb @@ -1,4 +1,4 @@ -<%= link_to bookmarks_path, id:'bookmarks_nav' do %> +<%= link_to bookmarks_path, id:'bookmarks_nav', class: 'nav-link' do %> <%= t('blacklight.header_links.bookmarks') %> (<%= current_or_guest_user.bookmarks.count %>) <% end %> diff --git a/app/views/blacklight/nav/_search_history.html.erb b/app/views/blacklight/nav/_search_history.html.erb index 1552de9655..07332a567b 100644 --- a/app/views/blacklight/nav/_search_history.html.erb +++ b/app/views/blacklight/nav/_search_history.html.erb @@ -1 +1 @@ -<%= link_to t('blacklight.header_links.search_history'), blacklight.search_history_path %> +<%= link_to t('blacklight.header_links.search_history'), blacklight.search_history_path, class: 'nav-link' %> diff --git a/app/views/catalog/_bookmark_control.html.erb b/app/views/catalog/_bookmark_control.html.erb index 00f18de313..46a83fadf1 100644 --- a/app/views/catalog/_bookmark_control.html.erb +++ b/app/views/catalog/_bookmark_control.html.erb @@ -7,13 +7,13 @@ <% unless bookmarked? document %> <%= form_tag( bookmark_path( document ), :method => :put, :class => "bookmark_toggle", "data-doc-id" => document.id, :'data-present' => t('blacklight.search.bookmarks.present'), :'data-absent' => t('blacklight.search.bookmarks.absent'), :'data-inprogress' => t('blacklight.search.bookmarks.inprogress')) do %> - <%= submit_tag(t('blacklight.bookmarks.add.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_add btn btn-default") %> + <%= submit_tag(t('blacklight.bookmarks.add.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_add btn btn-secondary") %> <% end %> <% else %> <%= form_tag( bookmark_path( document ), :method => :delete, :class => "bookmark_toggle", "data-doc-id" => document.id, :'data-present' => t('blacklight.search.bookmarks.present'), :'data-absent' => t('blacklight.search.bookmarks.absent'), :'data-inprogress' => t('blacklight.search.bookmarks.inprogress')) do %> - <%= submit_tag(t('blacklight.bookmarks.remove.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_remove btn btn-default") %> + <%= submit_tag(t('blacklight.bookmarks.remove.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_remove btn btn-secondary") %> <% end %> <% end %> diff --git a/app/views/catalog/_constraints.html.erb b/app/views/catalog/_constraints.html.erb index f423adef85..766c158bf3 100644 --- a/app/views/catalog/_constraints.html.erb +++ b/app/views/catalog/_constraints.html.erb @@ -1,7 +1,7 @@ <% if query_has_constraints? %>
-
+
<%=link_to t('blacklight.search.start_over'), start_over_path, :class => "catalog_startOverLink btn btn-sm btn-text", :id=>"startOverLink" %>
<%= t('blacklight.search.filters.title') %> diff --git a/app/views/catalog/_constraints_element.html.erb b/app/views/catalog/_constraints_element.html.erb index f87d162b01..d0755e39f0 100644 --- a/app/views/catalog/_constraints_element.html.erb +++ b/app/views/catalog/_constraints_element.html.erb @@ -8,7 +8,7 @@ %> "> - + <% unless label.blank? %> <%= label %> <% end %> @@ -26,8 +26,8 @@ end %> - <%= link_to(content_tag(:span, '', class: 'glyphicon glyphicon-remove') + accessible_remove_label, - options[:remove], class: 'btn btn-default btn-sm remove dropdown-toggle' + <%= link_to(content_tag(:span, '✖', class: 'remove-icon') + accessible_remove_label, + options[:remove], class: 'btn btn-secondary btn-sm remove' ) %> <%- end -%> diff --git a/app/views/catalog/_document_action.html.erb b/app/views/catalog/_document_action.html.erb index 28419faf07..503519e34e 100644 --- a/app/views/catalog/_document_action.html.erb +++ b/app/views/catalog/_document_action.html.erb @@ -1,4 +1,5 @@ <%= link_to document_action_label(document_action_config.key, document_action_config), document_action_path(document_action_config, (local_assigns.has_key?(:url_opts) ? url_opts : {}).merge(({id: document} if document) || {})), id: document_action_config.fetch(:id, "#{document_action_config.key}Link"), + class: 'nav-link', data: {}.merge(({ajax_modal: "trigger"} if document_action_config.modal != false) || {}) %> diff --git a/app/views/catalog/_email_form.html.erb b/app/views/catalog/_email_form.html.erb index efde7eea95..50174129cb 100644 --- a/app/views/catalog/_email_form.html.erb +++ b/app/views/catalog/_email_form.html.erb @@ -1,8 +1,8 @@ -<%= form_tag url_for(:controller => controller_name, :action => "email"), :id => 'email_form', :class => "form-horizontal ajax_form", :method => :post do %> +<%= form_tag url_for(:controller => controller_name, :action => "email"), :id => 'email_form', :class => "ajax_form", :method => :post do %>
<%= render :partial=>'/flash_msg' %> -
+
@@ -11,7 +11,7 @@
-
+
diff --git a/app/views/catalog/_facet_index_navigation.html.erb b/app/views/catalog/_facet_index_navigation.html.erb index 5c7496babe..eae74573a0 100644 --- a/app/views/catalog/_facet_index_navigation.html.erb +++ b/app/views/catalog/_facet_index_navigation.html.erb @@ -1,5 +1,5 @@