tabs interface for search forms is ready

sites/all/modules/gui/materiobasemod/templates/materio-search-api-search-block.tpl.php

@@ -1,10 +1,10 @@
 <div class="inner">
-  <div class="msa-search">
-    <h4><?php print $search_title; ?></h4>
+  <div class="msa-form-wrapper msa-search">
+    <h4 class="form-title"><?php print $search_title; ?></h4>
     <?php print render($searchform); ?>
   </div>
-  <div class="msa-advanced-search">
-    <h4><?php print $advanced_search_title; ?></h4>
+  <div class="msa-form-wrapper msa-advanced-search">
+    <h4 class="form-title"><?php print $advanced_search_title; ?></h4>
     <?php print render($advanced_searchform); ?>
   </div>
 

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -3812,7 +3812,8 @@ body.home-v2 #main {
       zoom: 1;
       *display: inline;
       margin: 0 0 0 10px;
-      padding: 3px 10px;
+      min-width: 400px;
+      padding: 5px 10px;
       background-color: #fff;
       border-radius: 3px;
       background-clip: padding-box;
@@ -3824,14 +3825,45 @@ body.home-v2 #main {
       #tool-bar #block-materio-search-api-materio-search-api-search > .inner:active {
         transition: box-shadow 0s ease-out;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); }
-      #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div {
-        padding-top: 0.5em; }
-        #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div h4 {
-          margin: 0;
-          text-align: left;
-          font-size: 14px; }
-        #tool-bar #block-materio-search-api-materio-search-api-search > .inner > div:not(:first-of-type) {
-          margin-top: 0.5em; }
+      #tool-bar #block-materio-search-api-materio-search-api-search > .inner h4.form-title {
+        padding: 0.2em 0 0.1em 0.2em;
+        margin: 0.2em 0 0.1em 0.2em;
+        text-align: left;
+        font-size: 14px; }
+        html.no-js #tool-bar #block-materio-search-api-materio-search-api-search > .inner h4.form-title {
+          display: none; }
+      html.no-js #tool-bar #block-materio-search-api-materio-search-api-search > .inner.msa-advanced-search {
+        display: none; }
+    #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs {
+      text-align: left;
+      margin-bottom: 4px; }
+      #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4 {
+        display: moz-inline-stack;
+        display: inline-block;
+        vertical-align: top;
+        zoom: 1;
+        *display: inline;
+        font-size: 12px;
+        cursor: pointer;
+        border-radius: 5px 5px 0 0;
+        padding: 0.1em 0.5em;
+        transition: color 0.5s ease-in-out; }
+        #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4.active {
+          border: 1px solid #ccc;
+          border-bottom: 1px solid #FFF;
+          background-color: #fff; }
+        #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4:not(.active) {
+          color: #ccc; }
+          #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs h4:not(.active):hover {
+            color: inherit; }
+      #tool-bar #block-materio-search-api-materio-search-api-search.tabed .searchform-tabs:after {
+        content: "";
+        display: block;
+        background-color: #fff;
+        border-top: 1px solid #ccc;
+        margin-top: -3px; }
+    #tool-bar #block-materio-search-api-materio-search-api-search.tabed .msa-form-wrapper:not(.active) {
+      display: none; }
   #tool-bar #materio-search-api-search-form {
     text-align: right;
     display: moz-inline-stack;

sites/all/themes/gui/materiobasetheme/js/script.js

@@ -52,6 +52,7 @@
         _isMembershipForm = _$body.is('.page-node-11186'), //$('body').is('.page-node-11187') || ,
         _isBreveMateriauNodePage = _$body.is('.node-type-breve') || _$body.is('.node-type-materiau'),
         // _isBreveMateriauNodePage = _themeSettings.page_callback == 'node_page_view' && (_themeSettings.node_type == 'materiau' || _themeSettings.node_type == 'breve'),
+        _hasDoubleSearchForm = $('#block-materio-search-api-materio-search-api-search').length,
         _resizeTimer,
         _max_480 = function(){ return (viewport().width < 479); },
         _480_768 = function(){ return ( !_max_480() && _max_768() ); },
@@ -96,6 +97,9 @@
         initKeyboardShortcuts();
         initViewmodes();
 
+      if(_hasDoubleSearchForm)
+        initDoubleSearchFormTabs();
+
       if(_isBreveMateriauNodePage)
         $.event.trigger({ type : 'resultschanged', container : '#content>.inner-content'});
 
@@ -1563,6 +1567,42 @@
       return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
     };
 
+    /**
+     * Search Form
+     */
+    function initDoubleSearchFormTabs() {
+      var $searchblock = $('#block-materio-search-api-materio-search-api-search');
+      var $tabs = $('<div>')
+        .addClass('searchform-tabs')
+        .prependTo($searchblock.children('.inner'));
+      $('h4.form-title', $searchblock).each(function(index, el) {
+        $(el)
+          .attr('index', index)
+          .bind('click', function(e){
+            var $this = $(this);
+            var index = $this.attr('index');
+            // show the right tab
+            $('h4.form-title', $tabs).removeClass('active');
+            $this.addClass('active');
+            // show the right form
+            $('.msa-form-wrapper', $searchblock)
+              .removeClass('active')
+              .eq(index).addClass('active');
+            // record cookie
+            createCookie('default-search-form', index);
+          })
+          .appendTo($tabs);
+      });
+
+      // read from cookie what was the last search form visible
+      var defaultIndex = readCookie('default-search-form') || 0;
+      // show default tab
+      $('h4.form-title', $tabs).eq(defaultIndex).addClass('active');
+      $('.msa-form-wrapper', $searchblock).eq(defaultIndex).addClass('active');
+
+      $searchblock.addClass('tabed');
+    };
+
     /**
     * Forms
     */
@@ -1669,39 +1709,39 @@
 
 
   /**
- * Attach collapse behavior to the feedback form block.
- */
-  Drupal.behaviors.feedbackForm = {
-    attach: function (context) {
-      $('#block-feedback-form', context).once('feedback', function () {
-        var $block = $(this);
-        $block.find('span.feedback-link')
-          .prepend('<span id="feedback-form-toggle">feedback</span> ')
-          .css('cursor', 'pointer')
-          .toggle(function () {
-              Drupal.feedbackFormToggle($block, false);
-            },
-            function() {
-              Drupal.feedbackFormToggle($block, true);
-            }
-          );
-        $block.find('form').hide();
-        $block.show();
-      });
-    }
-  };
-
+   * Attach collapse behavior to the feedback form block.
+   */
+  // Drupal.behaviors.feedbackForm = {
+  //   attach: function (context) {
+  //     $('#block-feedback-form', context).once('feedback', function () {
+  //       var $block = $(this);
+  //       $block.find('span.feedback-link')
+  //         .prepend('<span id="feedback-form-toggle">feedback</span> ')
+  //         .css('cursor', 'pointer')
+  //         .toggle(function () {
+  //             Drupal.feedbackFormToggle($block, false);
+  //           },
+  //           function() {
+  //             Drupal.feedbackFormToggle($block, true);
+  //           }
+  //         );
+  //       $block.find('form').hide();
+  //       $block.show();
+  //     });
+  //   }
+  // };
+  //
   /**
    * Collapse or uncollapse the feedback form block.
    */
-  Drupal.feedbackFormToggle = function ($block, enable) {
-    $block.find('form').slideToggle('medium');
-    if (enable) {
-      $('#feedback-form-toggle', $block).html('feedback');
-    }
-    else {
-      $('#feedback-form-toggle', $block).html('feedback (close)');
-    }
-  };
+  // Drupal.feedbackFormToggle = function ($block, enable) {
+  //   $block.find('form').slideToggle('medium');
+  //   if (enable) {
+  //     $('#feedback-form-toggle', $block).html('feedback');
+  //   }
+  //   else {
+  //     $('#feedback-form-toggle', $block).html('feedback (close)');
+  //   }
+  // };
 
 })(jQuery);

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1042,21 +1042,66 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     float:right;
     >.inner{
       @include inlineblock(); margin:0 0 0 10px;
-      padding: 3px 10px; background-color:#fff; @include rounded(3px);
+      min-width: 400px;
+      padding: 5px 10px; background-color:#fff; @include rounded(3px);
       @include shadowBtn(); text-align: right;
 
-      >div{
+      h4.form-title{
+        padding: 0.2em 0 0.1em 0.2em;
+        margin: 0.2em 0 0.1em 0.2em;
+        text-align: left;
+        @include fs14;
+        html.no-js &{
+          display:none;
+        }
+      }
+      &.msa-advanced-search{
+        // border-top: 1px solid #ccc;
+        html.no-js &{
+          display:none;
+        }
+      }
+
+    }
+    &.tabed{
+      .searchform-tabs{
+        text-align: left;
+        // border-bottom: 1px solid #ccc;
+        margin-bottom: 4px;
         h4{
-          margin:0;
-          text-align: left;
-          @include fs14;
+          @include inlineblock();
+          @include fs12;
+          cursor: pointer;
+          border-radius: 5px 5px 0 0;
+          padding: 0.1em 0.5em;
+          // margin:0 4px;
+          transition: color 0.5s ease-in-out;
+          &.active{
+            border: 1px solid #ccc;
+            border-bottom: 1px solid #FFF;
+            background-color: #fff;
+          }
+          &:not(.active){
+            color: #ccc;
+            // border-bottom: 1px solid #ccc;
+            &:hover{
+              color: inherit;
+            }
+          }
         }
-        padding-top: 0.5em;
-        &:not(:first-of-type){
-          margin-top: 0.5em;
-          // border-top: 1px solid #ccc;
+        &:after{
+          content: "";
+          display: block;
+          // z-index: 5;
+          // height:3px;
+          background-color: #fff;
+          border-top: 1px solid #ccc;
+          margin-top: -3px;
         }
       }
+      .msa-form-wrapper:not(.active){
+        display: none;
+      }
     }
   }