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..19d41b56d0 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/_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/_constraints.scss b/app/assets/stylesheets/blacklight/_constraints.scss index 68d622a6c8..6591b133f6 100644 --- a/app/assets/stylesheets/blacklight/_constraints.scss +++ b/app/assets/stylesheets/blacklight/_constraints.scss @@ -1,5 +1,5 @@ .constraints-container { - @extend .well; + @extend .card; line-height: 2.5; padding: 16px 19px; } @@ -14,36 +14,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..c72f3e9b3b 100644 --- a/app/assets/stylesheets/blacklight/_facets.scss +++ b/app/assets/stylesheets/blacklight/_facets.scss @@ -1,41 +1,11 @@ -.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; - - border-color: $navbar-default-toggle-border-color; - - .icon-bar { - background-color: $navbar-default-toggle-icon-bar-bg; + @extend .card-outline-success; + .card-header { + background-color: $brand-success; } } @@ -54,15 +24,12 @@ } .remove { - @extend .text-muted; - text-indent: $padding-base-horizontal; - - .glyphicon { - top: 0.1em; - vertical-align: text-top; - } - + color: $text-muted; + padding-left: $spacer-x / 2; + font-weight: bold; + &:hover { + text-decoration: none; color: $brand-danger; } @@ -80,7 +47,7 @@ padding-right: 1em; text-indent: -15px; padding-left: 15px; - padding-bottom: $padding-base-vertical; + padding-bottom: $spacer-y; @include hyphens-auto; } @@ -107,22 +74,22 @@ } -.collapse-toggle { - cursor: pointer; +.facet-field-heading { + @extend .h6; + margin-bottom: 0; } -.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 */ +.card-header.collapse-toggle { + &::after { + content: "❯"; /* 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 */ + transform: rotate(90deg); + } + + &.collapsed::after { + transform: rotate(0deg); + transition: transform 0.1s ease; + } } /* Sidenav @@ -137,29 +104,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 +112,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..d03d9d7aff 100644 --- a/app/assets/stylesheets/blacklight/_header.scss +++ b/app/assets/stylesheets/blacklight/_header.scss @@ -2,34 +2,9 @@ Header bar at top (Bootstrap nav-bar) */ -.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; - margin-right:20px; - padding-left: 0; -} - .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 +12,13 @@ .search-query-form { @extend .col-md-8; - border: 0; padding-left: 0; } + .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..ec15e2f400 100644 --- a/app/assets/stylesheets/blacklight/_layout.scss +++ b/app/assets/stylesheets/blacklight/_layout.scss @@ -1,11 +1 @@ /* Generic layout stuff */ - -.navbar + .navbar { - margin-top: -$navbar-margin-bottom; -} - -.navbar-inverse .navbar-toggle { - &:focus, &:hover { - border-color: $gray-light; - } -} \ 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..7e61fafc10 100644 --- a/app/assets/stylesheets/blacklight/_search_history.scss +++ b/app/assets/stylesheets/blacklight/_search_history.scss @@ -5,9 +5,8 @@ .constraint { display: block; - text-indent: -$padding-large-horizontal; - padding-left: $padding-large-horizontal; - + text-indent: -1 * map-get(map-get($spacers, 3), x); + @extend .p-x-3; } .filterName, .filterSeparator diff --git a/app/assets/stylesheets/blacklight/_search_results.scss b/app/assets/stylesheets/blacklight/_search_results.scss index 04a467f6aa..4006fa70b9 100644 --- a/app/assets/stylesheets/blacklight/_search_results.scss +++ b/app/assets/stylesheets/blacklight/_search_results.scss @@ -1,8 +1,8 @@ // the search results on the index view of the catalog .documents-list { .document { - margin-top: $padding-base-vertical; - padding-top: $padding-base-vertical; + margin-top: $spacer-y; + padding-top: $spacer-y; border-bottom:1px dotted $table-border-color; @extend .clearfix; @@ -13,16 +13,16 @@ // 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; + padding-left: $line-height-base; + margin-bottom: $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 @@