From 8875442c811a70aacf441fadb2d1b631d9fa467b Mon Sep 17 00:00:00 2001
From: Jeremy Kersten <jke@odoo.com>
Date: Fri, 30 Sep 2016 17:50:01 +0200
Subject: [PATCH] [IMP] website_sale: fix layout issue

The payment method and pay now button was not in the left part.
So if we only have one line in cart, a big margin top was visible.
---
 addons/website_sale/views/templates.xml | 141 ++++++++++++------------
 1 file changed, 73 insertions(+), 68 deletions(-)

diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 04e38d4f751..e0ccf72f222 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -886,8 +886,10 @@
                 </t>
             </tbody>
         </table>
-        <div class="js_cart_lines pull-right">
-            <t t-call="website_sale.total" />
+        <div class="js_cart_lines row">
+            <t t-call="website_sale.total">
+                <t t-set='extra_class' t-value='"col-sm-4 col-sm-offset-8 col-xs-12"'/>
+            </t>
         </div>
     </template>
 
@@ -1268,7 +1270,7 @@
             </div>
         </t>
     </template>
-    <template id="payment">
+    <template id="payment" name="Payment">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop - Select Payment Method</t>
             <div id="wrap">
@@ -1325,11 +1327,76 @@
                                     </tr>
                                 </tbody>
                             </table>
-                            <div class="pull-right">
-                                <t t-call="website_sale.total" />
+                            <div>
+                                <t t-call="website_sale.total">
+                                    <t t-set='extra_class' t-value='"col-sm-4 col-sm-offset-8 col-xs-12"'/>
+                                </t>
                             </div>
                             <div class="clearfix" />
                             <div class="oe_structure" />
+
+                            <div class="js_payment mb64 row" t-if="acquirers and website_sale_order.amount_total" id="payment_method">
+                                <div class="col-lg-5 col-sm-6">
+                                    <h4>Payment Method:</h4>
+                                    <ul class="list-unstyled">
+                                        <t t-foreach="acquirers or []" t-as="acquirer">
+                                          <li>
+                                            <label t-if="acquirer.button">
+                                                <input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
+                                                <span t-field="acquirer.image_small" t-att-title="acquirer.name" t-field-options='{"widget": "image", "style":"max-width: 60px; display: inline-block"}'/>
+                                                <span t-field="acquirer.name" />
+                                                <span t-if="acquirer.fees_active">(processing fees apply)</span>
+                                            </label>
+                                          </li>
+                                        </t>
+                                        <li t-if="tokens">
+                                            <label>
+                                                <input type="radio" name="acquirer" />
+                                                <span class='fa fa-2x fa-credit-card'/>
+                                                Saved Cards
+                                            </label>
+
+                                            <div class="list-group">
+                                                <t t-foreach='tokens' t-as='token'>
+                                                    <a class="list-group-item btn_payment_token" t-att-data-acquirer="token.acquirer_id.id" t-att-data-token='token.id'>
+                                                        <span class="js_radio fa fa-circle-o"></span>&amp;nbsp;
+                                                        <t t-esc="token.name" />
+                                                        <t t-if="len(set(tokens.mapped('acquirer_id')))>1">
+                                                            (<t t-esc='token.acquirer_id.name'/>)
+                                                        </t>
+                                                        <span t-if="token.acquirer_id.fees_active">(processing fees apply)</span>
+                                                    </a>
+                                                </t>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="col-lg-5 col-lg-offset-2 col-sm-6 text-right">
+                                    <t t-foreach="acquirers or []" t-as="acquirer" id="acquirers_list">
+                                        <div t-att-data-id="acquirer.id" class="oe_sale_acquirer_button hidden pull-right">
+                                            <div t-raw="acquirer.button" />
+                                            <div class="token_hide">
+                                                <div t-if="acquirer.save_token == 'ask'">
+                                                    <input type="checkbox" name="odoo_save_token"/>
+                                                    <label for="odoo_save_token">Save my payment data</label>
+                                                </div>
+                                                <div class="pre_msg" t-field="acquirer.pre_msg" />
+                                            </div>
+                                        </div>
+                                    </t>
+                                </div>
+                            </div>
+                            <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
+                                <div class="col-sm-12">
+                                    <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
+                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
+                                        <a style="width:127px;" class="btn btn-primary a-submit">
+                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-long-arrow-right"></span></span>
+                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-long-arrow-right"></span></span>
+                                        </a>
+                                    </form>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-lg-3 col-lg-offset-1 col-sm-3 text-muted" id="right_column">
                             <t t-call='website_sale.bill_to'>
@@ -1337,68 +1404,6 @@
                             </t>
                         </div>
                     </div>
-                    <div class="js_payment mb64 row" t-if="acquirers and website_sale_order.amount_total" id="payment_method">
-                        <div class="col-lg-5 col-sm-6">
-                            <h4>Payment Method:</h4>
-                            <ul class="list-unstyled">
-                                <t t-foreach="acquirers or []" t-as="acquirer">
-                                  <li>
-                                    <label t-if="acquirer.button">
-                                        <input t-att-value="acquirer.id" type="radio" name="acquirer" t-att-checked="acquirers[0] == acquirer" />
-                                        <span t-field="acquirer.image_small" t-att-title="acquirer.name" t-field-options='{"widget": "image", "style":"max-width: 60px; display: inline-block"}'/>
-                                        <span t-field="acquirer.name" />
-                                        <span t-if="acquirer.fees_active">(processing fees apply)</span>
-                                    </label>
-                                  </li>
-                                </t>
-                                <li t-if="tokens">
-                                    <label>
-                                        <input type="radio" name="acquirer" />
-                                        <span class='fa fa-2x fa-credit-card'/>
-                                        Saved Cards
-                                    </label>
-
-                                    <div class="list-group">
-                                        <t t-foreach='tokens' t-as='token'>
-                                            <a class="list-group-item btn_payment_token" t-att-data-acquirer="token.acquirer_id.id" t-att-data-token='token.id'>
-                                                <span class="js_radio fa fa-circle-o"></span>&amp;nbsp;
-                                                <t t-esc="token.name" />
-                                                <t t-if="len(set(tokens.mapped('acquirer_id')))>1">
-                                                    (<t t-esc='token.acquirer_id.name'/>)
-                                                </t>
-                                                <span t-if="token.acquirer_id.fees_active">(processing fees apply)</span>
-                                            </a>
-                                        </t>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="col-lg-3 col-sm-3">
-                            <t t-foreach="acquirers or []" t-as="acquirer" id="acquirers_list">
-                                <div t-att-data-id="acquirer.id" class="oe_sale_acquirer_button hidden pull-right">
-                                    <div t-raw="acquirer.button" />
-                                    <div class="token_hide">
-                                        <div t-if="acquirer.save_token == 'ask'">
-                                            <input type="checkbox" name="odoo_save_token"/>
-                                            <label for="odoo_save_token">Save my payment data</label>
-                                        </div>
-                                        <div class="pre_msg" t-field="acquirer.pre_msg" />
-                                    </div>
-                                </div>
-                            </t>
-                        </div>
-                    </div>
-                    <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
-                        <div class="col-lg-8 col-sm-8">
-                            <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
-                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
-                                <a style="width:127px;" class="btn btn-primary a-submit">
-                                    <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-long-arrow-right"></span></span>
-                                    <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-long-arrow-right"></span></span>
-                                </a>
-                            </form>
-                        </div>
-                    </div>
                 </div>
                 <div class="oe_structure" />
             </div>
@@ -1578,7 +1583,7 @@
     </template>
 
     <template id="total">
-        <div id="cart_total" t-if="website_sale_order">
+        <div id="cart_total" t-att-class="extra_class or ''" t-if="website_sale_order">
             <div class="row" id="order_total_untaxed">
                 <span class="col-xs-6 text-right text-muted">Subtotal:</span>
                 <span class="col-xs-6 text-left text-muted">