ref #20188 [FID-BBI: re-construct adv. search]

* re-constructs original look of advanced search incl. recent BARF changes

themes/fid_bbi/js/advanced_search.js

-/* This is a copy of bootstrap3 version, changes in line 131, cf. #15409, DM */
-/*exported addGroup, addSearch, deleteGroup, deleteSearch */
-var nextGroup = 0;
-var groupLength = [];
-
-function addSearch(group, _fieldValues) {
-  var fieldValues = _fieldValues || {};
-  // Build the new search
-  var inputID = group + '_' + groupLength[group];
-  var $newSearch = $($('#new_search_template').html());
-
-  $newSearch.attr('id', 'search' + inputID);
-  $newSearch.find('input.form-control')
-    .attr('id', 'search_lookfor' + inputID)
-    .attr('name', 'lookfor' + group + '[]')
-    .val('');
-  $newSearch.find('select.adv-term-type option:first-child').attr('selected', 1);
-  $newSearch.find('select.adv-term-type')
-    .attr('id', 'search_type' + inputID)
-    .attr('name', 'type' + group + '[]');
-  $newSearch.find('.adv-term-remove')
-    .attr('onClick', 'return deleteSearch(' + group + ',' + groupLength[group] + ')');
-  // Preset Values
-  if (typeof fieldValues.term !== "undefined") {
-    $newSearch.find('input.form-control').val(fieldValues.term);
-  }
-  if (typeof fieldValues.field !== "undefined") {
-    $newSearch.find('select.adv-term-type option[value="' + fieldValues.field + '"]').attr('selected', 1);
-  }
-  if (typeof fieldValues.op !== "undefined") {
-    $newSearch.find('select.adv-term-op option[value="' + fieldValues.op + '"]').attr('selected', 1);
-  }
-  // Insert it
-  $("#group" + group + "Holder").before($newSearch);
-  // Individual search ops (for searches like EDS)
-  if (groupLength[group] === 0) {
-    $newSearch.find('.first-op')
-      .attr('name', 'op' + group + '[]')
-      .removeClass('hidden');
-    $newSearch.find('select.adv-term-op').remove();
-  } else {
-    $newSearch.find('select.adv-term-op')
-      .attr('id', 'search_op' + group + '_' + groupLength[group])
-      .attr('name', 'op' + group + '[]')
-      .removeClass('hidden');
-    $newSearch.find('.first-op').remove();
-    $newSearch.find('label').remove();
-    // Show x if we have more than one search inputs
-    $('#group' + group + ' .adv-term-remove').removeClass('hidden');
-  }
-  groupLength[group]++;
-  return false;
-}
-
-function deleteSearch(group, sindex) {
-  for (var i = sindex; i < groupLength[group] - 1; i++) {
-    var $search0 = $('#search' + group + '_' + i);
-    var $search1 = $('#search' + group + '_' + (i + 1));
-    $search0.find('input').val($search1.find('input').val());
-    var select0 = $search0.find('select')[0];
-    var select1 = $search1.find('select')[0];
-    select0.selectedIndex = select1.selectedIndex;
-  }
-  if (groupLength[group] > 1) {
-    groupLength[group]--;
-    $('#search' + group + '_' + groupLength[group]).remove();
-    if (groupLength[group] === 1) {
-      $('#group' + group + ' .adv-term-remove').addClass('hidden'); // Hide x
-    }
-  }
-  return false;
-}
-
-function addGroup(_firstTerm, _firstField, _join) {
-  var firstTerm = _firstTerm || '';
-  var firstField = _firstField || '';
-  var join = _join || '';
-
-  var $newGroup = $($('#new_group_template').html());
-  $newGroup.attr('id', 'group' + nextGroup);
-  $newGroup.find('.search_place_holder')
-    .attr('id', 'group' + nextGroup + 'Holder')
-    .removeClass('hidden');
-  $newGroup.find('.add_search_link')
-    .attr('id', 'add_search_link_' + nextGroup)
-    .attr('onClick', 'return addSearch(' + nextGroup + ')')
-    .removeClass('hidden');
-  $newGroup.find('.adv-group-close')
-    .attr('onClick', 'return deleteGroup(' + nextGroup + ')');
-  $newGroup.find('select.form-control')
-    .attr('id', 'search_bool' + nextGroup)
-    .attr('name', 'bool' + nextGroup + '[]');
-  $newGroup.find('.search_bool')
-    .attr('for', 'search_bool' + nextGroup);
-  if (join.length > 0) {
-    $newGroup.find('option[value="' + join + '"]').attr('selected', 1);
-  }
-  // Insert
-  $('#groupPlaceHolder').before($newGroup);
-  // Populate
-  groupLength[nextGroup] = 0;
-  addSearch(nextGroup, {term: firstTerm, field: firstField});
-  // Show join menu
-  if (nextGroup > 0) {
-    $('#groupJoin').removeClass('hidden');
-    // Show x
-    $('.adv-group-close').removeClass('hidden');
-  }
-  return nextGroup++;
-}
-
-function deleteGroup(group) {
-  // Find the group and remove it
-  $("#group" + group).remove();
-  // If the last group was removed, add an empty group
-  if ($('.adv-group').length === 0) {
-    addGroup();
-  } else if ($('#advSearchForm .adv-group').length === 1) {
-    $('#groupJoin').addClass('hidden'); // Hide join menu
-    $('.adv-group .adv-group-close').addClass('hidden'); // Hide x
-  }
-  return false;
-}
-
-$(document).ready(function advSearchReady() {
-  $('.clear-btn').click(function clearBtnClick() {
-    $('input[type="text"]').val('');
-    $("option:selected").removeAttr("selected");
-    $("#illustrated_-1").click();
-    /* reset date slider, cf #15409. Highly specialized solution, TODO: generalize */
-    $("#publishDateSortdateSlider").slider('setValue',[0,9999],'true');
-  });
-});

themes/fid_bbi/scss/blocks/advanced-search.scss

@@ -19,9 +19,9 @@
     margin-top: g();
 
     @media #{$bp3} {
+      bottom: g(1.5);
       position: absolute;
       right: g();
-      bottom: g(1.5);
     }
   }
 
@@ -31,8 +31,8 @@
 
   .adv-group-match {
     border-top: 2px solid;
-    padding-top: g() - 2px;
     margin-top: g(.5);
+    padding-top: g() - 2px;
 
     label + select {
       margin-left: 0;
@@ -56,16 +56,17 @@
     max-width: 100%;
 
     @media #{$bp2} {
-      flex-wrap: wrap;
       flex-direction: row;
+      flex-wrap: wrap;
       max-width: none;
     }
   }
 
-  .adv-term-input {
+  .adv-input {
     flex: 1;
+    flex-basis: 60%;
     margin-bottom: g(.5);
-    width: calc(100% - #{g(2.5)}); // Space for "x" button
+    //width: calc(100% - #{g(2.5)}); // Space for "x" button
 
     @media #{$bp3} {
       margin-right: g(.5);
@@ -77,23 +78,27 @@
     width: 100%;
 
     @media #{$bp3} {
-      width: auto;
+      //width: auto;
     }
   }
 
   .adv-term-remove {
+    align-self: flex-start;
     box-shadow: 0 0 0 2px inset;
     display: inline-block;
     flex: 0 0 g(2);
     font-size: g();
-    align-self: flex-start;
     line-height: g(2);
-    margin: 0 g(.5) 0 0;
+    margin: 28px g(.5) 0 0;
     order: -1;
     text-align: center;
 
+    @media #{$bp2} {
+      order: inherit;
+    }
+
     @media #{$bp3} {
-      margin: 0 0 0 g(.5);
+      margin: 28px 0 0 g(.5);
       order: 0;
     }
 
@@ -106,7 +111,7 @@
     }
   }
 
-  .adv-search {
+  fieldset {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: g();
@@ -136,8 +141,7 @@
     }
   }
 
-  .adv-term-type {
-    width: 100%;
+  .adv-select {
 
     @media #{$bp3} {
       margin-bottom: g(.5);
@@ -213,8 +217,43 @@
   }
 }
 
+.adv-input,
+.adv-select {
+  input[type=text],
+  select {
+    margin-left: 0;
+  }
+
+  label {
+    display: block;
+  }
+}
+
+.adv-input {
+  input[type=text] {
+    width: 100%;
+  }
+}
+
 #groupJoin {
   margin-top: g();
   order: 2;
   text-align: center;
 }
+
+.limiter-boxes {
+  width: 100%;
+}
+
+fieldset {
+  &.limits label {
+    margin-top: 14px;
+  }
+
+  .adv-group & {
+    border: 0;
+    display: flex;
+    padding: 0;
+    width: 100%;
+  }
+}