#733,734 Fix mobile product table. And category text (#735)

* #733,734  Fix mobile product table. And category text

#733  Review#1 fixes. Return button tag

#733  Fix test

#736  Fix header menu

#734  Final for mobile options table

#734  Draft for mobile options list on the product page

#733  Fix seo text and image overlaying

* #733  Review#1 fixes. Return button tag

front/scss/pages/category.scss

@@ -139,7 +139,6 @@
 
 .category-about {
   align-items: center;
-  display: flex;
   justify-content: center;
 
   &-text {
@@ -153,4 +152,8 @@
   &-img {
     width: 25%;
   }
+
+  @include media($xs) {
+    display: flex;
+  }
 }

front/scss/pages/product.scss

@@ -44,11 +44,6 @@
     }
   }
 
-  &-order {
-    padding: 0 0 50px 0;
-    margin-left: -62px;
-  }
-
   &-td {
     border-bottom: 1px solid $c-table-border;
     font-size: $f-size-base - 2;
@@ -204,3 +199,57 @@
     transform: translateX(-2px) rotate(-45deg);
   }
 }
+
+.option-list {
+  text-align: center;
+  border-bottom: 1px solid $c-separator-grey;
+  margin-bottom: 50px;
+
+  @include media($sm) {
+    margin-bottom: 100px;
+  }
+
+  &-title {
+    margin: 0 0 15px;
+
+    @include media($sm) {
+      display: none;
+    }
+  }
+
+  .table-th {
+    display: none;
+
+    @include media($sm) {
+      display: table-cell;
+    }
+  }
+
+  & .table-count {
+    display: inline-block;
+
+    @include media($sm) {
+      display: table-cell;
+    }
+  }
+
+  & .table-order {
+    flex: 35%;
+    width: 35%;
+    padding: 10px 5px;
+    display: inline-block;
+
+    @include media($sm) {
+      display: table-cell;
+      padding: 17px 5px;
+    }
+  }
+
+  & .tags,.sum {
+    display: none;
+
+    @include media($sm) {
+      display: table-cell;
+    }
+  }
+}

templates/catalog/product.html

@@ -56,43 +56,44 @@
           </div>
         </div>
 
-        <div class="option-order row">
-          <table class="options-table table">
+        <div class="row">
+          <div class="col-md-12 option-list">
+            <table class="options-table table">
             <tr>
-              <th>Марка</th>
+              <th class="table-th">Марка</th>
               {% for group in tag_groups %}
-                <th>{{ group.name }}</th>
+                <th class="table-th">{{ group.name }}</th>
               {% endfor %}
 
-              <th>Цена</th>
-              <th>Кол-во</th>
-              <th>Итог</th>
-              <th>{# Column for order button #}</th>
+              <th class="table-th">Цена</th>
+              <th class="table-th">Кол-во</th>
+              <th class="table-th">Итог</th>
+              <th class="table-th">{# Column for order button #}</th>
             </tr>
             {% for option in options.all %}
-              <tr data-id="{{ option.id }}" id="option-{{ option.id }}">
-                <td class="option-td">{{ option.mark }}</td>
+              <tr class="table-tr" data-id="{{ option.id }}" id="option-{{ option.id }}">
+                <td class="table-td">{{ option.mark }}</td>
                 {% for group in tag_groups %}
-                  <td class="option-td">
+                  <td class="table-td tags">
                     {% get_tag_name group option %}
                   </td>
                 {% endfor %}
 
-                <td class="option-td option-td-price js-option-price">
+                <td class="table-td option-td-price js-option-price">
                   <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                     {{ option.price|format_price }}
                     <meta itemprop="price" content="{{ option.price|floatformat:2 }}">
                     <meta itemprop="priceCurrency" content="RUB">
                   </div>
                 </td>
 
-                <td class="option-td">
+                <td class="table-td table-count table-td">
                   {% include 'catalog/count_input.html' with quantity='1' only %}
                 </td>
-                <td class="option-td">
+                <td class="table-td table-price table-td sum">
                   <span class="js-option-sum">{{ option.price|format_price }}</span>
                 </td>
-                <td class="option-td">
+                <td class="table-td table-order table-td">
                   <button class="btn buy-product js-buy-product"
                    data-id="{{ option.id }}"
                    data-catalog-name="{{ option.catalog_name }}"
@@ -101,6 +102,7 @@
               </tr>
             {% endfor %}
           </table>
+          </div>
           <div class="public-offer">Не является публичной офертой</div>
         </div>