#734 Draft for mobile options list on the product page

fidals · Jul 8, 2019 · 27e567a · 27e567a
1 parent fcc2ed0
commit 27e567a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 22 deletions.
diff --git a/front/scss/pages/product.scss b/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 {
+  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;
+      width: 100%;
+      padding: 17px 5px;
+    }
+  }
+
+  & .tags,.sum {
+    display: none;
+
+    @include media($sm) {
+      display: table-cell;
+    }
+  }
+}
diff --git a/templates/catalog/product.html b/templates/catalog/product.html
@@ -56,51 +56,53 @@
           </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">
-                  <button class="btn buy-product js-buy-product"
+                <td class="table-td table-order table-td">
+                  <span class="btn buy-product js-buy-product"
                    data-id="{{ option.id }}"
                    data-catalog-name="{{ option.catalog_name }}"
-                   type="submit">Заказать</button>
+                   type="submit">Заказать</span>
                 </td>
               </tr>
             {% endfor %}
           </table>
+          </div>
           <div class="public-offer">Не является публичной офертой</div>
         </div>