Merge pull request #6070 from AugierLe42e/infinite-scroll-fix

Fixing infinite scroll and notif dropodown loaders

app/assets/stylesheets/_mixins.scss

@@ -62,7 +62,7 @@ $default-border-radius: 3px;
       size : 60px 60px;
     }
 
-    border-radius: 70px 10px 10px 70px;
+    border-radius: 40px 10px 10px 40px;
     box-shadow: 0 0 32px rgba(255,255,255,.5);
 
     position : absolute;
@@ -70,7 +70,7 @@ $default-border-radius: 3px;
     left : 10%;
     right : 10%;
 
-    height: 60px;
+    height: 80px;
     margin-top: -40px;
     padding: 10px 7px 10px 80px;
     overflow: hidden;

app/assets/stylesheets/header.scss

@@ -156,8 +156,8 @@ body > header {
 
       .ajax_loader {
         border-bottom: 1px solid $border-grey;
-        text-align: center;
         padding: 15px;
+        img { height: 21px; }
       }
       .notifications{
         overflow: hidden;

app/assets/stylesheets/new_styles/_spinner.scss

@@ -1,13 +1,3 @@
-@keyframes fade-in {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@keyframes spin {
-  0%   { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
 #paginate, #infscr-loading {
   margin-top: 10px;
   padding: 8px 0;
@@ -18,14 +8,10 @@
 }
 
 .loader {
-  mask-image: image-url('ajax-loader2.gif');
-  animation: spin 1s infinite ease-in-out, fade-in 0.2s ease-in;
-
   background-image : image-url("ajax-loader2.gif");
-
   display: inline-block;
-  width : 14px;
-  height: 14px;
+  width : 32px;
+  height: 32px;
 
   &.hidden{
     display : none;

app/assets/templates/header_tpl.jst.hbs

@@ -56,7 +56,7 @@
 
         <div class="notifications">
           <div class="ajax_loader">
-            <img alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
+            <img class="img-responsive center-block" alt="Ajax-loader" src="{{imageUrl "ajax-loader2.gif"}}">
           </div>
         </div>
         <div class="view_all">