Fix sidebar search, post bootstrap

NatLibFi · Apr 28, 2022 · 46a8b00 · 46a8b00
1 parent fc1bd5a
commit 46a8b00
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 9 deletions.
diff --git a/resource/css/styles.css b/resource/css/styles.css
@@ -230,6 +230,12 @@ ul {
   margin: 0 !important;
 }
 
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
 @media print { /* Quick style sheet for printing. */
   body * {
     visibility: hidden;
@@ -579,6 +585,11 @@ ul.dropdown-menu > li:last-child > input {
   padding: 3px 20px;
 }
 
+.multiselect-selected-text::after {
+  content: " ";
+  white-space: pre;
+}
+
 .form-check-input:checked {
   background-color: #398ee7;
 }
@@ -1184,24 +1195,52 @@ span.xl-pref-label > img {
   color: var(--gray-900);
 }
 
-.search-options > .input-group > .btn-group {
+.search-options > .input-group > .multiselect-native-select > .btn-group {
   display: block;
 }
 
-.search-options > .input-group > .btn-group > .multiselect {
+.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect {
   background-color: var(--white-color);
   border: 1px solid var(--gray-500);
   overflow-y: hidden;
 }
 
-.search-options > .input-group > .btn-group > .multiselect-container {
+.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect:focus {
+  background-color: var(--white-color) !important;
+  border: 1px solid var(--gray-500);
+  overflow-y: hidden;
+}
+
+.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container {
   top: 44px;
 }
 
-.search-options > .input-group > .btn-group > .multiselect-container > li:first-of-type > * {
+.search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container > li:first-of-type > * {
   height: 26px;
 }
 
+.search-options > .input-group > .multiselect-native-select > .dropdown > .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: .255em;
+  vertical-align: .255em;
+  content: "";
+  border-top: .3em solid var(--dark-color);
+  border-right: .3em solid  var(--white-color);
+  border-bottom: 0 solid var(--dark-color);
+  border-left: .3em solid var(--white-color);
+}
+
+.search-options > .input-group > .multiselect-native-select > .dropdown > .dropdown-toggle:focus::after {
+  display: inline-block;
+  margin-left: .255em;
+  vertical-align: .255em;
+  content: "";
+  border-top: .3em solid var(--dark-color);
+  border-right: .3em solid  var(--white-color);
+  border-bottom: 0 solid var(--dark-color);
+  border-left: .3em solid var(--white-color);
+}
+
 .multiselect-container li {
   min-height: 26px;
 }
@@ -1272,6 +1311,7 @@ div#sidebar-grey > div > div > form.search-options {
 
 .search-options {
   padding-left: 15px;
+  padding-right: 15px;
 }
 
 .search-options > .input-group * {
@@ -2055,7 +2095,7 @@ span.date-info {
   font-size: var(--font-size);
 }
 
-.search-options > div.input-group > .twitter-typeahead, .search-options > div.input-group > .twitter-typeahead > .tt-menu, .search-options > .input-group > .btn-group > * {
+.search-options > div.input-group > .twitter-typeahead, .search-options > div.input-group > .twitter-typeahead > .tt-menu, .search-options > .input-group > .multiselect-native-select > .btn-group > * {
   width: 280px;
 }
 
@@ -2527,11 +2567,11 @@ body, .versal, h1, h2, h3, p, .versal-bold {
     height: calc(100% - 150px) !important;
   }
 
-  .sidebar-grey > .search-options > .input-group > .btn-group > .multiselect {
+  .sidebar-grey > .search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect {
     width: 370px;
   }
 
-  .sidebar-grey > .search-options > .input-group > .btn-group > .multiselect-container {
+  .sidebar-grey > .search-options > .input-group > .multiselect-native-select > .btn-group > .multiselect-container {
     width: 370px;
   }
 

diff --git a/resource/js/docready.js b/resource/js/docready.js
@@ -1011,7 +1011,7 @@ $(function() { // DOCUMENT READY
 
   $('.sidebar-grey .multiselect').multiselect({
     buttonText: function(options) {
-      if (options.length === 0) {
+      if (options.length === 0 || options.length === ($('.sidebar-grey .multiselect-container li').length - 1)) {
         return  '';
       } else {
         var selected = '';
@@ -1024,6 +1024,13 @@ $(function() { // DOCUMENT READY
     },
     numberDisplayed: 2,
     buttonWidth: 'auto',
+    buttonClass: 'btn btn-secondary',
+    buttonContainer : '<div class="dropdown btn-group" aria-role="group" aria-label="" />',
+    templates: {
+      ul: '<ul class="multiselect-container dropdown-menu p-1 m-0"></ul>',
+      li: '<button class="multiselect-option dropdown-item"></button>',
+      button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
+    },
     onDropdownShown: function(event) {
       var $activeChild = $(event.currentTarget).find('.active');
       $('.multiselect-container').mCustomScrollbar('scrollTo', $activeChild);

diff --git a/view/light.twig b/view/light.twig
@@ -167,7 +167,7 @@
           <div class="input-group">
             <label for="parent-limit" class="versal form-label">{% trans "By parent" %}</label><input type="text" id="parent-limit" class="form-control" value="{{ limit_parent }}">
           </div>
-          <button type="button submit" class="btn btn-default">{% trans "Limit search" %}</button>
+          <button type="submit" class="btn btn-default">{% trans "Limit search" %}</button>
         </form>
         {% endif %}
       </div>