From da43a5e371dede52acd26791ffa80ba4a13fc0ef Mon Sep 17 00:00:00 2001 From: Summayya Hashmani <58825865+sumaiya2908@users.noreply.github.com> Date: Tue, 4 Oct 2022 09:57:07 +0530 Subject: [PATCH] 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 Co-authored-by: Marica Co-authored-by: Deepesh Garg --- erpnext/public/scss/order-page.scss | 115 +++++++++ erpnext/public/scss/website.scss | 33 ++- .../includes/footer/footer_extension.html | 2 +- erpnext/templates/includes/macros.html | 2 +- .../includes/order/order_macros.html | 5 +- .../templates/includes/order/order_taxes.html | 159 +++++++----- .../templates/includes/transaction_row.html | 12 +- erpnext/templates/pages/order.html | 238 +++++++++--------- 8 files changed, 372 insertions(+), 194 deletions(-) create mode 100644 erpnext/public/scss/order-page.scss diff --git a/erpnext/public/scss/order-page.scss b/erpnext/public/scss/order-page.scss new file mode 100644 index 0000000000..6f5fe5d4d7 --- /dev/null +++ b/erpnext/public/scss/order-page.scss @@ -0,0 +1,115 @@ +#page-order { + .main-column { + .page-content-wrapper { + + .breadcrumb-container { + @media screen and (min-width: 567px) { + padding-left: var(--padding-sm); + } + } + + .container.my-4 { + background-color: var(--fg-color); + + @media screen and (min-width: 567px) { + padding: 1.25rem 1.5rem; + border-radius: var(--border-radius-md); + box-shadow: var(--card-shadow); + } + } + } + } +} + +.indicator-container { + @media screen and (max-width: 567px) { + padding-bottom: 0.8rem; + } +} + +.order-items { + padding: 1.5rem 0; + border-bottom: 1px solid var(--border-color); + color: var(--gray-700); + + @media screen and (max-width: 567px) { + align-items: flex-start !important; + } + .col-2 { + @media screen and (max-width: 567px) { + flex: auto; + max-width: 28%; + } + } + + .order-item-name { + font-size: var(--text-base); + font-weight: 500; + } + + .btn:focus, + .btn:hover { + background-color: var(--control-bg); + } + + + .col-6 { + @media screen and (max-width: 567px) { + max-width: 100%; + } + + &.order-item-name { + font-size: var(--text-base); + } + } +} + +.item-grand-total { + font-size: var(--text-base); +} + +.list-item-name, +.item-total, +.order-container, +.order-qty { + font-size: var(--text-md); +} + +.d-s-n { + @media screen and (max-width: 567px) { + display: none; + } +} + +.d-l-n { + @media screen and (min-width: 567px) { + display: none; + } +} + +.border-btm { + border-bottom: 1px solid var(--border-color); +} + +.order-taxes { + display: flex; + + @media screen and (min-width: 567px) { + justify-content: flex-end; + } + + .col-4 { + padding-right: 0; + + .col-8 { + padding-left: 0; + padding-right: 0; + } + + @media screen and (max-width: 567px) { + padding-left: 0; + flex: auto; + max-width: 100%; + } + } +} \ No newline at end of file diff --git a/erpnext/public/scss/website.scss b/erpnext/public/scss/website.scss index 9ea8416034..b5e97f1c34 100644 --- a/erpnext/public/scss/website.scss +++ b/erpnext/public/scss/website.scss @@ -1,3 +1,4 @@ +@import './order-page'; .filter-options { max-height: 300px; @@ -32,19 +33,29 @@ height: 24px; } -.website-list .result { - margin-top: 2rem; -} +.website-list { + background-color: var(--fg-color); + padding: 0 var(--padding-lg); + border-radius: var(--border-radius-md); -.result { - border-bottom: 1px solid var(--border-color); + @media screen and (max-width: 567px) { + margin-left: -2rem; + } + + &.result { + border-bottom: 1px solid var(--border-color); + } } .transaction-list-item { padding: 1rem 0; - border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); position: relative; + &:only-child, &:last-child { + border: 0; + } + a.transaction-item-link { position: absolute; top: 0; @@ -68,3 +79,13 @@ line-height: 1.3; } } + +.list-item-name, .item-total { + font-size: var(--font-size-sm); +} + +.items-preview { + @media screen and (max-width: 567px) { + margin-top: 1rem; + } +} \ No newline at end of file diff --git a/erpnext/templates/includes/footer/footer_extension.html b/erpnext/templates/includes/footer/footer_extension.html index c7f0d06dff..0072dc280c 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">
-
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html index f56dc3a454..dc9ee234d9 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="") %} -
-
+
{% if d.thumbnail or d.image %} {{ product_image(d.thumbnail or d.image, no_border=True) }} {% else %} @@ -18,6 +18,9 @@
{{ html2text(d.description) | truncate(140) }}
+ + {{ _("Qty ") }}({{ d.get_formatted("qty") }}) +
{% endmacro %} diff --git a/erpnext/templates/includes/order/order_taxes.html b/erpnext/templates/includes/order/order_taxes.html index b821e6253d..0060ab39cc 100644 --- a/erpnext/templates/includes/order/order_taxes.html +++ b/erpnext/templates/includes/order/order_taxes.html @@ -1,84 +1,111 @@ {% if doc.taxes %} - - - {{ _("Net Total") }} - - - {{ doc.get_formatted("net_total") }} - - +
+
+
+ {{ _("Net Total") }} +
+
+ {{ doc.get_formatted("net_total") }} +
+
+
{% endif %} {% for d in doc.taxes %} {% if d.base_tax_amount %} - - - {{ d.description }} - - - {{ d.get_formatted("base_tax_amount") }} - - +
+
+
+ {{ d.description }} +
+
+ {{ doc.get_formatted("net_total") }} +
+
+
{% endif %} {% endfor %} {% if doc.doctype == 'Quotation' %} {% if doc.coupon_code %} - - - {{ _("Savings") }} - - - {% 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) }} - - +
+
+
+ {{ _("Savings") }} +
+
+ {% 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) }}
+
+
{% endif %} {% endif %} {% if doc.doctype == 'Sales Order' %} {% if doc.coupon_code %} - - - {{ _("Applied Coupon Code") }} - - - - {%- for row in frappe.get_all(doctype="Coupon Code", - fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%} - {{ row.coupon_code }} - {% endfor %} - - - - - - {{ _("Savings") }} - - - - {% 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) }} - - - +
+
+
+ {{ _("Total Amount") }} +
+
+ + {% 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) }} + +
+
+
+
+
+
+ {{ _("Applied Coupon Code") }} +
+
+ + {%- for row in frappe.get_all(doctype="Coupon Code", + fields=["coupon_code"], filters={ "name":doc.coupon_code}) -%} + {{ row.coupon_code }} + {% endfor %} + +
+
+
+
+
+
+ {{ _("Savings") }} +
+
+ + {% 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) }} + +
+
+
{% endif %} {% endif %} - - - {{ _("Grand Total") }} - - - {{ doc.get_formatted("grand_total") }} - - +
+
+
+ {{ _("Grand Total") }} +
+
+ {{ doc.get_formatted("grand_total") }} +
+
+
diff --git a/erpnext/templates/includes/transaction_row.html b/erpnext/templates/includes/transaction_row.html index 3cfb8d8440..72d498c998 100644 --- a/erpnext/templates/includes/transaction_row.html +++ b/erpnext/templates/includes/transaction_row.html @@ -1,20 +1,22 @@
-
+
- - {{ doc.name }} + {{ doc.name }}
{{ frappe.utils.global_date_format(doc.modified) }}
-
+
+ {{doc.status}} +
+
{{ doc.items_preview }}
{% if doc.get('grand_total') %} -
+
{{ doc.get_formatted("grand_total") }}
{% endif %} diff --git a/erpnext/templates/pages/order.html b/erpnext/templates/pages/order.html index ec1d49788b..6b354b2fab 100644 --- a/erpnext/templates/pages/order.html +++ b/erpnext/templates/pages/order.html @@ -5,149 +5,159 @@ {% include "templates/includes/breadcrumbs.html" %} {% endblock %} -{% block title %}{{ doc.name }}{% endblock %} +{% block title %} + {{ doc.name }} +{% endblock %} {% block header %} -

{{ doc.name }}

+

{{ doc.name }}

{% endblock %} {% block header_actions %} -
- - +
+
+ + +
+
+
+

+ + {{ _("Pay") }} {{doc.get_formatted("grand_total") }} + +

+
+
{% endblock %} {% block page_content %} -
-
- - {% if doc.doctype == "Quotation" and not doc.docstatus %} - {{ _("Pending") }} - {% else %} - {{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }} +
+
+
+ {{ frappe.utils.format_date(doc.transaction_date, 'medium') }} + {% if doc.valid_till %} +

+ {{ _("Valid Till") }}: {{ frappe.utils.format_date(doc.valid_till, 'medium') }} +

{% endif %} - +
-
- {{ frappe.utils.format_date(doc.transaction_date, 'medium') }} - {% if doc.valid_till %} -

- {{ _("Valid Till") }}: {{ frappe.utils.format_date(doc.valid_till, 'medium') }} -

- {% endif %} -
-
- -

- {%- set party_name = doc.supplier_name if doc.doctype in ['Supplier Quotation', 'Purchase Invoice', 'Purchase Order'] else doc.customer_name %} - {{ party_name }} - - {% if doc.contact_display and doc.contact_display != party_name %} -
- {{ doc.contact_display }} - {% endif %} -

- - {% if doc._header %} - {{ doc._header }} - {% endif %} - -
- - - - - - - - - {% for d in doc.items %} - - - - - - {% endfor %} - -
- {{ _("Item") }} - - {{ _("Quantity") }} - - {{ _("Amount") }} -
- {{ item_name_and_description(d) }} - - {{ d.qty }} - {% if d.delivered_qty is defined and d.delivered_qty != None %} -

{{ _("Delivered") }} {{ d.delivered_qty }}

+
+
+ + {% if doc.doctype == "Quotation" and not doc.docstatus %} + {{ _("Pending") }} + {% else %} + {{ _(doc.get('indicator_title')) or _(doc.status) or _("Submitted") }} {% endif %} -
- {{ d.get_formatted("amount") }} -

{{ _("Rate:") }} {{ d.get_formatted("rate") }}

-
- -
- + + +
+ {%- set party_name = doc.supplier_name if doc.doctype in ['Supplier Quotation', 'Purchase Invoice', 'Purchase + Order'] else doc.customer_name %} + {{ party_name }} + + {% if doc.contact_display and doc.contact_display != party_name %} +
+ {{ doc.contact_display }} + {% endif %} +
+ + + {% if doc._header %} + {{ doc._header }} + {% endif %} + +
+ +
+
+ + {{ _("Item") }} + + + {{ _("Quantity") }} + + + {{ _("Rate") }} + + + {{ _("Amount") }} + +
+ {% for d in doc.items %} +
+ + {{ item_name_and_description(d) }} + + + + {{ d.get_formatted("qty") }} + + + {{ d.get_formatted("rate") }} + + + {{ d.get_formatted("amount") }} + +
+ {% endfor %} +
+ + +
{% include "erpnext/templates/includes/order/order_taxes.html" %} -
+
{% if enabled_checkout and ((doc.doctype=="Sales Order" and doc.per_billed <= 0) - or (doc.doctype=="Sales Invoice" and doc.outstanding_amount > 0)) %} + or (doc.doctype=="Sales Invoice" and doc.outstanding_amount> 0)) %}
-
-
-
- Payment -
-
-
{% if available_loyalty_points %} +
+
+
+ Loyalty Points +
+
+
+
Enter Loyalty Points
- +
-

Available Points: {{ available_loyalty_points }}

+

Available Points: {{ + available_loyalty_points }}

{% endif %}
- -
-
-
-

- - {{ _("Pay") }} {{ doc.get_formatted("grand_total") }} - -

-
-
-
-
@@ -172,17 +182,17 @@
{% endif %} -
{% if doc.terms %}
-

{{ doc.terms }}

+
+

{{ doc.terms }}

{% endif %} {% endblock %} {% block script %} - + -{% endblock %} +{% endblock %} \ No newline at end of file