From c1828990fd38c07cb30ff5b3013bcab089a2c00e Mon Sep 17 00:00:00 2001
From: fefa4ka <fefa4ka@gmail.com>
Date: Thu, 3 Nov 2016 02:53:29 +0300
Subject: [PATCH] fix styles

---
 .../templates/trademark/nice_block_busy.html  | 10 ++++
 .../templates/trademark/search_detail.html    | 56 +++++++++++--------
 zsite/static/less/search.less                 | 47 ++++++++++++++--
 3 files changed, 86 insertions(+), 27 deletions(-)
 create mode 100644 trademark/templates/trademark/nice_block_busy.html

diff --git a/trademark/templates/trademark/nice_block_busy.html b/trademark/templates/trademark/nice_block_busy.html
new file mode 100644
index 0000000..5735373
--- /dev/null
+++ b/trademark/templates/trademark/nice_block_busy.html
@@ -0,0 +1,10 @@
+<div class="trademark-search-nice-busy">
+    <h2>«{{ keyword|title }}» нельзя использовать в следующих сферах</h2>
+    
+    <ul class="trademark-search-available-classes list-unstyled">
+        {% for class in nice_busy %}
+        <li>  <button class="btn btn-xs btn-default">{{ class.nice_id }}</button> {{ class.title }}</li>
+        {% endfor %}
+        
+    </ul>
+</div>
\ No newline at end of file
diff --git a/trademark/templates/trademark/search_detail.html b/trademark/templates/trademark/search_detail.html
index e9b6597..7b1ac1e 100644
--- a/trademark/templates/trademark/search_detail.html
+++ b/trademark/templates/trademark/search_detail.html
@@ -2,7 +2,6 @@
 
 {% block trademark_content %}
 
-
 <div class="row">
     <div class="col-xs-12 col-sm-8">
 
@@ -13,26 +12,39 @@
 
         <ul class="trademark-search-results list-inline list-unstyled">
         {% for tm in identity %}
-        <li class="trademark-search-result">
-            {% if tm.image_url %}
-            <img src="{{ tm.image_url }}" width=150>
-            {% else %}
+        <li class="trademark-search-result-identity">
+            <div class='trademark-search-result-image' style="background-image: url({{ tm.image_url }});">
+            {% if not tm.image_url %}
             <h4>{{ tm.title|title }}</h4>
             {% endif %}
+            </div>
             <p>{{ tm.title|title }}</p>
-            <span>{% for class in tm.nices.all %}<button class="btn btn-xs btn-default">{{ class.nice_id }}</button>{% endfor %}</span>
+
+            {% if tm.nices.count != 44 %}
+                {% if tm.nices.count > 5 %}
+                <span>{% for class in tm.nices.all|slice:":4" %}
+                <button class="btn btn-xs btn-default trademark-search-nice-button" ng-show="true" popover="{{class.description}}" popover-title="{{class.title}}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">{{ class.nice_id }}</button>
+                {% endfor %}
+                <button class="btn btn-xs btn-default" popover="{% for class in tm.nices.all|slice:"4:" %}{{class.id}}{% if not forloop.last %} — {% endif %} {% endfor %}" popover-trigger="mouseenter" popover-placement="bottom">...</button>
+                </span>
+                {% else %}
+                    <span>{% for class in tm.nices.all %}
+                    <button class="btn btn-xs btn-default trademark-search-nice-button" ng-show="true" popover="{{class.description}}" popover-title="{{class.title}}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">{{ class.nice_id }}</button>
+                    {% endfor %}
+                {% endif %}
+                
+            {% else %}
+                <span>Зарегистрирован во всех классах</span>
+            {% endif %}
+
             </li>
         {% endfor %}
         </ul>
 
-        <div class="trademark-search-nice-busy">
-            <h2>«{{ keyword.request|title }}» нельзя использовать в следующих сферах</h2>
-            <ul class="trademark-search-available-classes list-unstyled">
-                {% for class in nice_busy %}
-                <li>  <button class="btn btn-xs btn-default">{{ class.nice_id }}</button> {{ class.title }}</li>
-                {% endfor %}
-            </ul>
-        </div>
+        {% if nice_busy.count < 45 %}
+        {% include 'trademark/nice_block_busy.html' with keyword=keyword.request nice_busy=nice_busy %}
+        {% endif %}
+
     {% else %}
         <h1>Товарный знак «{{ keyword.request|title }}» не зарегистрирован в базе свидетельств Роспатента</h1>
         <p>Знак, который вы выбрали, пока не зарегистрирован, но кто-то мог подать заявку на регистрацию сходного знака. Это означает, что существуюет вероятность, что вам могут отказать в регистрации вашего знака.</p>
@@ -61,12 +73,12 @@
       <h2>Похожие на «{{ keyword.request|title }}» торговые марки</h2>
         <ul class="trademark-search-results list-inline list-unstyled">
         {% for tm in contains %}
-         <li class="trademark-search-result">
-            {% if tm.image_url %}
-            <img src="{{ tm.image_url }}" width=100>
-            {% else %}
+         <li class="trademark-search-result-contains">
+            <div class='trademark-search-result-image' style="background-image: url({{ tm.image_url }});">
+            {% if not tm.image_url %}
             <h4>{{ tm.title|title }}</h4>
             {% endif %}
+            </div>
             <p>{{ tm.title|title }}</p>
             </li>
         {% endfor %}
@@ -77,12 +89,12 @@
     <h2>Знаки включающие в себя части от «{{ keyword.request|title }}»</h2>
         <ul class="trademark-search-results list-inline list-unstyled">
         {% for tm in similar %}
-         <li class="trademark-search-result">
-            {% if tm.image_url %}
-            <img src="{{ tm.image_url }}" width=100>
-            {% else %}
+         <li class="trademark-search-result-contains">
+            <div class='trademark-search-result-image' style="background-image: url({{ tm.image_url }});">
+            {% if not tm.image_url %}
             <h4>{{ tm.title|title }}</h4>
             {% endif %}
+            </div>
             <p>{{ tm.title|title }}</p>
             </li>
         {% endfor %}
diff --git a/zsite/static/less/search.less b/zsite/static/less/search.less
index 027e36b..ac83000 100644
--- a/zsite/static/less/search.less
+++ b/zsite/static/less/search.less
@@ -14,14 +14,43 @@
 }
 
 .trademark-search-results {
-    .trademark-search-result {
-        
+    .trademark-search-result-identity {
+        width: 161px;
+        height: 185px;
+
+        .trademark-search-result-image {
+            height: 100px;
+        }
+    }
+
+    .trademark-search-result-contains {
+        width: 115px;
+        height: 131px;
 
-        margin-bottom: 15px;
+        .trademark-search-result-image {
+            height: 60px;
+        }
+    }
+
+    
+    .trademark-search-result, .trademark-search-result-identity, .trademark-search-result-contains {
+        overflow: hidden;
+
+        margin-bottom: 10px;
         margin-right: 5px;
 
         text-align: center;
+
+        padding: 3px;
         
+        cursor: pointer;
+        
+        .trademark-search-result-image {
+            background-position: center center;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
+
         p {
             margin-top: 10px;
             border-top: 1px solid black;
@@ -33,10 +62,17 @@
 
         .btn-xs {
             margin-right: 5px;
-            margin-top: 3px;
+            margin-top: 5px;
+            font-size: 10px;
         }
 
     }
+
+    .trademark-search-result:hover, .trademark-search-result-identity:hover, .trademark-search-result-contains:hover {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        
+    }
 }
 
 .trademark-search-available-classes {
@@ -51,7 +87,7 @@
     border-radius: 5px;
     padding: 15px 15px 10px;
     margin-left: -15px;
-    margin-top: 30px;
+    margin-top: 10px;
 
     .description {
         margin: 5px 0;
@@ -88,6 +124,7 @@
     border-radius: 6px;
     background: white;
     margin-left: -14px;
+    margin-bottom: 5px;
 
     .trademark-search-loading-header {    
         padding: 9px 13px;