Skip to content

Commit

Permalink
Bootstrap 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcoyne
jcoyne committed Aug 21, 2024
1 parent 20f3898 commit f885364
Show file tree
Hide file tree
Showing 23 changed files with 107 additions and 155 deletions.
10 changes: 4 additions & 6 deletions app/assets/stylesheets/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
}
}

a:hover, a:focus {
a:hover,
a:focus {
text-decoration: underline;
}

li {
a {
&:hover, &:focus {
&:hover,
&:focus {
border-bottom: 0;
}
}
Expand All @@ -37,10 +39,6 @@ textarea:focus {
@include focus-outline;
}

#main-container {
padding-bottom: $form-group-margin-bottom;
}

.location-and-access {
padding-right: 1ch;
}
Expand Down
8 changes: 1 addition & 7 deletions app/assets/stylesheets/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,6 @@
border-bottom: 0;
}

#topnav,
#main-container {
margin: 0 auto;
text-align: left;
}

#main-container {
#main-flashes {
min-height: 0;
Expand Down Expand Up @@ -49,7 +43,7 @@
}
}

@media only screen and (max-width : 768px) {
@media only screen and (max-width: 768px) {
#main-container {
padding: 0 15px;
}
Expand Down
30 changes: 13 additions & 17 deletions app/assets/stylesheets/library_hours.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}

Expand All @@ -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 {
Expand All @@ -47,7 +46,7 @@ th.location-name {
td.hours,
th.hours {
width: 100px;
padding: .5rem;
padding: 0.5rem;
}

th.location-name,
Expand All @@ -56,7 +55,7 @@ th.hours {
}

td.exceptions {
// @extend .alert-info;
// @extend .alert-info;
}

td.holiday,
Expand All @@ -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 {
Expand Down
4 changes: 1 addition & 3 deletions app/assets/stylesheets/palette.scss
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;
// $color-pantone-401: #b6b1a9;
14 changes: 6 additions & 8 deletions app/assets/stylesheets/top-navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -54,7 +52,7 @@
z-index: $zindex-dropdown;

a {
color: lighten($gray-base, 86%);;
color: lighten($gray-base, 86%);
}
}

Expand Down
28 changes: 10 additions & 18 deletions app/assets/stylesheets/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@ $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;
$pagination-active-bg: #696969;
$pagination-active-border: #696969;

// BS4 syntax for changing primary theme colors
$theme-colors: (
$primary: $color-cardinal-red;
/* $theme-colors: (
"primary": $color-cardinal-red,
);
"secondary": #6c757d,
"success": #008566,
"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;
Expand All @@ -35,24 +37,15 @@ $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;
$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: '»';

//@at-root: $brand-primary;
$navbar-inverse-border: $color-dark-red;
$navbar-inverse-link-color: $link-color;
Expand All @@ -68,7 +61,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;

13 changes: 4 additions & 9 deletions app/javascript/application.js
View file
Original file line number Diff line number Diff line change
@@ -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'
});
});
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});
6 changes: 3 additions & 3 deletions app/views/calendars/_form.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<% url = calendar.persisted? ? library_location_calendar_path(calendar.library, calendar.location, calendar) : library_location_calendars_path(calendar.location.library, calendar.location, day: calendar.date) %>

<%= form_with model: calendar,
<%= form_with model: calendar,
url: url,
class: 'form-inline' do |f| %>
<% if f.object.errors.any? %>
<p class="alert alert-danger"><%= to_sentence f.object.errors.full_messages %></p>
<% end %>
<div class="row" style="width: 14em; white-space:nobreak">
<div class="input-group" style="width: 14em; white-space:nobreak">
<%= text_field_tag 'date[time]', f.object.to_text, class: 'form-control', style: 'width: 8em' %>
<%= f.hidden_field :date, name: 'day' %>
<%= button_tag class: 'btn btn-primary' do %>
Expand All @@ -16,4 +16,4 @@
<i class="fas fa-times"></i>
<% end %>
</div>
<% end%>
<% end%>
4 changes: 2 additions & 2 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
<div id="su-content"> <!-- #su-content start -->
<div id="outer-container" class="container-fluid">
<%= render 'shared/top_navbar' %>
<section id="main-container" role="main" class="container">
<%= breadcrumbs style: :bootstrap4 %>
<section id="main-container" role="main" class="container pt-2 pb-3">
<%= breadcrumbs style: :bootstrap5 %>
<%= render 'shared/global_alert' %>
<%= render 'shared/flashes' %>
<%= yield %>
Expand Down
22 changes: 12 additions & 10 deletions app/views/libraries/_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,35 @@
</div>
<% end %>

<div class="form-group">
<%= form.label :name, "Name:" %>
<div class="mb-3">
<%= form.label :name, "Name:", class: 'form-label' %>
<%= form.text_field :name, class: 'form-control'%>
</div>

<div class="form-group">
<%= form.label :about_url %>
<div class="mb-3">
<%= form.label :about_url, class: 'form-label' %>
<%= form.text_field :about_url, class: 'form-control' %>
</div>
<div class="form-group">
<%= form.label :slug, "Slug:" %>

<div class="mb-3">
<%= form.label :slug, "Slug:", class: 'form-label' %>
<%= form.text_field :slug, class: 'form-control' %>
</div>

<div class="form-check">
<%= form.check_box :public, class: "form-check-input" %>
<%= form.label :public, "Display on home page", class: "form-check-label" %>
</div>

<h4>Library's Locations:</h4>

<ul data-nested-form-target="addItem">
<%= form.fields_for :locations do |locations_form| %>
<li class="inner-container">
<%= locations_form.label :name, "Name:", required: true %>
<%= locations_form.text_field :name, class: 'form-control'%>
<div class="mb-3">
<%= locations_form.label :name, "Name:", required: true, class: 'form-label' %>
<%= locations_form.text_field :name, class: 'form-control'%>
</div>
<div class="form-check">
<%= locations_form.check_box :keeps_hours, class: "form-check-input" %>
<%= locations_form.label :keeps_hours, "Keeps hours", class: "form-check-label" %>
Expand Down
4 changes: 2 additions & 2 deletions app/views/libraries/_location_hours.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="editable-error-block"></div>
<thead>
<tr>
<th class="location-name"><span class='sr-only'>Location</span></th>
<th class="location-name"><span class='visually-hidden'>Location</span></th>
<% @range.to_a.each do |d| %>
<th class="hours <%= 'holiday' if Term.holiday? d %>">
<% if Term.holiday? d %>
Expand All @@ -23,7 +23,7 @@
<span itemprop="validFrom" content="<%= l calendars.first.date %>" aria-hidden="true"></span>
<span itemprop="validThrough" content="<%= l calendars.first.date %>" aria-hidden="true"></span>
<% calendars.each do |d| %>
<span data-toggle="tooltip" data-placement="left" title="<%= [d.summary, d.description].reject(&:blank?).compact.join(" / ") %>">
<span data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="<%= [d.summary, d.description].reject(&:blank?).compact.join(" / ") %>">
<%= render 'calendars/time', calendar: d %>
</span>
<% end %>
Expand Down
Loading

0 comments on commit f885364

Please sign in to comment.