[7.x] use classes for css selectors

This is the behavior prefered by CSSLint and it makes it easier to override selectors downstream.
projectblacklight · Sep 8, 2016 · 1b9680c · 1b9680c
1 parent d34300d
commit 1b9680c
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 51 deletions.
diff --git a/app/assets/stylesheets/blacklight/_controls.scss b/app/assets/stylesheets/blacklight/_controls.scss
@@ -1,4 +1,5 @@
-#sortAndPerPage, .pagination-search-widgets {
+.sort-pagination,
+.pagination-search-widgets {
   border-bottom: 1px solid $pagination-border;
   margin-bottom: 1em;
   padding-bottom: 1em;
@@ -10,11 +11,11 @@
   padding-bottom: $padding-base-vertical;
 }
 
-#sortAndPerPage .dropdown-toggle {
+.sort-pagination .dropdown-toggle {
   cursor: pointer;
 }
 
-.no-js #sortAndPerPage {
+.no-js .sort-pagination {
   & {
     @extend .clearfix;
   }
@@ -37,7 +38,8 @@
   }
 }
 
-#sort-dropdown .dropdown-toggle, #per_page-dropdown .dropdown-toggle {
+.sort-dropdown .dropdown-toggle,
+.per-page-dropdown .dropdown-toggle {
   color: $link-color;
 
   .caret {

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -1,4 +1,5 @@
-#sidebar, #facets {
+.page-sidebar,
+.facets {
   @extend .clearfix;
   padding-bottom: $padding-large-vertical;
 }
@@ -8,7 +9,7 @@
 }
 
 .no-js {
-  #sidebar .collapse {
+  .page-sidebar .collapse {
     @extend .in;
   }  
 }
@@ -17,7 +18,7 @@
   @extend .panel-success;
 }
 
-#facet-panel-collapse {
+.facets > .collapse {
   @extend .navbar-collapse;
   padding-left: 0;
   padding-right: 0;
@@ -160,7 +161,7 @@ ul.facet_extended_list, .facet_extended_list ul
     margin-top: 3px;
   }
 
-  #facets .top-panel-heading {
+  .facets .top-panel-heading {
     border: 1px solid $breadcrumb-color;
     margin-bottom: 1em;
     @include border-bottom-radius($panel-border-radius - 1);

diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss
@@ -2,22 +2,20 @@
   Header bar at top (Bootstrap nav-bar)
 */
 
-#header-navbar {
-  .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-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;
 }
 
-#search-navbar {
+.navbar-search {
   z-index: 1;
 
   .input-group {

diff --git a/app/assets/stylesheets/blacklight/_modal.scss b/app/assets/stylesheets/blacklight/_modal.scss
@@ -1,29 +1,21 @@
-#ajax-modal {
-
-  .modal-content {
-    @extend .clearfix;
-  }
-
-  #email_form {
-    width: auto;
-  }
+.modal-content {
+  @extend .clearfix;
 
   .facet_pagination.top {
   	display: none;
   }
 
-  #sidebar {
+  .page-sidebar {
     display: none;
   }
 
-  button.close {
-	  display: block;
+  .ajax-modal-close {
+    display: block;
   }
 }
 
-
-/* app/views/catalog/facet.html.erb may be rendered as a modal or a whole page.
-   When it's a whole page, don't show the close button. */
-button.ajax-modal-close.close {
+// app/views/catalog/facet.html.erb may be rendered as a modal or a whole page.
+// When it's a whole page, don't show the close button.
+.ajax-modal-close {
 	display: none;
 }
diff --git a/app/assets/stylesheets/blacklight/_search_results.scss b/app/assets/stylesheets/blacklight/_search_results.scss
@@ -1,5 +1,5 @@
 // the search results on the index view of the catalog
-#documents {
+.documents-list {
   .document {
     margin-top: $padding-base-vertical;
     padding-top: $padding-base-vertical;

diff --git a/app/helpers/blacklight/layout_helper_behavior.rb b/app/helpers/blacklight/layout_helper_behavior.rb
@@ -29,7 +29,7 @@ def main_content_classes
     # Classes used for sizing the sidebar content of a Blacklight page
     # @return [String]
     def sidebar_classes
-      'col-md-3 col-sm-4'
+      'page-sidebar col-md-3 col-sm-4'
     end
 
     ##

diff --git a/app/views/catalog/_per_page_widget.html.erb b/app/views/catalog/_per_page_widget.html.erb
@@ -1,7 +1,6 @@
 <% if show_sort_and_per_page? and !blacklight_config.per_page.blank? %>
-
-  <span class="sr-only"><%= t('blacklight.search.per_page.title') %></span>
-<div id="per_page-dropdown" class="btn-group">
+<span class="sr-only"><%= t('blacklight.search.per_page.title') %></span>
+<div id="per_page-dropdown" class="per-page-dropdown btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
     <%= t(:'blacklight.search.per_page.button_label', :count => current_per_page) %> <span class="caret"></span>
   </button>

diff --git a/app/views/catalog/_sort_and_per_page.html.erb b/app/views/catalog/_sort_and_per_page.html.erb
@@ -1,4 +1,4 @@
-<div id="sortAndPerPage" class="clearfix">
-  <%= render :partial => "paginate_compact", :object => @response if show_pagination? %>
+<div id="sortAndPerPage" class="sort-pagination clearfix">
+  <%= render partial: "paginate_compact", object: @response if show_pagination? %>
   <%= render_results_collection_tools wrapping_class: "search-widgets pull-right" %>
 </div>
diff --git a/app/views/catalog/_sort_widget.html.erb b/app/views/catalog/_sort_widget.html.erb
@@ -1,5 +1,5 @@
 <% if show_sort_and_per_page? and !active_sort_fields.blank? %>
-<div id="sort-dropdown" class="btn-group">
+<div id="sort-dropdown" class="sort-dropdown btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       <%= t('blacklight.search.sort.label', :field =>current_sort_field.label) %> <span class="caret"></span>
   </button>

diff --git a/app/views/shared/_header_navbar.html.erb b/app/views/shared/_header_navbar.html.erb
@@ -1,4 +1,4 @@
-<div id="header-navbar" class="navbar navbar-inverse navbar-static-top" role="navigation">
+<nav id="header-navbar" class="navbar navbar-inverse navbar-static-top" role="navigation">
   <div class="<%= container_classes %>">
     <div class="navbar-header">
     <button type="button" class="navbar-toggle btn collapsed" data-toggle="collapse" data-target="#user-util-collapse">
@@ -14,9 +14,9 @@
       <%= render :partial=>'/user_util_links' %>
     </div>
   </div>
-</div>
+</nav>
 
-<div id="search-navbar" class="navbar navbar-default navbar-static-top" role="navigation">
+<div id="search-navbar" class="navbar-search navbar navbar-default navbar-static-top" role="navigation">
   <div class="<%= container_classes %>">
     <%= render_search_bar  %>
   </div>

diff --git a/spec/helpers/layout_helper_spec.rb b/spec/helpers/layout_helper_spec.rb
@@ -11,7 +11,7 @@
   describe '#show_sidebar_classes' do
     it 'returns a string of classes' do
       expect(helper.show_sidebar_classes).to be_an String
-      expect(helper.show_sidebar_classes).to eq 'col-md-3 col-sm-4'
+      expect(helper.show_sidebar_classes).to eq 'page-sidebar col-md-3 col-sm-4'
     end
   end
 
@@ -25,7 +25,7 @@
   describe '#sidebar_classes' do
     it 'returns a string of classes' do
       expect(helper.sidebar_classes).to be_an String
-      expect(helper.sidebar_classes).to eq 'col-md-3 col-sm-4'
+      expect(helper.sidebar_classes).to eq 'page-sidebar col-md-3 col-sm-4'
     end
   end