[FIX] payment, *: BS4, adapt ui of shop/payment page in website.

* website_sale, payment_authorize, payment_ogone, payment_stripe,
  website_sale_delivery

(Many bugs were only revealed by BS4, not created)

- Align payment method (Ex.Stripe) form attributes in row.
- Fix align between radio button and payment method name.
- Removed header div from 'billing & shipping'.
- Set badges (Ex.free) and align between badges and delivery method
  name in choose delivery method.
- Border subtraction from delivery methods div as already card class
  has border.
This commit is contained in:
Priyanka Kakadiya
2018-08-19 16:57:14 +02:00
committed by qsm-odoo
parent 6434e9d37a
commit 1c44e53741
6 changed files with 15 additions and 17 deletions
@@ -1,6 +1,6 @@
.o_payment_form {
label > input[type="radio"], input[type="checkbox"]{
vertical-align: top;
vertical-align: middle;
margin-right: 5px;
}
@@ -17,20 +17,20 @@
margin-top: 5px;
}
.panel-body:first-child {
.card-body:first-child {
border-top: 0px;
}
.panel {
.card {
border-radius: 10px;
}
.panel-footer:last-child {
.card-footer:last-child {
border-bottom-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}
.panel-body {
.card-body {
border-top: 1px solid #ddd;
padding: 1.14em !important;
}
@@ -43,7 +43,7 @@
}
.more_option {
@include o-position-absolute($right: 0px, $bottom: -10px);
@include o-position-absolute($right: 10px);
font-size:10px;
}
@@ -52,7 +52,7 @@
<template id="authorize_s2s_form">
<input type="hidden" name="data_set" data-create-route="/payment/authorize/s2s/create_json_3ds"/>
<div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
<input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
<div class="card_placeholder"></div>
@@ -40,7 +40,7 @@
<input type="hidden" name="acquirer_id" t-att-value="id"/>
<input t-if="return_url" type="hidden" name="return_url" t-att-value="return_url"/>
<input t-if="partner_id" type="hidden" name="partner_id" t-att-value="partner_id"/>
<div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
<input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
<div class="card_placeholder"></div>
@@ -26,7 +26,7 @@
<template id="stripe_s2s_form">
<input type="hidden" name="data_set" data-create-route="/payment/stripe/s2s/create_json_3ds"/>
<div t-attf-class="mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-attf-class="row mt8 #{'' if bootstrap_formatting else 'o_card_brand_detail'}">
<div t-att-class="'form-group col-lg-12' if bootstrap_formatting else 'form-group'">
<input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
<div class="card_placeholder"></div>
-2
View File
@@ -1333,7 +1333,6 @@
</div>
<div class="col-12 col-xl order-xl-1 oe_cart">
<div class="card">
<div class="card-header"></div>
<div class="card-body" id="shipping_and_billing">
<a class='float-right no-decoration' href='/shop/checkout'><i class="fa fa-edit"/> Edit</a>
<t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
@@ -1512,7 +1511,6 @@
</table>
<t t-call="website_sale.payment_confirmation_status"/>
<div class="card mt-3">
<div class="card-header"></div>
<div class="card-body">
<t t-set="same_shipping" t-value="bool(order.partner_shipping_id==order.partner_id or only_services)" />
<div><b>Billing <t t-if="same_shipping and not only_services"> &amp; Shipping</t>: </b><span t-esc='order.partner_id' t-options="dict(widget='contact', fields=['address'], no_marker=True, separator=', ')" class="address-inline"/></div>
@@ -26,12 +26,12 @@
<input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'d-none' if delivery_nb == 1 else ''"/>
<label class="label-optional" t-field="delivery.name" t-att-for="'delivery_%i' % delivery.id"/>
<t t-if="delivery.delivery_type == 'fixed'">
<span t-if="delivery.fixed_price > 0.0" class="badge" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
<span t-else="" class="badge">Free</span>
<span t-if="delivery.fixed_price > 0.0" class="float-right badge badge-secondary" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
<span t-else="" class="float-right badge badge-secondary">Free</span>
</t>
<t t-else="">
<span class="badge d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
<span class="badge o_delivery_compute">Select to compute delivery rate</span>
<span class="float-right badge badge-secondary d-none" t-field="delivery.fixed_price" t-options='{"widget": "monetary", "from_currency": delivery.product_id.company_id.currency_id, "display_currency": website_sale_order.currency_id}'/>
<span class="float-right badge badge-secondary o_delivery_compute">Select to compute delivery rate</span>
</t>
<t t-if="delivery.website_description">
<div t-field="delivery.website_description" class="text-muted mt8"/>
@@ -49,10 +49,10 @@
</div>
</xpath>
<xpath expr="//div[@id='payment_method']" position="before">
<div t-if="deliveries" class="col-lg-12" id="delivery_carrier">
<div t-if="deliveries" id="delivery_carrier">
<t t-set="delivery_nb" t-value="len(deliveries)"/>
<h3 t-if="delivery_nb &gt; 1" class="mb24">Choose a delivery method</h3>
<div t-if="delivery_nb &gt; 1" class="card" id="delivery_method">
<div t-if="delivery_nb &gt; 1" class="card border-0" id="delivery_method">
<ul class="list-group">
<t t-foreach="deliveries" t-as="delivery">
<li class="list-group-item">