Update to use bootstrap 4 styles

projectblacklight · Sep 10, 2016 · 39b2ce9 · 39b2ce9
1 parent 77dd08e
commit 39b2ce9
Show file tree

Hide file tree

Showing 47 changed files with 142 additions and 224 deletions.
diff --git 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
@@ -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
@@ -1,6 +1,6 @@
 .dl-horizontal {
   dd {
-    margin-bottom: $padding-base-vertical;
+    margin-bottom: $spacer-y;
 
     &:after {
       clear: none;

diff --git 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
@@ -1,5 +1,5 @@
 .constraints-container {
-  @extend .well;
+  @extend .card;
   line-height: 2.5;
   padding: 16px 19px;
 }
@@ -14,25 +14,25 @@ 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;
     }
   }
@@ -43,7 +43,7 @@ span.constraints-label {
     /* glyphicon-chevron-right */
     content: "\e080";
     font-size: 70%;
-    padding-left: $caret-width-base;
+    padding-left: $caret-width;
   }
 
   .remove:hover, .remove:active {

diff --git a/app/assets/stylesheets/blacklight/_controls.scss b/app/assets/stylesheets/blacklight/_controls.scss
@@ -1,14 +1,14 @@
 .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;
 }
 
 .pagination-search-widgets {
   @extend .clearfix;
   padding-top: 1px;
-  padding-bottom: $padding-base-vertical;
+  padding-bottom: $spacer-y;
 }
 
 .sort-pagination .dropdown-toggle {
@@ -43,15 +43,15 @@
   color: $link-color;
 
   .caret {
-    color: $text-color;
+    color: $body-color;
   }
 }
 
 .search-input-group {
   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
@@ -1,42 +1,15 @@
 .page-sidebar,
 .facets {
   @extend .clearfix;
-  padding-bottom: $padding-large-vertical;
+  @extend .p-y-3;
 }
 
 .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-success;
 }
 
 .facet-values {
@@ -55,7 +28,7 @@
 
   .remove {
     @extend .text-muted;
-    text-indent: $padding-base-horizontal;
+    text-indent: $spacer-x;
 
     .glyphicon {
       top: 0.1em;
@@ -80,7 +53,7 @@
     padding-right: 1em;
     text-indent: -15px;
     padding-left: 15px;
-    padding-bottom: $padding-base-vertical;
+    padding-bottom: $spacer-y;
     @include hyphens-auto;
   }
 
@@ -107,11 +80,11 @@
 
 }
 
-.collapse-toggle {
-  cursor: pointer;
+.facet-field-heading {
+  margin-bottom: 0;
+  @extend .h6;
 }
-
-.panel-heading.collapse-toggle .panel-title:after {
+.card-heading.collapse-toggle .card-title:after {
     /* symbol for "opening" panels */
     font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
     content: "\e114";    /* adjust as needed, taken from bootstrap.css */
@@ -120,7 +93,8 @@
     font-size: 0.8em;
     line-height: normal;
 }
-.panel-heading.collapse-toggle.collapsed .panel-title:after {
+
+.card-heading.collapse-toggle.collapsed .card-title:after {
     /* symbol for "collapsed" panels */
     content: "\e080";    /* adjust as needed, taken from bootstrap.css */
 }
@@ -148,27 +122,14 @@
   }
 }
 
-@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 */
 
 .pivot-facet {
   @extend .list-unstyled;
 
   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
@@ -4,7 +4,7 @@
 
 .navbar-brand {  /* The main logo image for the Blacklight instance */
   width: 150px;
-  height: 50px;
+  height: 40px;
   background:transparent image_url($logo_image) no-repeat top left;
   display: inline-block;
   text-indent: 100%;
@@ -25,7 +25,7 @@
   .input-group-addon {
     &.for-search-field {
       background-color: $input-bg;
-      border-radius: $border-radius-base 0 0 $border-radius-base;
+      border-radius: $input-border-radius 0 0 $input-border-radius;
       width: 15ch;
     }
   }
@@ -42,7 +42,7 @@
   }
   .submit-search-text {
     // hide 'search' label at very small screens
-    @media screen and (max-width: $screen-xs-min ) {      
+    @media screen and (max-width: breakpoint-max(xs)) {      
       // copied from .sr-only, sadly can't seem to use @extend in a media
       // query like this, have to copy. 
       position: absolute;

diff --git a/app/assets/stylesheets/blacklight/_layout.scss b/app/assets/stylesheets/blacklight/_layout.scss
@@ -1,9 +1,5 @@
 /* Generic layout stuff */
 
-.navbar + .navbar {
-  margin-top: -$navbar-margin-bottom;
-}
-
 .navbar-inverse .navbar-toggle {
   &:focus, &:hover {
     border-color: $gray-light;

diff --git 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
@@ -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
@@ -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/views/_user_util_links.html.erb b/app/views/_user_util_links.html.erb
@@ -1,26 +1,22 @@
-<div class="navbar-right">
-  <ul class="nav navbar-nav">
-    <%= render_nav_actions do |config, action|%>
-      <li><%= action %></li>
-    <% end %>
-  </ul>
+<ul class="nav navbar-nav">
+  <%= render_nav_actions do |config, action|%>
+    <li class="nav-item"><%= action %></li>
+  <% end %>
 
   <% if has_user_authentication_provider? %>
-    <ul class="nav navbar-nav">
-      <% if current_user %>
-      <li>
-        <%= link_to t('blacklight.header_links.logout'), destroy_user_session_path %>
-      </li>
-      <% unless current_user.to_s.blank? -%>
-      <li>
-        <%= link_to current_user, edit_user_registration_path %>
-      </li>
-      <% end %>
-      <% else %>
-      <li>
-        <%= link_to t('blacklight.header_links.login'), new_user_session_path %>
-      </li>
-      <% end %>
-      </ul>
+    <% if current_user %>
+    <li class="nav-item">
+      <%= link_to t('blacklight.header_links.logout'), destroy_user_session_path, class: 'nav-link' %>
+    </li>
+    <% unless current_user.to_s.blank? -%>
+    <li class="nav-item">
+      <%= link_to current_user, edit_user_registration_path, class: 'nav-link' %>
+    </li>
+    <% end %>
+    <% else %>
+    <li class="nav-item">
+      <%= link_to t('blacklight.header_links.login'), new_user_session_path, class: 'nav-link' %>
+    </li>
+    <% end %>
   <% end %>
-</div>
+</ul>
diff --git 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') %>
 (<span data-role='bookmark-counter'><%= current_or_guest_user.bookmarks.count %></span>)
 <% end %>