Browse Source

fixed loading indicator for both search forms

Bachir Soussi Chiadmi 6 years ago
parent
commit
81810c5af4

+ 7 - 3
sites/all/modules/gui/materiobasemod/materio_search_api.module

@@ -718,9 +718,11 @@ function materio_search_api_search_form($form, &$form_state){
   }
 
   $form['create'] = array(
-    '#type' => 'image_button',
-    '#src' => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
-    '#value' => t('Search'),
+    '#type'   => 'image_button',
+    '#src'    => drupal_get_path('module', 'materio_search_api') . '/images/search.png',
+    '#value'  => t('Search'),
+    '#prefix' => '<div class="search-btn-wrapper">',
+    '#suffix'=> '</div>'
   );
 
   // add a back to search/base home bouton if on explore/foo
@@ -1110,6 +1112,8 @@ function materio_search_api_advanced_search_form($form, &$form_state){
       '#title' => t('Search'),
       '#name' => "search",
       '#return_value' => "search",
+      '#prefix' => '<div class="search-btn-wrapper">',
+      '#suffix'=> '</div>'
     );
 
   }else{

+ 11 - 4
sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -3912,11 +3912,12 @@ body.home-v2 #main {
         background-position: 100% -15px; }
     .oldie #tool-bar #materio-search-api-search-form #edit-searchfield-autocomplete-aria-live {
       background-color: #1a1a1a; }
-    #tool-bar #materio-search-api-search-form input#edit-create {
+    #tool-bar #materio-search-api-search-form div.search-btn-wrapper {
+      display: inline-block;
       padding: 3px; }
-    #tool-bar #materio-search-api-search-form.loading {
-      background: transparent url("../img/ajax-loader.gif") no-repeat 98% center; }
-      #tool-bar #materio-search-api-search-form.loading input#edit-create {
+    #tool-bar #materio-search-api-search-form.loading div.search-btn-wrapper {
+      background: transparent url("../img/ajax-loader.gif") no-repeat center center; }
+      #tool-bar #materio-search-api-search-form.loading div.search-btn-wrapper input {
         visibility: hidden; }
     @media only screen and (max-width: 40em) {
       #tool-bar #materio-search-api-search-form input#edit-searchfield {
@@ -3963,6 +3964,12 @@ body.home-v2 #main {
       margin: 0.4em 0 0.4em 0.4em; }
     #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .add-filter {
       margin: 0.5em 0; }
+  #tool-bar #materio-search-api-advanced-search-form div.search-btn-wrapper {
+    display: inline-block; }
+  #tool-bar #materio-search-api-advanced-search-form.loading div.search-btn-wrapper {
+    background: transparent url("../img/ajax-loader.gif") no-repeat center center; }
+    #tool-bar #materio-search-api-advanced-search-form.loading div.search-btn-wrapper input {
+      visibility: hidden; }
 
 #center {
   border-radius: 10px;

+ 2 - 2
sites/all/themes/gui/materiobasetheme/js/script.js

@@ -522,13 +522,13 @@
 
     function onLoadingContent(event){
       _$content.addClass('faded');
-      $('#materio-search-api-search-form').addClass('loading');
+      $('#materio-search-api-search-form, #materio-search-api-advanced-search-form').addClass('loading');
     };
 
     function onLoadedContent(event){
       // trace('MaterioBaseTheme :: onLoadedContent',event);
       _$content.removeClass('faded');
-      $('#materio-search-api-search-form').removeClass('loading');
+      $('#materio-search-api-search-form, #materio-search-api-advanced-search-form').removeClass('loading');
     };
 
     function onResultsChanged(event){

File diff suppressed because it is too large
+ 0 - 0
sites/all/themes/gui/materiobasetheme/js/script.min.js


+ 67 - 52
sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1157,13 +1157,17 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       }
     };
 
-    input#edit-create{
+    // input#edit-create{
+    div.search-btn-wrapper{
+      display: inline-block;
       padding: 3px;
     }
 
     &.loading{
-      background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
-      input#edit-create{ visibility: hidden; }
+      div.search-btn-wrapper{
+        background: transparent url('../img/ajax-loader.gif') no-repeat center center;
+        input{ visibility: hidden; }
+      }
     }
 
     @media #{$small-only}{
@@ -1189,72 +1193,83 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   //     // text-align: right;
   //   }
 
-    #materio-search-api-advanced-search-form{
-      >div{
+  #materio-search-api-advanced-search-form{
+    >div{
+      position: relative;
+      #advancedsearch-filters, >.form-wrapper{
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      >.form-wrapper{
         position: relative;
-        #advancedsearch-filters, >.form-wrapper{
-          display: inline-block;
-          vertical-align: top;
-        }
-
-        >.form-wrapper{
-          position: relative;
-          text-align: center;
-          >*{display:block;}
-          a.back-search-home{
-            color:#000;
-            padding-top: 0.45em;
-            i:before{
-              font-size:1.3em;
-            }
-          }
-          #edit-search{
-            margin: 1em 0 0.5em;
+        text-align: center;
+        >*{display:block;}
+        a.back-search-home{
+          color:#000;
+          padding-top: 0.45em;
+          i:before{
+            font-size:1.3em;
           }
         }
+        #edit-search{
+          margin: 1em 0 0.5em;
+        }
       }
+    }
 
 
-      #advancedsearch-filters{
-        padding-right: 0.5em;
-        margin-right: 0.5em;
-        border-right: 1px solid #ccc;
-
-        .filter-line{
-          margin:0.3em 0;
-          padding-top:0.3em;
+    #advancedsearch-filters{
+      padding-right: 0.5em;
+      margin-right: 0.5em;
+      border-right: 1px solid #ccc;
 
-          &:not(:first-child){
-            border-top: 1px solid #ccc;
-          }
-          .form-item{
-            display:inline-block;
-            vertical-align: middle;
-            @include fs12; line-height:1;
-            // padding-right:3em;
-            text-transform: capitalize;
-            // min-width : 4em;
-            margin:0 0em 0 0;
-          }
+      .filter-line{
+        margin:0.3em 0;
+        padding-top:0.3em;
 
-          select{
-            width:auto;
-          }
+        &:not(:first-child){
+          border-top: 1px solid #ccc;
         }
-
-        .rm-btn{
-          float: right;
-          margin:0.4em 0 0.4em 0.4em;
+        .form-item{
+          display:inline-block;
+          vertical-align: middle;
+          @include fs12; line-height:1;
+          // padding-right:3em;
+          text-transform: capitalize;
+          // min-width : 4em;
+          margin:0 0em 0 0;
         }
 
-        .add-filter{
-          margin:0.5em 0;
+        select{
+          width:auto;
         }
       }
 
+      .rm-btn{
+        float: right;
+        margin:0.4em 0 0.4em 0.4em;
+      }
+
+      .add-filter{
+        margin:0.5em 0;
+      }
+    }
+
+    div.search-btn-wrapper{
+      display: inline-block;
+      // padding: 3px;
+    }
 
+    &.loading{
+      div.search-btn-wrapper{
+        background: transparent url('../img/ajax-loader.gif') no-repeat center center;
+        input{ visibility: hidden; }
+      }
     }
 
+  }
+
   // }
 }
 

Some files were not shown because too many files changed in this diff