fix(styles): fix styles for my account and web forms

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
   }
  ]

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() {

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;
 		}
 	}
-}
+}

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;
-	}
-}

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 @@
 			}
 		}
 	}
-}
+}

frappe/www/me.html

@@ -3,10 +3,9 @@
 {% block title %}
 {{ _("My Account") }}
 {% endblock %}
-{% block header %}
-<h3 class="my-account-header">{{_("My Account") }}</h3>
-{% endblock %}
 {% block page_content %}
+<div class="my-account-container">
+<h3 class="my-account-header">{{_("My Account") }}</h3>
 <div class="row account-info d-flex flex-column">
 	<div class="col d-flex justify-content-between align-items-center">
 		<div>
@@ -79,16 +78,5 @@
 	</div>
 	{% endif %}
 </div>
-<div class="row d-block d-sm-none">
-	<div class="col-12 side-list">
-		<ul class="list-group">
-			{% for item in sidebar_items -%}
-				<a class="list-group-item" href="{{ item.route }}"
-					{% if item.target %}target="{{ item.target }}"{% endif %}>
-					{{ _(item.title or item.label) }}
-				</a>
-			{%- endfor %}
-		</ul>
-	</div>
 </div>
-{% endblock %}
+{% endblock %}

frappe/www/me.py

@@ -12,4 +12,3 @@ def get_context(context):
 		frappe.throw(_("You need to be logged in to access this page"), frappe.PermissionError)
 
 	context.current_user = frappe.get_doc("User", frappe.session.user)
-	context.show_sidebar=True

frappe/www/third_party_apps.html

@@ -1,9 +1,6 @@
 {% extends "templates/web.html" %}
 
 {% block title %} {{ _("Third Party Apps") }} {% endblock %}
-{% block header %}
-	<h3 class="my-account-header">{{ _("Third Party Apps") }}</h3>
-{% endblock %}
 
 {% block page_sidebar %}
 {% include "templates/includes/web_sidebar.html" %}
@@ -13,25 +10,24 @@
 {% endblock %}
 
 {% block page_content %}
-
-<div class='padding'></div>
-
+<h3 class="my-account-header">{{ _("Third Party Apps") }}</h3>
+<div class="third-party-wrapper">
 {% if app %}
 <h4>{{ app.app_name }}</h4>
-	<div class="web-list-item">
-		<div class="row">
-			<div class="col-xs-12">
-				<div class="well">
-					<div class="text-muted">{{ _("This will log out {0} from all other devices").format(app.app_name) }}</div>
-					<div class="padding"></div>
-					<div class="text-right">
-						<button class="btn btn-default" onclick="location.href = '/third_party_apps';">Cancel</button>
-						<button class="btn btn-danger btn-delete-app" data-client_id="{{ app.client_id }}">Revoke</button>
-					</div>
+<div class="web-list-item">
+	<div class="row">
+		<div class="col-xs-12">
+			<div class="well">
+				<div class="text-muted">{{ _("This will log out {0} from all other devices").format(app.app_name) }}</div>
+				<div class="padding"></div>
+				<div class="text-right">
+					<button class="btn btn-default" onclick="location.href = '/third_party_apps';">Cancel</button>
+					<button class="btn btn-danger btn-delete-app" data-client_id="{{ app.client_id }}">Revoke</button>
 				</div>
 			</div>
 		</div>
 	</div>
+</div>
 {% elif apps|length > 0 %}
 <h4>{{ _("Active Sessions") }}</h4>
 	{% for app in apps %}
@@ -62,9 +58,37 @@
 	</div>
 </div>
 {% endif %}
-<div class="padding"></div>
+</div>
 <script>
 {% include "templates/includes/integrations/third_party_apps.js" %}
 </script>
+<style>
+body {
+	background-color: var(--bg-color);
+}
+
+.my-account-header, .third-party-wrapper {
+	max-width: 800px;
+	margin: auto;
+}
+
+.my-account-header {
+	margin-top: 3rem;
+	margin-bottom: 1rem;
+}
+
+.third-party-wrapper {
+	background-color: var(--fg-color);
+	border-radius: var(--border-radius-md);
+	box-shadow: var(--card-shadow);
+}
+
+.empty-apps-state {
+	margin: auto;
+	text-align: center;
+	padding-top: 6rem;
+	padding-bottom: 6rem;
+}
 
+</style>
 {% endblock %}

frappe/www/third_party_apps.py

@@ -34,7 +34,6 @@ def get_context(context):
 		context.app = app
 
 	context.apps = client_apps
-	context.show_sidebar = True
 
 def get_first_login(client):
 	login_date = frappe.get_all("OAuth Bearer Token",
@@ -49,4 +48,4 @@ def get_first_login(client):
 def delete_client(client_id):
 	active_client_id_tokens = frappe.get_all("OAuth Bearer Token", filters=[["user", "=", frappe.session.user], ["client","=", client_id]])
 	for token in active_client_id_tokens:
-		frappe.delete_doc("OAuth Bearer Token", token.get("name"),  ignore_permissions=True)
+		frappe.delete_doc("OAuth Bearer Token", token.get("name"),  ignore_permissions=True)

frappe/www/update-password.html

@@ -12,11 +12,11 @@
 		<form id="reset-password">
 			<div class="form-group">
 				<input id="old_password" type="password"
-					class="form-control" placeholder="{{ _('Old Password') }}">
+					class="form-control mb-4" placeholder="{{ _('Old Password') }}">
 			</div>
 			<div class="form-group">
 				<input id="new_password" type="password"
-					class="form-control" placeholder="{{ _('New Password') }}">
+					class="form-control mb-4" placeholder="{{ _('New Password') }}">
 				<span class="password-strength-indicator indicator"></span>
 			</div>
 			<div class="form-group">
@@ -216,6 +216,10 @@ frappe.ready(function() {
 
 {% block style %}
 <style>
+	body {
+		background-color: var(--bg-color);
+	}
+
 	.password-strength-indicator {
 		float: right;
 		padding: 15px;