add sold-block to dtys thumbnail

batiskaf/templates/jinja2/dtys/index.jinja

@@ -23,6 +23,7 @@
         {% for object in object_list %}
             {% include "includes/dtys_product_thumb.jinja" with context %}
         {% endfor %}
+
         </div>
     </div>
 </div>

batiskaf/templates/jinja2/includes/dtys_product_thumb.jinja

@@ -4,6 +4,10 @@
             <span class="wait-icon glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
         </div>
 
+        <div class="sold-block alert-danger">
+            <div class="sold-block__message">Продано!</div>
+        </div>
+
         {% set product = object.product.product %}
         {% set im = product.main_image()|thumbnail("420x420") %}
 

static/less/_.less

@@ -8,7 +8,6 @@
 @import "components/_navbar";
 @import "components/_currency";
 @import "components/_festival";
-@import "components/_dtys";
 
 @brand-yellow: #fed000;
 @brand-gray: #434a54;
@@ -941,7 +940,42 @@ a.btn {
 
 .dtys {
   .stopped {
-    border: 2px solid red;
+    .sold-block {
+      opacity: 1;
+      bottom: 0;
+
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .sold-block {
+    opacity: 0;
+    overflow: hidden;
+    border-radius: 4px;
+    cursor: not-allowed;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 500px;
+    z-index: 100;
+    transition: all .3s ease;
+
+    &__message {
+      font-size: 160%;
+      font-weight: bold;
+      color: white;
+      text-align: center;
+      padding-top: 20pt;
+
+      position: absolute;
+      top: 40%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 
   .wait-block {
@@ -970,7 +1004,6 @@ a.btn {
   .wait {
     .wait-block {
       display: block;
-
     }
   }
 }