refactor(UI): clean up portal pages (#29018)
* refactor: list view for portal pages
* refactor: add align center class
* refactor: change footer btn class(primary)
* refactor: add order style page
* refactor: import order page in website
* refactor: remove table elements
* fix: preview image height
* fix: make string translatable
* refactor: change font variables
* refactor: order preview bg white
* refactor: center align items
* fix: breadcrumb padding
* refactor: make preview image rounded
* refactor: add condition for image container
* refactor: change alignment for mobile view
* fix: make footer button secondary
* refactor: clean code
* refactor: code indentantion
* refactor: remove space
* fix: Payment section cleanup
Co-authored-by: Summayya <frappe@Summayyas-MacBook-Air.local>
Co-authored-by: Marica <maricadsouza221197@gmail.com>
Co-authored-by: Deepesh Garg <deepeshgarg6@gmail.com>
diff --git a/erpnext/templates/includes/footer/footer_extension.html b/erpnext/templates/includes/footer/footer_extension.html
index c7f0d06..0072dc2 100644
--- a/erpnext/templates/includes/footer/footer_extension.html
+++ b/erpnext/templates/includes/footer/footer_extension.html
@@ -6,7 +6,7 @@
aria-label="{{ _('Your email address...') }}"
aria-describedby="footer-subscribe-button">
<div class="input-group-append">
- <button class="btn btn-sm btn-default"
+ <button class="btn btn-sm btn-secondary pl-3 pr-3 ml-2"
type="button" id="footer-subscribe-button">{{ _("Get Updates") }}</button>
</div>
</div>
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index f56dc3a..dc9ee23 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -1,5 +1,5 @@
{% macro product_image_square(website_image, css_class="") %}
-<div class="product-image product-image-square
+<div class="product-image product-image-square h-100 rounded
{% if not website_image -%} missing-image {%- endif %} {{ css_class }}"
{% if website_image -%}
style="background-image: url('{{ frappe.utils.quoted(website_image) | abs_url }}');"
diff --git a/erpnext/templates/includes/order/order_macros.html b/erpnext/templates/includes/order/order_macros.html
index 3f2c1f2..d95b289 100644
--- a/erpnext/templates/includes/order/order_macros.html
+++ b/erpnext/templates/includes/order/order_macros.html
@@ -3,7 +3,7 @@
{% macro item_name_and_description(d) %}
<div class="row item_name_and_description">
<div class="col-xs-4 col-sm-2 order-image-col">
- <div class="order-image">
+ <div class="order-image h-100">
{% if d.thumbnail or d.image %}
{{ product_image(d.thumbnail or d.image, no_border=True) }}
{% else %}
@@ -18,6 +18,9 @@
<div class="text-muted small item-description">
{{ html2text(d.description) | truncate(140) }}
</div>
+ <span class="text-muted mt-2 d-l-n order-qty">
+ {{ _("Qty ") }}({{ d.get_formatted("qty") }})
+ </span>
</div>
</div>
{% endmacro %}
diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html
index b821e62..0060ab3 100644
--- a/erpnext/templates/includes/order/order_taxes.html
+++ b/erpnext/templates/includes/order/order_taxes.html
@@ -1,84 +1,111 @@
{% if doc.taxes %}
-<tr>
- <td class="text-left" colspan="1">
- {{ _("Net Total") }}
- </td>
- <td class="text-right totals" colspan="3">
- {{ doc.get_formatted("net_total") }}
- </td>
-</tr>
+ <div class="w-100 order-taxes mt-5">
+ <div class="col-4 d-flex border-btm pb-5">
+ <div class="item-grand-total col-8">
+ {{ _("Net Total") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ {{ doc.get_formatted("net_total") }}
+ </div>
+ </div>
+ </div>
{% endif %}
{% for d in doc.taxes %}
{% if d.base_tax_amount %}
- <tr>
- <td class="text-left" colspan="1">
- {{ d.description }}
- </td>
- <td class="text-right totals" colspan="3">
- {{ d.get_formatted("base_tax_amount") }}
- </td>
- </tr>
+ <div class="order-taxes w-100 mt-5">
+ <div class="col-4 d-flex border-btm pb-5">
+ <div class="item-grand-total col-8">
+ {{ d.description }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ {{ doc.get_formatted("net_total") }}
+ </div>
+ </div>
+ </div>
{% endif %}
{% endfor %}
{% if doc.doctype == 'Quotation' %}
{% if doc.coupon_code %}
- <tr>
- <td class="text-left total-discount" colspan="1">
- {{ _("Savings") }}
- </td>
- <td class="text-right tot_quotation_discount total-discount totals" colspan="3">
- {% set tot_quotation_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}
- {% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }}
- </td>
- </tr>
+ <div class="w-100 mt-5 order-taxes font-weight-bold">
+ <div class="col-4 d-flex border-btm pb-5">
+ <div class="item-grand-total col-8">
+ {{ _("Savings") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ {% set tot_quotation_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_quotation_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}
+ {% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_quotation_discount | sum),currency=doc.currency) }} </div>
+ </div>
+ </div>
{% endif %}
{% endif %}
{% if doc.doctype == 'Sales Order' %}
{% if doc.coupon_code %}
- <tr>
- <td class="text-left total-discount" colspan="2" style="padding-right: 2rem;">
- {{ _("Applied Coupon Code") }}
- </td>
- <td class="text-right total-discount">
- <span>
- {%- for row in frappe.get_all(doctype="Coupon Code",
- fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
- <span>{{ row.coupon_code }}</span>
- {% endfor %}
- </span>
- </td>
- </tr>
- <tr>
- <td class="text-left total-discount" colspan="2">
- {{ _("Savings") }}
- </td>
- <td class="text-right total-discount">
- <span>
- {% set tot_SO_discount = [] %}
- {%- for item in doc.items -%}
- {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
- * item.discount_percentage) / 100)) %}{% endif %}
- {% endfor %}
- {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
- </span>
- </td>
- </tr>
+ <div class="w-100 order-taxes mt-5">
+ <div class="col-4 d-flex border-btm pb-5">
+ <div class="item-grand-total col-8">
+ {{ _("Total Amount") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ <span>
+ {% set total_amount = [] %}
+ {%- for item in doc.items -%}
+ {% if total_amount.append((item.price_list_rate * item.qty)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((total_amount | sum),currency=doc.currency) }}
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="order-taxes w-100 mt-5">
+ <div class="col-4 d-flex">
+ <div class="item-grand-total col-8">
+ {{ _("Applied Coupon Code") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ <span>
+ {%- for row in frappe.get_all(doctype="Coupon Code",
+ fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%}
+ <span>{{ row.coupon_code }}</span>
+ {% endfor %}
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="order-taxes mt-5">
+ <div class="col-4 d-flex border-btm pb-5">
+ <div class="item-grand-total col-8">
+ {{ _("Savings") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ <span>
+ {% set tot_SO_discount = [] %}
+ {%- for item in doc.items -%}
+ {% if tot_SO_discount.append((((item.price_list_rate * item.qty)
+ * item.discount_percentage) / 100)) %}{% endif %}
+ {% endfor %}
+ {{ frappe.utils.fmt_money((tot_SO_discount | sum),currency=doc.currency) }}
+ </span>
+ </div>
+ </div>
+ </div>
{% endif %}
{% endif %}
-<tr>
- <th class="text-left item-grand-total" colspan="1">
- {{ _("Grand Total") }}
- </th>
- <th class="text-right item-grand-total totals" colspan="3">
- {{ doc.get_formatted("grand_total") }}
- </th>
-</tr>
+<div class="w-100 mt-5 order-taxes font-weight-bold">
+ <div class="col-4 d-flex">
+ <div class="item-grand-total col-8">
+ {{ _("Grand Total") }}
+ </div>
+ <div class="item-grand-total col-4 text-right pr-0">
+ {{ doc.get_formatted("grand_total") }}
+ </div>
+ </div>
+</div>
diff --git a/erpnext/templates/includes/transaction_row.html b/erpnext/templates/includes/transaction_row.html
index 3cfb8d8..72d498c 100644
--- a/erpnext/templates/includes/transaction_row.html
+++ b/erpnext/templates/includes/transaction_row.html
@@ -1,20 +1,22 @@
<div class="web-list-item transaction-list-item">
- <div class="row">
+ <div class="row align-items-center">
<div class="col-sm-4">
- <span class="indicator small {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }}">
- {{ doc.name }}</span>
+ <span class="list-item-name font-weight-bold">{{ doc.name }}</span>
<div class="small text-muted transaction-time"
title="{{ frappe.utils.format_datetime(doc.modified, "medium") }}">
{{ frappe.utils.global_date_format(doc.modified) }}
</div>
</div>
- <div class="col-sm-5">
+ <div class="col-sm-3">
+ <span class="indicator-pill {{ doc.indicator_color or ("blue" if doc.docstatus==1 else "gray") }} list-item-status">{{doc.status}}</span>
+ </div>
+ <div class="col-sm-2">
<div class="small text-muted items-preview ellipsis ellipsis-width">
{{ doc.items_preview }}
</div>
</div>
{% if doc.get('grand_total') %}
- <div class="col-sm-3 text-right bold">
+ <div class="col-sm-3 text-right font-weight-bold item-total">
{{ doc.get_formatted("grand_total") }}
</div>
{% endif %}