From dffef1285d3c5ce4f1212fe02725374270983e10 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Tue, 22 Mar 2022 15:36:25 +0530 Subject: [PATCH] fix(styles): fix styles for my account and web forms --- .../web_form/edit_profile/edit_profile.json | 252 ++++++++++-------- frappe/public/js/frappe/web_form/web_form.js | 9 +- frappe/public/scss/website/footer.scss | 8 +- frappe/public/scss/website/my_account.scss | 29 +- frappe/public/scss/website/web_form.scss | 6 +- frappe/www/me.html | 18 +- frappe/www/me.py | 1 - frappe/www/third_party_apps.html | 58 ++-- frappe/www/third_party_apps.py | 3 +- frappe/www/update-password.html | 8 +- 10 files changed, 211 insertions(+), 181 deletions(-) diff --git a/frappe/core/web_form/edit_profile/edit_profile.json b/frappe/core/web_form/edit_profile/edit_profile.json index 7072584670..c04e705820 100644 --- a/frappe/core/web_form/edit_profile/edit_profile.json +++ b/frappe/core/web_form/edit_profile/edit_profile.json @@ -1,133 +1,159 @@ { - "accept_payment": 0, - "allow_comments": 0, - "allow_delete": 0, - "allow_edit": 1, - "allow_incomplete": 0, - "allow_multiple": 0, - "allow_print": 0, - "amount": 0.0, - "amount_based_on_field": 0, - "breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]", - "creation": "2016-09-19 05:16:59.242754", - "doc_type": "User", - "docstatus": 0, - "doctype": "Web Form", - "idx": 0, - "introduction_text": "", - "is_standard": 1, - "login_required": 1, - "max_attachment_size": 0, - "modified": "2019-01-28 12:45:17.158069", - "modified_by": "Administrator", - "module": "Core", - "name": "edit-profile", - "owner": "Administrator", - "published": 1, - "route": "update-profile", - "show_in_grid": 0, - "show_sidebar": 1, - "sidebar_items": [], - "success_message": "Profile updated successfully.", - "success_url": "/me", - "title": "Update Profile", + "accept_payment": 0, + "allow_comments": 0, + "allow_delete": 0, + "allow_edit": 1, + "allow_incomplete": 0, + "allow_multiple": 0, + "allow_print": 0, + "amount": 0.0, + "amount_based_on_field": 0, + "apply_document_permissions": 0, + "breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]", + "creation": "2016-09-19 05:16:59.242754", + "doc_type": "User", + "docstatus": 0, + "doctype": "Web Form", + "idx": 0, + "introduction_text": "", + "is_multi_step_form": 0, + "is_standard": 1, + "login_required": 1, + "max_attachment_size": 0, + "modified": "2022-03-22 15:00:43.456738", + "modified_by": "Administrator", + "module": "Core", + "name": "edit-profile", + "owner": "Administrator", + "published": 1, + "route": "update-profile", + "route_to_success_link": 0, + "show_attachments": 0, + "show_in_grid": 0, + "show_sidebar": 0, + "sidebar_items": [], + "success_message": "Profile updated successfully.", + "success_url": "/me", + "title": "Update Profile", "web_form_fields": [ { - "allow_read_on_all_link_options": 0, - "fieldname": "first_name", - "fieldtype": "Data", - "hidden": 0, - "label": "First Name", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 1, + "allow_read_on_all_link_options": 0, + "fieldname": "first_name", + "fieldtype": "Data", + "hidden": 0, + "label": "First Name", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 1, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "middle_name", - "fieldtype": "Data", - "hidden": 0, - "label": "Middle Name (Optional)", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "middle_name", + "fieldtype": "Data", + "hidden": 0, + "label": "Middle Name (Optional)", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "last_name", - "fieldtype": "Data", - "hidden": 0, - "label": "Last Name", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "last_name", + "fieldtype": "Data", + "hidden": 0, + "label": "Last Name", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "description": "", - "fieldname": "user_image", - "fieldtype": "Attach Image", - "hidden": 0, - "label": "User Image", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "", + "fieldtype": "Column Break", + "hidden": 0, + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldtype": "Section Break", - "hidden": 0, - "label": "More Information", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "description": "", + "fieldname": "user_image", + "fieldtype": "Attach Image", + "hidden": 0, + "label": "Profile Picture", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "phone", - "fieldtype": "Data", - "hidden": 0, - "label": "Phone", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldtype": "Section Break", + "hidden": 0, + "label": "More Information", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "mobile_no", - "fieldtype": "Data", - "hidden": 0, - "label": "Mobile Number", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "phone", + "fieldtype": "Data", + "hidden": 0, + "label": "Phone", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "description": "", - "fieldname": "language", - "fieldtype": "Link", - "hidden": 0, - "label": "Language", - "max_length": 0, - "max_value": 0, - "options": "Language", - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "mobile_no", + "fieldtype": "Data", + "hidden": 0, + "label": "Mobile Number", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, + "show_in_filter": 0 + }, + { + "allow_read_on_all_link_options": 0, + "fieldname": "", + "fieldtype": "Column Break", + "hidden": 0, + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, + "show_in_filter": 0 + }, + { + "allow_read_on_all_link_options": 0, + "description": "", + "fieldname": "language", + "fieldtype": "Link", + "hidden": 0, + "label": "Language", + "max_length": 0, + "max_value": 0, + "options": "Language", + "read_only": 0, + "reqd": 0, "show_in_filter": 0 } ] diff --git a/frappe/public/js/frappe/web_form/web_form.js b/frappe/public/js/frappe/web_form/web_form.js index a45fc941d3..6ec995efde 100644 --- a/frappe/public/js/frappe/web_form/web_form.js +++ b/frappe/public/js/frappe/web_form/web_form.js @@ -164,9 +164,12 @@ export default class WebForm extends frappe.ui.FieldGroup { this.save() ); - this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () => - this.save() - ); + if ($('main').height() > 600) { + // add button on footer if page is long + this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () => + this.save() + ); + } } setup_cancel_button() { diff --git a/frappe/public/scss/website/footer.scss b/frappe/public/scss/website/footer.scss index f3bdfed07f..e5dae72808 100644 --- a/frappe/public/scss/website/footer.scss +++ b/frappe/public/scss/website/footer.scss @@ -1,6 +1,8 @@ .web-footer { - padding: 5rem 0; + margin: 5rem 0; min-height: 140px; + background-color: var(--fg-color); + border-top: 1px solid $border-color; } .footer-logo { @@ -76,8 +78,6 @@ } .footer-info { - margin-top: 1rem; - border-top: 1px solid $border-color; color: $text-muted; font-size: $font-size-sm; } @@ -98,4 +98,4 @@ font-size: $font-size-sm; } } -} \ No newline at end of file +} diff --git a/frappe/public/scss/website/my_account.scss b/frappe/public/scss/website/my_account.scss index 22b29cc3ec..58075580a2 100644 --- a/frappe/public/scss/website/my_account.scss +++ b/frappe/public/scss/website/my_account.scss @@ -27,15 +27,16 @@ } } +.my-account-container { + max-width: 800px; + margin: auto; +} + .account-info { background-color: var(--fg-color); + box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); padding: var(--padding-sm) 25px; - max-width: 850px; - - @include media-breakpoint-up(sm) { - margin-left: 0; - } @include media-breakpoint-down(sm) { padding: 0; @@ -97,21 +98,3 @@ border: 0; } } - -//styles for third party apps page -//center wrt to outer most container and not immediate parent -.empty-apps-state { - position: relative; - padding-top: 10rem; - margin-left: -250px; - text-align: center; - - @include media-breakpoint-down(sm) { - margin: auto; - padding-top: 5rem; - } - - @include media-breakpoint-down(md) { - margin-left: 0; - } -} \ No newline at end of file diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss index b7df649f59..97e5820194 100644 --- a/frappe/public/scss/website/web_form.scss +++ b/frappe/public/scss/website/web_form.scss @@ -2,6 +2,10 @@ [data-doctype="Web Form"] { + .page-header h3 { + margin-top: 0; + margin-bottom: 0; + } .page-content-wrapper { .breadcrumb-container.container { @@ -75,4 +79,4 @@ } } } -} \ No newline at end of file +} diff --git a/frappe/www/me.html b/frappe/www/me.html index ca4d4a4e5a..8b706afd6a 100644 --- a/frappe/www/me.html +++ b/frappe/www/me.html @@ -3,10 +3,9 @@ {% block title %} {{ _("My Account") }} {% endblock %} -{% block header %} -

{{_("My Account") }}

-{% endblock %} {% block page_content %} +
+