diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss index 1a75cecd..57614872 100644 --- a/app/assets/stylesheets/base.scss +++ b/app/assets/stylesheets/base.scss @@ -7,13 +7,15 @@ } } - a:hover, a:focus { + a:hover, + a:focus { text-decoration: underline; } li { a { - &:hover, &:focus { + &:hover, + &:focus { border-bottom: 0; } } @@ -37,10 +39,6 @@ textarea:focus { @include focus-outline; } -#main-container { - padding-bottom: $form-group-margin-bottom; -} - .location-and-access { padding-right: 1ch; } diff --git a/app/assets/stylesheets/library_hours.scss b/app/assets/stylesheets/library_hours.scss index cf8f23fc..3c6c922b 100644 --- a/app/assets/stylesheets/library_hours.scss +++ b/app/assets/stylesheets/library_hours.scss @@ -1,17 +1,16 @@ // Import all individual stylesheets here -@import 'base'; -@import 'layout'; - -@import 'top-navbar'; -@import 'sul-footer'; +@import "base"; +@import "layout"; +@import "top-navbar"; +@import "sul-footer"; .date-range { - background-color: $well-bg; + background-color: $color-beige-10; @include media-breakpoint-up(sm) { .date-input { - padding-right: ($spacer * .75); + padding-right: ($spacer * 0.75); } } @@ -22,13 +21,13 @@ @include media-breakpoint-down(xs) { h4 { // same ps py-2 in BS4 - padding: 0 ($spacer * .5); + padding: 0 ($spacer * 0.5); } .pager { justify-content: center; } - } + } } .closed { @@ -47,7 +46,7 @@ th.location-name { td.hours, th.hours { width: 100px; - padding: .5rem; + padding: 0.5rem; } th.location-name, @@ -56,7 +55,7 @@ th.hours { } td.exceptions { -// @extend .alert-info; + // @extend .alert-info; } td.holiday, @@ -68,13 +67,10 @@ th small { font-size: 70%; } -.well a { - color: $well-link; -} - // Override editable library background images -.editableform-loading, .editable-clear-x { - background: none !important; +.editableform-loading, +.editable-clear-x { + background: none !important; } .alert-link { diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss index 69666264..27bc6458 100644 --- a/app/assets/stylesheets/palette.scss +++ b/app/assets/stylesheets/palette.scss @@ -1,4 +1,3 @@ - // Extracted from: // https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_web_colors.scss // https://github.com/sul-dlss/sul_styles/blob/master/app/assets/stylesheets/sul-styles/su_primary_colors.scss @@ -8,7 +7,6 @@ $color-gray: #3f3c30; // $color-black: #000; // $color-beige-40: #d5d0c0; $color-beige-30: #e3dfd5; -$color-beige-20: #e9e6df; $color-beige-10: #f2f1eb; $color-beige-05: #fbfbf9; -// $color-pantone-401: #b6b1a9; \ No newline at end of file +// $color-pantone-401: #b6b1a9; diff --git a/app/assets/stylesheets/top-navbar.scss b/app/assets/stylesheets/top-navbar.scss index de8f42db..cbd8802e 100644 --- a/app/assets/stylesheets/top-navbar.scss +++ b/app/assets/stylesheets/top-navbar.scss @@ -16,35 +16,33 @@ #topnav-container { background-color: $brand-primary; height: $brandbar-height; - + .row { width: 100%; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { height: $brandbar-collapsed-height; } .navbar-brand { - @extend .text-hide; - height: $brandbar-height; margin-left: 0; padding: 0; - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { height: $brandbar-collapsed-height; } img { height: $brandbar-height; - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { height: $brandbar-collapsed-height; } } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { margin-left: 15px; } } @@ -54,7 +52,7 @@ z-index: $zindex-dropdown; a { - color: lighten($gray-base, 86%);; + color: lighten($gray-base, 86%); } } diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 5c45c5b3..a387ccb7 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -3,7 +3,6 @@ $sul-footer-bg-color: $color-beige-10; $gray-base: #000; $gray-dark: lighten($gray-base, 20%); $link-color: $gray-dark; -$dark-orange: #925b20; $nav-color: #fbfbf9; $brand-primary: $color-cardinal-red; @@ -13,10 +12,12 @@ $pagination-active-border: #696969; // BS4 syntax for changing primary theme colors $theme-colors: ( "primary": $color-cardinal-red, + "secondary": #6c757d, + "danger": $color-cardinal-red, ); // 1rem = 16px in BS4. .94 approximates the previous font size which was specified as 15px -$font-size-base: .94rem; +$font-size-base: 0.94rem; $line-height-base: 1.5; $btn-default-color: $color-gray; @@ -35,7 +36,8 @@ $font-size-h4: floor(($font-size-base * 1.2)); $headings-font-weight: 100; $body-bg: $color-beige-05; -$font-family-sans-serif: 'Source Sans Pro', 'Arial Unicode MS', Helvetica, sans-serif; +$font-family-sans-serif: "Source Sans Pro", "Arial Unicode MS", Helvetica, + sans-serif; $txt-color: $gray-base; $gray-41-percent: #696969; @@ -43,15 +45,11 @@ $sul-focus-outline: #eaab00; $navbar-default-link-color: $color-cardinal-red; -$well-bg: $color-beige-10; -$well-border: $color-beige-20; -$well-link: $dark-orange; - $breadcrumb-active-color: inherit; $breadcrumb-bg: inherit; $breadcrumb-color: inherit; $breadcrumb-padding-horizontal: 0; -$breadcrumb-separator: '»'; +$breadcrumb-separator: "»"; //@at-root: $brand-primary; $navbar-inverse-border: $color-dark-red; @@ -68,7 +66,6 @@ $top-nav-bar-height: 35px; $brandbar-collapsed-height: 50px; $brandbar-height: 100px; $brandbar-padding-vertical: (($brandbar-height - $line-height-base) * 0.5); -$sul-shadow-color: rgba(0, 0, 0, .2); +$sul-shadow-color: rgba(0, 0, 0, 0.2); $input-height-base: $input-height; - diff --git a/app/javascript/application.js b/app/javascript/application.js index 4607cc65..6a09d95a 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,15 +1,10 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "controllers" -import "popper.js" - -import jquery from 'jquery' -window.$ = jquery - +import * as Popper from "@popperjs/core" import "bootstrap" import "@hotwired/turbo-rails" window.addEventListener("load", function() { - jquery('[data-toggle="tooltip"]').tooltip({ - trigger: 'hover' - }); -}); \ No newline at end of file + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) +}); diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e2a8e88f..01686223 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -33,7 +33,7 @@
<%= render 'shared/top_navbar' %> -
+
<%= breadcrumbs style: :bootstrap4 %> <%= render 'shared/global_alert' %> <%= render 'shared/flashes' %> diff --git a/app/views/libraries/_location_hours.html.erb b/app/views/libraries/_location_hours.html.erb index 5cf2f317..007d9011 100644 --- a/app/views/libraries/_location_hours.html.erb +++ b/app/views/libraries/_location_hours.html.erb @@ -23,7 +23,7 @@ <% calendars.each do |d| %> - "> + "> <%= render 'calendars/time', calendar: d %> <% end %> diff --git a/app/views/libraries/_range.html.erb b/app/views/libraries/_range.html.erb index 5b77fdc7..39dfeb1f 100644 --- a/app/views/libraries/_range.html.erb +++ b/app/views/libraries/_range.html.erb @@ -5,7 +5,7 @@ Previous <% end unless @range.begin.before?(24.months.ago)%> -

<%= l(@range.begin, format: :short) %> – <%= l(@range.end, format: :short) %>

+

<%= l(@range.begin, format: :short) %> – <%= l(@range.end, format: :short) %>

<%= link_to params.to_unsafe_h.merge(week: (@range.begin + 1.week + 1.day).strftime("%GW%V")) do %> Next @@ -13,21 +13,20 @@
-
- + +
"/> -
- -
+ +
- +

Jump to quarters & holidays

-
- +
- +
diff --git a/app/views/shared/_nav_link_list.html.erb b/app/views/shared/_nav_link_list.html.erb index 7f0473be..d0dbfb7e 100644 --- a/app/views/shared/_nav_link_list.html.erb +++ b/app/views/shared/_nav_link_list.html.erb @@ -9,5 +9,5 @@ <% end %> <% end %>
  • > - <%= link_to 'Feedback', feedback_path, data: { toggle: 'collapse', target: '#feedback-form' } %> + <%= link_to 'Feedback', feedback_path, data: { bs_toggle: 'collapse', bs_target: '#feedback-form' } %>
    • diff --git a/app/views/shared/_top_navbar.html.erb b/app/views/shared/_top_navbar.html.erb index 042499a0..9e0e17ec 100644 --- a/app/views/shared/_top_navbar.html.erb +++ b/app/views/shared/_top_navbar.html.erb @@ -14,22 +14,20 @@