add styles for dtys.wait

batiskaf/templates/jinja2/dtys/index.jinja

@@ -6,13 +6,7 @@
     Поймай свою цену
 {% endblock %}
 
-{% block stylesheet %}
+{% block stylesheet %}{% endblock stylesheet %}
-<style>
-.dtys .stopped {
-    border: 2px solid red;
-}
-</style>
-{% endblock stylesheet %}
 
 
 {% block jss %}

batiskaf/templates/jinja2/includes/dtys_product_thumb.jinja

@@ -1,5 +1,9 @@
 <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">
-    <div class="thumbnail {% if object.is_stopped %}stopped{% endif %}" id="dtys_product_{{ object.id }}">
+    <div class="thumbnail dtys__product {% if object.is_stopped %}stopped{% endif %}" id="dtys_product_{{ object.id }}">
+        <div class="wait-block">
+            <span class="wait-icon glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+        </div>
+
         {% set product = object.product.product %}
         {% set im = product.main_image()|thumbnail("420x420") %}
 

static/js/dtys.js

@@ -111,12 +111,22 @@ var Updater = function(){
         var me = this;
         $.ajax(this.params.url, {
             success: function(data,status,x){
+                $(".dtys__product").each(function(){
+                    $(this).removeClass("wait");
+                });
+
                 if(me.ETag != x.getResponseHeader('ETag')){
                     me.params.onModified(data,x,me.lastModified);
                     me.lastModified = x.getResponseHeader('Last-Modified');
                 }
                 me.ETag = x.getResponseHeader('ETag');
             },
+            error: function(jqXHR, textStatus, errorThrown) {
+                $(".dtys__product").each(function(){
+                    $(this).addClass("wait");
+                    countdownPriceStop($(this));
+                });
+            },
             beforeSend: function(x){
                 if(me.ETag != '') { x.setRequestHeader('If-None-Match', me.ETag); }
             },

static/less/_.less

@@ -8,6 +8,7 @@
 @import "components/_navbar";
 @import "components/_currency";
 @import "components/_festival";
+@import "components/_dtys";
 
 @brand-yellow: #fed000;
 @brand-gray: #434a54;
@@ -936,3 +937,41 @@ a.btn {
     color: @white!important;
   }
 }
+
+
+.dtys {
+  .stopped {
+    border: 2px solid red;
+  }
+
+  .wait-block {
+    display: none;
+    border: 1px solid gray;
+    border-radius: 4px;
+    background-color: rgba(0,0,0,0.2);
+    cursor: not-allowed;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+
+    .wait-icon {
+      display: inline-block;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      font-size: 160%;
+      color: white;
+    }
+  }
+
+  .wait {
+    .wait-block {
+      display: block;
+
+    }
+  }
+}
+