fix: search controls no longer wrap for an improved mobile experience. (

vufind-org#4033)
effective-webwork · Oct 23, 2024 · 8028edc · 8028edc
1 parent 39708dc
commit 8028edc
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 15 deletions.
diff --git a/themes/bootprint3/css/compiled.css b/themes/bootprint3/css/compiled.css
diff --git a/themes/bootstrap3/css/compiled.css b/themes/bootstrap3/css/compiled.css
diff --git a/themes/bootstrap3/less/components/search.less b/themes/bootstrap3/less/components/search.less
@@ -98,11 +98,17 @@ $thumbnail-width-large:  160px !default;
 
 header .container.navbar { margin-bottom: 0; }
 
-.search-sort, .search-result-limit { display: flex; }
-.search-sort label, .search-result-limit label {
+.search-sort,
+.search-result-limit {
+  display: flex;
+  gap: 0.5rem;
+}
+.search-sort label,
+.search-result-limit label {
+  white-space: nowrap;
   line-height: @input-height-base;
-  padding-right: .5rem;
 }
+
 .search-stats {
   display: block;
   padding-top: 0.5rem;

diff --git a/themes/bootstrap3/scss/components/search.scss b/themes/bootstrap3/scss/components/search.scss
@@ -98,11 +98,17 @@ $thumbnail-width-large:  160px !default;
 
 header .container.navbar { margin-bottom: 0; }
 
-.search-sort, .search-result-limit { display: flex; }
-.search-sort label, .search-result-limit label {
+.search-sort,
+.search-result-limit {
+  display: flex;
+  gap: 0.5rem;
+}
+.search-sort label,
+.search-result-limit label {
+  white-space: nowrap;
   line-height: $input-height-base;
-  padding-right: .5rem;
 }
+
 .search-stats {
   display: block;
   padding-top: 0.5rem;

diff --git a/themes/bootstrap5/css/compiled.css b/themes/bootstrap5/css/compiled.css
diff --git a/themes/bootstrap5/scss/components/search.scss b/themes/bootstrap5/scss/components/search.scss
@@ -98,11 +98,17 @@ $thumbnail-width-large:  160px !default;
 
 header .container.navbar { margin-bottom: 0; }
 
-.search-sort, .search-result-limit { display: flex; }
-.search-sort label, .search-result-limit label {
+.search-sort,
+.search-result-limit {
+  display: flex;
+  gap: 0.5rem;
+}
+.search-sort label,
+.search-result-limit label {
+  white-space: nowrap;
   line-height: $input-height-base;
-  padding-right: .5rem;
 }
+
 .search-stats {
   display: block;
   padding-top: 0.5rem;

diff --git a/themes/local_theme_example/css/compiled.css b/themes/local_theme_example/css/compiled.css
diff --git a/themes/sandal/css/compiled.css b/themes/sandal/css/compiled.css
diff --git a/themes/sandal5/css/compiled.css b/themes/sandal5/css/compiled.css