Browse Source

advanced search : all ajax form behaviours are working

Bachir Soussi Chiadmi 8 năm trước cách đây
mục cha
commit
c90cfa63e4

BIN
sites/all/modules/gui/materiobasemod/images/rmfilter.png


+ 129 - 0
sites/all/modules/gui/materiobasemod/images/rmfilter.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg2"
+   xml:space="preserve"
+   width="20"
+   height="20"
+   viewBox="0 0 20 20"
+   sodipodi:docname="rmfilter.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+   inkscape:export-filename="/home/bach/Sites/materio/base_d7/sites/all/modules/gui/materiobasemod/images/rmfilter.png"
+   inkscape:export-xdpi="72"
+   inkscape:export-ydpi="72"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath22"><path
+         d="M 1.148,0.842 H 13.853 V 14.158 H 1.148 Z"
+         id="path20"
+         inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1912"
+     inkscape:window-height="1021"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="23.6"
+     inkscape:cx="2.7879752"
+     inkscape:cy="14.13105"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g4568-6" /><g
+     id="g10"
+     inkscape:groupmode="layer"
+     inkscape:label="search"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,20)"><g
+       id="g12"
+       transform="translate(-16.966507,1.8164)"><path
+         d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
+         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path14"
+         inkscape:connector-curvature="0" /></g><g
+       id="g16"
+       transform="translate(-18.114407)"><g
+         id="g18"
+         clip-path="url(#clipPath22)"><g
+           id="g24"
+           transform="translate(8.7549,14.1582)"><path
+             d="M 0,0 C -0.688,0 -1.35,-0.119 -1.967,-0.351 -2.581,-0.583 -3.13,-0.935 -3.599,-1.398 -4.067,-1.862 -4.443,-2.442 -4.716,-3.125 -4.99,-3.809 -5.128,-4.614 -5.128,-5.52 c 0,-0.904 0.138,-1.712 0.412,-2.402 0.273,-0.687 0.644,-1.268 1.102,-1.725 0.458,-0.459 1.005,-0.809 1.623,-1.041 0.623,-0.232 1.292,-0.35 1.991,-0.35 0.698,0 1.365,0.118 1.982,0.35 0.615,0.232 1.159,0.582 1.617,1.041 0.458,0.457 0.826,1.038 1.094,1.724 0.268,0.691 0.405,1.499 0.405,2.403 0,0.906 -0.139,1.711 -0.412,2.395 C 4.413,-2.442 4.041,-1.861 3.583,-1.397 3.124,-0.934 2.581,-0.582 1.968,-0.351 1.351,-0.119 0.688,0 0,0 m -0.016,-9.571 c -0.517,0 -0.988,0.099 -1.399,0.294 -0.412,0.195 -0.766,0.472 -1.054,0.825 -0.285,0.349 -0.506,0.779 -0.656,1.278 -0.148,0.494 -0.225,1.05 -0.225,1.654 0,0.605 0.077,1.159 0.225,1.647 0.15,0.493 0.371,0.924 0.656,1.279 0.287,0.358 0.642,0.638 1.054,0.833 0.411,0.196 0.882,0.293 1.399,0.293 0.507,0 0.973,-0.097 1.384,-0.293 0.411,-0.195 0.766,-0.472 1.054,-0.825 0.285,-0.35 0.506,-0.78 0.657,-1.278 0.149,-0.495 0.224,-1.052 0.224,-1.656 0,-0.602 -0.075,-1.159 -0.224,-1.654 C 2.928,-7.672 2.707,-8.103 2.422,-8.453 2.135,-8.805 1.78,-9.082 1.368,-9.277 0.957,-9.472 0.491,-9.571 -0.016,-9.571"
+             style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path26"
+             inkscape:connector-curvature="0" /></g><g
+           id="g28"
+           transform="translate(9.4307,8.6182)"><path
+             d="m 0,0 c 0,-0.259 -0.084,-0.464 -0.251,-0.615 -0.167,-0.153 -0.364,-0.229 -0.592,-0.229 -0.235,0 -0.436,0.076 -0.603,0.229 -0.167,0.151 -0.251,0.356 -0.251,0.615 0,0.265 0.084,0.474 0.251,0.626 0.167,0.151 0.368,0.228 0.603,0.228 0.228,0 0.425,-0.077 0.592,-0.228 C -0.084,0.474 0,0.265 0,0"
+             style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path30"
+             inkscape:connector-curvature="0" /></g></g></g><g
+       transform="matrix(-0.93526845,-0.63921764,0.93526845,-0.63921764,8.902391,13.772511)"
+       id="g4568-7"
+       style="stroke-width:0.91451848" /><g
+       transform="matrix(-0.6316744,0.70710678,-0.6316744,-0.70710678,6.0298881,6.3370541)"
+       id="g4568-6"
+       style="stroke-width:1.05802488"><g
+         id="g4641"><g
+           style="stroke-width:0.79386932"
+           id="g4568"
+           transform="matrix(1.3881038,0.3881038,0.3881038,1.3881038,-3.1094674,19.762142)"><path
+             d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
+             style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79386932"
+             id="path4566"
+             inkscape:connector-curvature="0" /></g><path
+           d="m 3.6069436,26.478553 0.9749999,-0.975 4.2130001,4.213 -0.975,0.975 z"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05802488"
+           id="path4566-2"
+           inkscape:connector-curvature="0" /></g><rect
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000001;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79604185;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect4658-7"
+         width="2.361141"
+         height="13.22239"
+         x="0.89098465"
+         y="-6.2852573"
+         ry="1.382954"
+         rx="1.1524616"
+         transform="matrix(-0.05625485,-0.99841644,-0.99841644,-0.05625485,0,0)" /><rect
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000001;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.79604185;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect4658-7-3"
+         width="2.3611407"
+         height="13.22239"
+         x="-0.85463274"
+         y="-8.6827497"
+         ry="1.382954"
+         rx="1.1524616"
+         transform="matrix(-0.99841644,-0.05625485,0.05625485,0.99841644,0,0)" /></g><g
+       id="g4634"
+       transform="translate(-19.369704,-16.144068)"><path
+         d="M 8.8885816,13.772511 H 7.0648081 V 4.8907006 h 1.8237735 z"
+         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
+         id="path4566-5"
+         inkscape:connector-curvature="0" /><g
+         style="stroke-width:0.91451848"
+         id="g4568-7-9"
+         transform="matrix(-0.93526847,-0.63921764,0.93526847,-0.63921764,8.888582,5.6093)"><path
+           d="M 0,0 0.975,-0.975 5.188,3.238 4.213,4.213 Z"
+           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.91451848"
+           id="path4566-5-1"
+           inkscape:connector-curvature="0" /></g></g><path
+       d="m -10.544509,-9.1411866 c 0,0.259 -0.084,0.464 -0.251,0.615 -0.167,0.153 -0.364,0.229 -0.592,0.229 -0.235,0 -0.436,-0.076 -0.603,-0.229 -0.167,-0.151 -0.251,-0.356 -0.251,-0.615 0,-0.265 0.084,-0.474 0.251,-0.626 0.167,-0.151 0.368,-0.228 0.603,-0.228 0.228,0 0.425,0.077 0.592,0.228 0.167,0.152 0.251,0.361 0.251,0.626"
+       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994"
+       id="path30-2"
+       inkscape:connector-curvature="0" /></g></svg>

+ 134 - 63
sites/all/modules/gui/materiobasemod/materio_search_api.module

@@ -735,7 +735,8 @@ function materio_search_api_advanced_search_form($form, &$form_state){
   //  dsm($form_state, 'form_state');
   // dsm($form, 'form');
   // global $user;
-  $form = array();
+  // $form = array();
+  $values = $form_state['values'];
 
   // add a back to search/base home bouton if on explore/foo
   $args = arg();
@@ -751,124 +752,194 @@ function materio_search_api_advanced_search_form($form, &$form_state){
     );
   }
 
-  // filters
+  // filters form container
   $form['filters'] = array(
     '#type' => 'container',
     '#prefix' => '<div id="advancedsearch-filters">',
     '#suffix' => '</div>',
   );
 
-  // building first level texonomy tree
-  $taxotree = taxonomy_get_tree(15, 0, 1, false);
-  // dsm($taxotree, "taxotree");
-  $level_0_ops = array(0=>t("Choose a filter"));
-  foreach ($taxotree as $index => $term) {
-    $level_0_ops[$term->tid] = $term->name;
+  // define default number of lines, 1 or more if some were already added
+  $form_state['filterlines'] =
+    isset($form_state['filterlines'])
+    ? $form_state['filterlines']
+    : 1;
+
+  $trigger = FALSE;
+  if (!empty($form_state['triggering_element']['#name'])) {
+    $trigger = $form_state['triggering_element'];
   }
 
-  $filterlines = isset($form_state['values']['filterlines']) ? $form_state['values']['filterlines'] : 1;
+  $rmline = false;
+  if ($trigger) {
+    // dsm($form_state['triggering_element'], $form_state['triggering_element']['#name']);
+    // dsm($values, 'form state values');
 
-  if (!empty($form_state['triggering_element'])) {
-    dsm($form_state['values'], 'form state values');
-  }
+    // add a line if needed
+    if($trigger['#name'] == 'addfilters'){
+      $form_state['filterlines'] = $form_state['filterlines']+1;
+    }
 
-  if(isset($form_state['triggering_element']['#name']) && $form_state['triggering_element']['#name'] == 'addfilters'){
-    $filterlines = $filterlines + 1;
-  }
+    // remove a line if needed
 
-  $form['filterlines'] =  array(
-    '#type' => 'hidden',
-    '#value' => $filterlines,
-  );
+    if(strpos($trigger['#name'], 'rm-filter-') === 0){
+      // $form_state['filterlines'] = $form_state['filterlines']+1;
+      $rmline = $trigger['#return_value'];
+    }
+  }
 
   // build filters lines (ajax enabled)
-  for ($i=0; $i < $filterlines; $i++) {
+  for ($l=0; $l < $form_state['filterlines']; $l++) {
 
-    $form['filters']['filterline-'.$i] = array(
+    // if rmline this line,
+    // continue the loop withour creating the line
+    if($l === $rmline){
+      continue;
+    }
+    // if we are after the removed line,
+    // create a second counter ($ll) to keep a continuous order for form items
+    // and keep the current counter ($l) to retrieve de current values
+    // if before removed line or no removed line at all, $l = $ll
+    if($rmline !== false && $l > $rmline){
+      $ll = $l-1;
+    }else{
+      $ll = $l;
+    }
+    // dsm("l : ".$l." | ll : ".$ll);
+
+    $form['filters']['filterline-'.$ll] = array(
       '#type' => 'container',
       '#attributes' => array(
         'class' => array("filter-line")
       )
     );
 
-    $form['filters']['filterline-'.$i]['filter-'.$i.'-0'] = array(
+    // build first level taxonomy tree and select options
+    $taxotree = taxonomy_get_tree(15, 0, 1, false);
+    $level_0_ops = array(0=>t("Choose a filter"));
+    foreach ($taxotree as $index => $term) {
+      $level_0_ops[$term->tid] = t($term->name);
+    }
+    // form select element for first level
+    $form['filters']['filterline-'.$ll]['filter-'.$ll.'-0'] = array(
       '#type' => 'select',
       '#options' => $level_0_ops,
+      '#name' => 'filter-'.$ll.'-0',
+      '#default_value' => 0,
       '#ajax' => array(
-        'callback' => 'materio_search_api_advanced_search_callback',
+        'callback' => 'materio_search_api_advanced_search_select_callback',
         'wrapper' => 'advancedsearch-filters',
-        // 'methode' => 'replace',
-        // 'effect' => 'fade',
       ),
     );
 
     // add level 1 filter if level 0 chosen
-    if(isset($form_state["values"]['filter-'.$i.'-0'])
-      & $form_state["values"]['filter-'.$i.'-0']
+    if(isset($values['filter-'.$l.'-0'])
+      && $values['filter-'.$l.'-0']
       ){
+        $default = $values['filter-'.$l.'-0'];
+        $form['filters']['filterline-'.$ll]['filter-'.$ll.'-0']['#default_value'] = $default;
 
-        $value = $form_state["values"]['filter-'.$i.'-0'];
-
-        $taxotree1 = taxonomy_get_tree(15, $value, 1, false);
-        dsm($taxotree1, "taxotree1");
-        $level_1_ops = array(
-          0=>t("Choose a filter")
-        );
+        // build second level taxonomy tree and select options
+        $taxotree1 = taxonomy_get_tree(15, $default, 1, false);
+        $level_1_ops = array(0=>t("Choose a filter"));
         foreach ($taxotree1 as $index => $term) {
-          $level_1_ops[$term->tid] = $term->name;
+          $level_1_ops[$term->tid] = t($term->name);
         }
-
-        $form['filters']['filterline-'.$i]['filter-'.$i.'-1'] = array(
+        // form select element for second level
+        $form['filters']['filterline-'.$ll]['filter-'.$ll.'-1'] = array(
           '#type' => 'select',
           '#options' => $level_1_ops,
+          '#name' => 'filter-'.$ll.'-1',
+          '#default_value' => 0,
           '#ajax' => array(
-            'callback' => 'materio_search_api_advanced_search_callback',
+            'callback' => 'materio_search_api_advanced_search_select_callback',
             'wrapper' => 'advancedsearch-filters',
-            'methode' => 'replace',
-            // 'effect' => 'fade',
           ),
         );
+
+        // add level 2 filter if level 1 chosen
+        if(isset($values['filter-'.$l.'-1'])
+          && $values['filter-'.$l.'-1']
+          ){
+            $default = $values['filter-'.$l.'-1'];
+            $form['filters']['filterline-'.$ll]['filter-'.$ll.'-1']['#default_value'] = $default;
+
+            // build second level taxonomy tree and select options
+            $taxotree2 = taxonomy_get_tree(15, $default, 1, false);
+            if(count($taxotree2)){
+              $level_2_ops = array(0=>t("Choose a filter"));
+              foreach ($taxotree2 as $index => $term) {
+                $level_2_ops[$term->tid] = t($term->name);
+              }
+              // form select element for third level
+              $form['filters']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
+                '#type' => 'select',
+                '#options' => $level_2_ops,
+                '#name' => 'filter-'.$ll.'-2',
+                '#default_value' => 0,
+              );
+            }
+        }
     }
 
+    // add remove the line button
+    $form['filters']['filterline-'.$ll]['rm-filter-'.$ll] = array(
+      '#type' => 'image_button',
+      '#src' => drupal_get_path('module', 'materio_search_api') . '/images/rmfilter.png',
+      '#title' => t('Remove this filter line'),
+      '#name' => 'rm-filter-'.$ll,
+      '#return_value' => $ll,
+      '#executes_submit_callback' => false,
+      '#ajax' => array(
+        'callback' => 'materio_search_api_advanced_search_rmline_callback',
+        'wrapper' => 'advancedsearch-filters',
+        // 'trigger_as' => array("name"=>"rmfilters".$l),
+      ),
+      "#attributes" => array('class'=>array('rm-btn')),
+    );
+
+  } // end of lines loop
+
+  if($rmline !== false){
+    $form_state['filterlines'] = $form_state['filterlines']-1;
   }
 
 
-  // add a new line of criterias
-  $form['addfilters'] = array(
+  // button to add a new line of criterias
+  $form['filters']['addfilters'] = array(
     '#type' => 'image_button',
     '#src' => drupal_get_path('module', 'materio_search_api') . '/images/addfilter.png',
     '#title' => t('Add a filter line'),
-    '#default_value' => 0,
-    '#return_value' => 1,
     '#name' => "addfilters",
-    '#executes_submit_callback' => false,
+    '#return_value' => "add",
     '#ajax' => array(
-      'callback' => 'materio_search_api_advanced_search_callback',
+      'callback' => 'materio_search_api_advanced_search_addfilter_callback',
       'wrapper' => 'advancedsearch-filters',
-      'trigger_as' => array("name"=>"addfilters"),
-      // 'methode' => 'replacewith',
-      // 'speed' => 5000,
-      // 'effect' => 'slide',
     ),
+    '#executes_submit_callback' => false,
   );
 
-  // submit
-  // $form['create'] = array(
-  //   '#type' => 'image_button',
-  //   '#src' => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
-  //   '#value' => t('Search'),
-  //   '#name' => "search",
-  //   '#executes_submit_callback' => false,
-  // );
+  // submit the search
+  $form['search'] = array(
+    '#type' => 'image_button',
+    '#src' => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
+    '#title' => t('Search'),
+    '#name' => "search",
+    '#return_value' => "search",
+  );
 
   return $form;
 }
 
-function materio_search_api_advanced_search_callback($form, $form_state) {
-  // dsm($form_state, "callback form state");
-  // $form["filters"]['test']= array(
-  //   "#markup" => "test",
-  // );
+function materio_search_api_advanced_search_select_callback($form, &$form_state) {
+  return $form['filters'];
+}
+
+function materio_search_api_advanced_search_addfilter_callback($form, &$form_state) {
+  return $form['filters'];
+}
+
+function materio_search_api_advanced_search_rmline_callback($form, &$form_state) {
   return $form['filters'];
 }
 

+ 20 - 8
sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -3894,19 +3894,31 @@ body.home-v2 #main {
       border-radius: 3px;
       background-clip: padding-box;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-      transition: box-shadow 0.3s ease-out;
-      text-align: right; }
+      transition: box-shadow 0.3s ease-out; }
       #tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:hover, #tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:focus {
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
       #tool-bar #block-materio-search-api-mo-searchapi-advanced-search > .inner:active {
         transition: box-shadow 0s ease-out;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
-  #tool-bar #materio-search-api-advanced-search-form .filter-line .form-item.form-type-select {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 12px;
-    line-height: 1;
-    padding-right: 3em; }
+  #tool-bar #materio-search-api-advanced-search-form .filter-line {
+    margin: 0.3em 0;
+    padding-top: 0.3em; }
+    #tool-bar #materio-search-api-advanced-search-form .filter-line:not(:first-child) {
+      border-top: 1px dotted black; }
+    #tool-bar #materio-search-api-advanced-search-form .filter-line .form-item {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 12px;
+      line-height: 1;
+      text-transform: capitalize;
+      margin: 0 0em 0 0; }
+    #tool-bar #materio-search-api-advanced-search-form .filter-line select {
+      width: auto; }
+  #tool-bar #materio-search-api-advanced-search-form .rm-btn {
+    float: right;
+    margin: 0.4em 0 0.4em 0.4em; }
+  #tool-bar #materio-search-api-advanced-search-form #edit-search {
+    float: right; }
 
 #center {
   border-radius: 10px;

+ 44 - 3
sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -955,6 +955,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   }
 }
 
+//   ______            ____
+//  /_  __/___  ____  / / /_  ____ ______
+//   / / / __ \/ __ \/ / __ \/ __ `/ ___/
+//  / / / /_/ / /_/ / / /_/ / /_/ / /
+// /_/  \____/\____/_/_.___/\__,_/_/
+
 #tool-bar{
   // margin-left:50px;
   position:relative;
@@ -1024,6 +1030,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     }
   }
 
+  //    _____                      __
+  //   / ___/___  ____ ___________/ /_
+  //   \__ \/ _ \/ __ `/ ___/ ___/ __ \
+  //  ___/ /  __/ /_/ / /  / /__/ / / /
+  // /____/\___/\__,_/_/   \___/_/ /_/
+
   #block-materio-search-api-materio-search-api-search{
     // @include inlineblock(); vertical-align: middle ;
     // position:absolute; top:10px; right:0;
@@ -1087,6 +1099,11 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     }
   }
 
+  //     ___       __                                __   _____                      __
+  //    /   | ____/ /   ______ _____  ________  ____/ /  / ___/___  ____ ___________/ /_
+  //   / /| |/ __  / | / / __ `/ __ \/ ___/ _ \/ __  /   \__ \/ _ \/ __ `/ ___/ ___/ __ \
+  //  / ___ / /_/ /| |/ / /_/ / / / / /__/  __/ /_/ /   ___/ /  __/ /_/ / /  / /__/ / / /
+  // /_/  |_\__,_/ |___/\__,_/_/ /_/\___/\___/\__,_/   /____/\___/\__,_/_/   \___/_/ /_/
 
   #block-materio-search-api-mo-searchapi-advanced-search{
     // @include inlineblock(); vertical-align: middle ;
@@ -1095,19 +1112,43 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     >.inner{
       @include inlineblock(); margin:0 0 0 10px;
       padding: 3px 10px; background-color:#fff; @include rounded(3px);
-      @include shadowBtn(); text-align: right;
+      @include shadowBtn();
+      // text-align: right;
     }
   }
 
   #materio-search-api-advanced-search-form{
     .filter-line{
-      .form-item.form-type-select{
+      margin:0.3em 0;
+      padding-top:0.3em;
+
+      &:not(:first-child){
+        border-top: 1px dotted black;
+      }
+      .form-item{
         display:inline-block;
         vertical-align: middle;
         @include fs12; line-height:1;
-        padding-right:3em;
+        // padding-right:3em;
+        text-transform: capitalize;
+        // min-width : 4em;
+        margin:0 0em 0 0;
+      }
+
+      select{
+        width:auto;
+
       }
     }
+
+    .rm-btn{
+      float: right;
+      margin:0.4em 0 0.4em 0.4em;
+    }
+
+    #edit-search{
+      float: right;
+    }
   }
 
 }