Fix some styles for Bootstrap 4 alpha 6

projectblacklight · Jan 9, 2017 · a1c17d7 · a1c17d7
1 parent a1bf568
commit a1c17d7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -12,9 +12,16 @@
   line-height: inherit;
 }
 
+.facet-limit {
+  margin-bottom: $spacer-y;
+
+  .card-block {
+    padding: $spacer;
+  }
+}
+
 .facet-limit-active {
   @extend .card-outline-success;
-  @extend .card-inverse;
 
   .card-header {
     @extend .card-success;
@@ -59,7 +66,7 @@
     padding-right: 1em;
     text-indent: -15px;
     padding-left: 15px;
-    padding-bottom: $spacer-y;
+    padding-bottom: $spacer-y / 2;
     @include hyphens-auto;
   }
 

diff --git a/app/views/catalog/_facets.html.erb b/app/views/catalog/_facets.html.erb
@@ -3,14 +3,16 @@
 <div id="facets" class="facets sidenav">
 
   <div class="top-panel-heading">
-    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#facet-panel-collapse" aria-controls="facet-panel-collapse" aria-expanded="false" aria-label="Toggle facets"></button>
+    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#facet-panel-collapse" aria-controls="facet-panel-collapse" aria-expanded="false" aria-label="Toggle facets">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
     <h2 class="facets-heading">
       <%= t('blacklight.search.facets.title') %>
     </h2>
   </div>
 
-  <div id="facet-panel-collapse" class="navbar-toggleable">
+  <div id="facet-panel-collapse" class="navbar-toggleable collapse"">
     <%= render_facet_partials %>
   </div>
 </div>

diff --git a/app/views/catalog/_index.html.erb b/app/views/catalog/_index.html.erb
@@ -1,6 +1,6 @@
 <% doc_presenter = index_presenter(document) %> 
 <%# default partial to display solr document fields in catalog index view -%>
-<dl class="document-metadata dl-horizontal dl-invert">
+<dl class="document-metadata row">
 
   <% index_fields(document).each do |field_name, field| -%>
     <% if should_render_index_field? document, field %>

diff --git a/app/views/catalog/_show.html.erb b/app/views/catalog/_show.html.erb
@@ -1,6 +1,6 @@
 <% doc_presenter = show_presenter(document) %>
 <%# default partial to display solr document fields in catalog show view -%>
-<dl class="dl-horizontal  dl-invert">
+<dl class="row">
   <% document_show_fields(document).each do |field_name, field| -%>
     <% if should_render_show_field? document, field %>
 	    <dt class="blacklight-<%= field_name.parameterize %> col-md-3"><%= render_document_show_field_label document, field: field_name %></dt>

diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
@@ -1,16 +1,18 @@
-<nav id="header-navbar" class="navbar navbar-dark bg-inverse navbar-full" role="navigation">
+<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse" role="navigation">
   <div class="<%= container_classes %>">
-    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation"></button>
+    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
 
     <%= link_to application_name, root_path, class: "navbar-brand" %>
 
-    <div class="collapse navbar-toggleable float-md-right" id="user-util-collapse">
+    <div class="collapse navbar-collapse justify-content-md-end" id="user-util-collapse">
       <%= render 'shared/user_util_links' %>
     </div>
   </div>
 </nav>
 
-<div id="search-navbar" class="navbar-search navbar navbar-light bg-faded navbar-full" role="navigation">
+<div class="navbar-search navbar navbar-light bg-faded" role="navigation">
   <div class="<%= container_classes %>">
     <%= render_search_bar  %>
   </div>