re-class prev/next widget buttons for legibility in searchPag

- add an onclick to permit Durst nested dropdown to function - add a btn-splash variant to clean up Durst and IFP
cul · Apr 5, 2024 · 1e1c85c · 1e1c85c
1 parent 538f142
commit 1e1c85c
Show file tree

Hide file tree

Showing 16 changed files with 164 additions and 155 deletions.
diff --git a/app/assets/stylesheets/stylesheets/_base_layout.scss b/app/assets/stylesheets/stylesheets/_base_layout.scss
@@ -62,12 +62,6 @@
 	white-space: nowrap;
 }
 
-%active_pagination_ui {
-	@extend .bg-info;
-  color: map-get($theme-text-colors, "info");
-	border-color: $info;
-}
-
 @each $color, $value in $theme-colors {
   .swatch-#{$color} {
     background-color: $value;
@@ -272,20 +266,12 @@ a {
 			color:map-get($theme-text-colors, 'primary');
 			border-color: map-get($theme-border-colors, 'primary');
 		}
-		.btn-left {
-			border-top-left-radius:0.25rem;
-			border-bottom-left-radius:0.25rem;
-		}
 	}
 	.input-group-append {
 		padding-top: 0;
 		padding-bottom: 0;
 		margin-top: 0;
 		margin-bottom: 0;
-		.btn {
-			border-top-right-radius:0.25rem;
-			border-bottom-right-radius:0.25rem;
-		}
 	}
 
 	#q-filter, .search_q {
@@ -1107,46 +1093,6 @@ h2[itemprop="name"] {
 			background-color: transparent;
 		}
 	}
-	.active > {
-		.page-link {
-			@extend %active_pagination_ui;
-			&:hover {
-				@extend %active_pagination_ui;
-			}
-			&:focus {
-				@extend %active_pagination_ui;
-			}
-		}
-		span {
-			@extend %active_pagination_ui;
-			&:hover {
-				@extend %active_pagination_ui;
-			}
-			&:focus {
-				@extend %active_pagination_ui;
-			}
-		}
-	}
-	.disabled > {
-		span {
-			background-color: transparent;
-			&:hover {
-				background-color: $color_disabled_background;
-			}
-			&:focus {
-				background-color: $color_disabled_background;
-			}
-		}
-		.page-link {
-			background-color: transparent;
-			&:hover {
-				background-color: $color_disabled_background;
-			}
-			&:focus {
-				background-color: $color_disabled_background;
-			}
-		}
-	}
 }
 
 /******************
@@ -1157,10 +1103,6 @@ h2[itemprop="name"] {
 	padding-bottom: 1em;
 	margin-bottom: 0 !important;
 	border-bottom: 0 !important;
-	a.previous, a.next {
-		@extend .btn;
-		@extend .btn-outline-secondary;
-	}
 }
 
 #child-viewer {

diff --git a/app/assets/stylesheets/stylesheets/_bootstrap_layout.scss b/app/assets/stylesheets/stylesheets/_bootstrap_layout.scss
@@ -42,6 +42,15 @@
   }
 	height: 0;
 }
+
+.btn-splash {
+  @include button-variant($primary, $primary, darken($primary, 7.5%), darken($primary, 10%), darken($primary, 10%), darken($primary, 12.5%));
+}
+
+.btn-outline-splash {
+  @include button-outline-variant($primary, color-yiq($primary), $primary, $primary);
+}
+
 /* make collapse toggles that are expanded look like active buttons */
 .btn-info[data-toggle='collapse'][aria-expanded='true'] {
     color: color-yiq(darken(map-get($theme-colors, 'info'), 10%));

diff --git a/app/assets/stylesheets/stylesheets/durst/durst.scss b/app/assets/stylesheets/stylesheets/durst/durst.scss
@@ -1,32 +1,56 @@
+@import '../palettes/monochrome';
+@import 'bootstrap/scss/mixins';
 //colors
 $color_21: #ddd;
 $splash: #591300;
-$splash-color: #fff;
-$splash-hover: #6a2400;
+$splash-border: $splash;
+$splash-color: color-yiq($splash);
+$splash-hover-background: lighten($splash, 7.5%);
+$splash-hover-border: lighten($splash, 10%);
+$splash-active-background: lighten($splash, 10%);
+$splash-active-border: lighten($splash, 12.5%);
 .durst {
-	.btn-primary, #site-banner .search-btn {
-		background: $splash !important;
-		color: $splash-color;
-		&:hover {
-			background: $splash-hover !important;
+	.btn-splash {
+		@include button-variant($splash, $splash-border, $splash-hover-background, $splash-hover-border, $splash-active-background, $splash-active-border);
+	}
+	.btn-outline-splash {
+		@include button-outline-variant($splash, $splash-color, $splash, $splash,);
+	}
+	.show > .btn-splash, .show > .btn-outline-splash {
+		// we reproduce this because the button-variant mixin builds the .show selector above .durst
+		&.dropdown-toggle {
+			color: color-yiq($splash-active-background);
+			@include gradient-bg($splash-active-background);
+			@if $enable-gradients {
+				background-image: none; // Remove the gradient for the pressed/active state
+			}
+			border-color: $splash-active-border;
+
+			&:focus {
+				@if $enable-shadows and $btn-active-box-shadow != none {
+					@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($splash-color, $splash-border, 15%), .5));
+			 	} @else {
+					// Avoid using mixin so we can pass custom focus shadow properly
+					box-shadow: 0 0 0 $btn-focus-width rgba(mix($splash-color, $splash-border, 15%), .5);
+				}
+			}
 		}
 	}
+
 	#main-container {
 		a {
 			&:not(.btn, .page-link, [role='button']) {
 				color: $splash;	
 				&:hover {
-					color: $splash-hover;
+					color: lighten($splash, 10%);
 				}			
 			}
 		}
-		.inner {
-			&.home {
-				#facets {
-					margin-left:0;
-					margin-right:0;
-					border:0;
-				}
+		.home {
+			#facets {
+				margin-left:0;
+				margin-right:0;
+				border:0;
 			}
 		}
 	}

diff --git a/app/assets/stylesheets/stylesheets/ifp/ifp.css.scss b/app/assets/stylesheets/stylesheets/ifp/ifp.css.scss
@@ -1,10 +1,16 @@
 @import '../palettes/monochrome';
 @import '../signature/fonts';
+@import 'bootstrap/scss/mixins';
 
 //colors
-$splash: #2a778f;
 $gray: #888;
-$splash-color: #fff;
+$splash: #2a778f;
+$splash-border: $splash;
+$splash-color: color-yiq($splash);
+$splash-hover-background: lighten($splash, 7.5%);
+$splash-hover-border: lighten($splash, 10%);
+$splash-active-background: lighten($splash, 10%);
+$splash-active-border: lighten($splash, 12.5%);
 
 //urls
 $url_logo: url("ifp/IFP-square-logo.png");
@@ -18,6 +24,32 @@ $url_flag_sprite: url("ifp/office-flags/country_flag_folders_sm.png");
 }
 
 .ifp {
+	.btn-splash {
+		@include button-variant($splash, $splash);
+	}
+	.btn-outline-splash {
+		@include button-outline-variant($splash);
+	}
+	.show > .btn-splash, .show > .btn-outline-splash {
+		// we reproduce this because the button-variant mixin builds the .show selector above .ifp
+		&.dropdown-toggle {
+			color: color-yiq($splash-active-background);
+			@include gradient-bg($splash-active-background);
+			@if $enable-gradients {
+				background-image: none; // Remove the gradient for the pressed/active state
+			}
+			border-color: $splash-active-border;
+
+			&:focus {
+				@if $enable-shadows and $btn-active-box-shadow != none {
+					@include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($splash-color, $splash-border, 15%), .5));
+			 	} @else {
+					// Avoid using mixin so we can pass custom focus shadow properly
+					box-shadow: 0 0 0 $btn-focus-width rgba(mix($splash-color, $splash-border, 15%), .5);
+				}
+			}
+		}
+	}
 	#secondary-nav {
 	}
 	#main-container {

diff --git a/app/components/dcv/search_bar/catalog_component.html.erb b/app/components/dcv/search_bar/catalog_component.html.erb
@@ -3,20 +3,20 @@
 
     <div class="input-group flex-sm-row flex-md-fill">
       <%= render pagination_component %>
-      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
-      <% unless search_fields.empty? %>
-        <span class="input-group-append">
-          <%= hidden_field_tag(:search_field, h(params[:search_field] || search_fields.first[1]), :title => t('blacklight.search.form.search_field.title')) %>
-        </span>
-      <% end %>
-      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill", :id => "q", aria: { label: t('blacklight.search.form.search.label')} %>
-      <div class="input-group-append">
-        <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
-        <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
-          <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
-          <span class="fa fa-search"></span>
-        </button>
-      </div>
+      <div class="input-group-prepend collapseSearch flex-fill p-0<%= ' collapse' if pagination_component.render?%>" id="collapseQuery">
+        <% unless search_fields.empty? %>
+          <span class="input-group-append">
+            <%= hidden_field_tag(:search_field, h(params[:search_field] || search_fields.first[1]), :title => t('blacklight.search.form.search_field.title')) %>
+          </span>
+        <% end %>
+        <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill bg-white", :id => "q", aria: { label: t('blacklight.search.form.search.label')} %>
+        <div class="input-group-append">
+          <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
+          <button class="btn btn-splash rounded-right" type="submit" aria-label="Submit">
+            <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
+            <span class="fa fa-search"></span>
+          </button>
+        </div>
       </div>
     </div>
 

diff --git a/app/components/dcv/search_bar/default_component.html.erb b/app/components/dcv/search_bar/default_component.html.erb
@@ -3,31 +3,31 @@
     <%= render_hash_as_hidden_fields(search_action_params) %>
     <div class="input-group flex-sm-row flex-md-fill">
       <%= render pagination_component %>
-      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
-      <% unless search_fields.empty? %>
-        <span class="input-group-append p-0<%= ' hidden' if search_fields.length == 1 %>">
-          <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
-          <%= select_tag(
-              :search_field,
-              options_for_select(
-                search_fields,
-                h(params[:search_field])
-              ),
-              title: t('blacklight.search.form.search_field.title'), class: 'btn search-btn btn-primary rounded-0'
-            )
-          %>
-          <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
-        </span>
-      <% end %>
-      <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-      <%= text_field_tag :q, params[:q], :placeholder => search_placeholder_text, :class => "search_q q flex-fill", :id => "q" %>
-      <div class="input-group-append">
-        <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-outline-secondary reset-btn' if query_has_constraints? %>
-        <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
-          <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
-          <span class="fa fa-search"></span>
-        </button>
-      </div>
+      <div class="input-group-prepend collapseSearch flex-fill p-0<%= ' collapse' if pagination_component.render?%>" id="collapseQuery">
+        <% unless search_fields.empty? %>
+          <span class="input-group-append p-0<%= ' hidden' if search_fields.length == 1 %>">
+            <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
+            <%= select_tag(
+                :search_field,
+                options_for_select(
+                  search_fields,
+                  h(params[:search_field])
+                ),
+                title: t('blacklight.search.form.search_field.title'), class: 'btn search-btn btn-primary rounded-0'
+              )
+            %>
+            <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
+          </span>
+        <% end %>
+        <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
+        <%= text_field_tag :q, params[:q], :placeholder => search_placeholder_text, :class => "search_q q flex-fill bg-white", :id => "q" %>
+        <div class="input-group-append">
+          <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn bg-body btn-outline-info reset-btn' if query_has_constraints? %>
+          <button class="btn btn-splash" type="submit" aria-label="Submit">
+            <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
+            <span class="fa fa-search"></span>
+          </button>
+        </div>
       </div>
     </div>
 

diff --git a/app/components/dcv/search_bar/durst_component.html.erb b/app/components/dcv/search_bar/durst_component.html.erb
@@ -6,27 +6,29 @@
 
     <div class="input-group flex-sm-row flex-md-fill">
       <%= render pagination_component %>
-      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
-      <input type="hidden" name="search_field" value="all_text_teim">
-        <button id="format_type_select" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Formats
-          <span class="caret"></span>
-          <span class="sr-only">Toggle Dropdown</span>
-        </button>
-            <ul id="format_filter" class="dropdown-menu dropdown-menu-left" role="menu">
-              <li>Limit search to:</li>
-              <% durst_format_list.each do | key, display_label | %>
-                <li><input type="checkbox" name="f[lib_format_sim][]" <%= (params[:f] && params[:f]['lib_format_sim'] && params[:f]['lib_format_sim'].include?(key)) ? 'checked="checked"' : '' %> value="<%= key %>"> <%= display_label %></li>
-              <% end %>
-            </ul>
-      </div>
-      <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ? 'Search Postcards, Maps, Photographs, Books, Etc&hellip;'.html_safe : 'Modify current search&hellip;'.html_safe), :class => "search_q q flex-fill", :id => "q", :tabindex => "1" %>
-      <div class="input-group-append">
-        <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
-        <button class="btn btn-primary search-btn" type="submit">
-          <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
-          <span class="fa fa-search"></span>
-        </button>
+      <div class="input-group-prepend collapseSearch flex-fill p-0<%= ' collapse' if pagination_component.render?%>" id="collapseQuery" data-collapse-group="searchPag">
+        <input type="hidden" name="search_field" value="all_text_teim">
+        <div class="btn-group dropdown">
+          <button id="format_type_select" type="button" class="btn btn-splash dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick="$(this).dropdown(); return false;" aria-controls="format_filter" aria-pressed="false" data-reference="parent">Formats
+            <span class="caret"></span>
+            <span class="sr-only">Toggle Dropdown</span>
+          </button>
+          <ul id="format_filter" class="dropdown-menu dropdown-menu-left hide" role="menu">
+            <li>Limit search to:</li>
+            <% durst_format_list.each do | key, display_label | %>
+              <li><input type="checkbox" name="f[lib_format_sim][]" <%= (params[:f] && params[:f]['lib_format_sim'] && params[:f]['lib_format_sim'].include?(key)) ? 'checked="checked"' : '' %> value="<%= key %>"> <%= display_label %></li>
+            <% end %>
+          </ul>
+        </div>
+        <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
+        <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ? 'Search Postcards, Maps, Photographs, Books, Etc&hellip;'.html_safe : 'Modify current search&hellip;'.html_safe), :class => "search_q q flex-fill bg-white", :id => "q", :tabindex => "1" %>
+        <div class="input-group-append">
+          <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
+          <button class="btn btn-splash" type="submit">
+            <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
+            <span class="fa fa-search"></span>
+          </button>
+        </div>
       </div>
     </div>
 

diff --git a/app/components/dcv/search_bar/repositories_component.html.erb b/app/components/dcv/search_bar/repositories_component.html.erb
@@ -3,7 +3,7 @@
 
   <div class="input-group flex-fill">
     <%= render pagination_component %>
-    <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
+    <div class="input-group-prepend collapseSearch flex-fill p-0<%= ' collapse' if pagination_component.render?%>" id="collapseQuery">
     <% unless search_fields.empty? %>
     <span class="input-group-prepend hidden"> <%# to be removed. might need hidde %>
       <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
@@ -12,9 +12,9 @@
     </span>
     <% end %>
     <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-    <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill", :id => "q" %>
+    <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill bg-white", :id => "q" %>
     <div class="input-group-append">
-  <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
+      <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
       <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
         <span class="fa fa-search"></span>
       </button>