Merge pull request #16356 from rmehta/page-builder-updates

feat(website): added new templates to page builder and refactored typography to be more consistent

cypress/integration/web_form.js

@@ -7,8 +7,8 @@ context('Web Form', () => {
 		cy.visit('/update-profile');
 		cy.get_field('last_name', 'Data').type('_Test User', {force: true}).wait(200);
 		cy.get('.web-form-actions .btn-primary').click();
-		cy.wait(500);
-		cy.get('.modal.show > .modal-dialog').should('be.visible');
+		cy.wait(5000);
+		cy.url().should('include', '/me');
 	});
 
 	it('Navigate and Submit a MultiStep WebForm', () => {
@@ -16,14 +16,12 @@ context('Web Form', () => {
 			cy.visit('/update-profile-duplicate');
 			cy.get_field('last_name', 'Data').type('_Test User', {force: true}).wait(200);
 			cy.get('.btn-next').should('be.visible');
-			cy.get('.web-form-footer .btn-primary').should('not.be.visible');
 			cy.get('.btn-next').click();
 			cy.get('.btn-previous').should('be.visible');
 			cy.get('.btn-next').should('not.be.visible');
-			cy.get('.web-form-footer .btn-primary').should('be.visible');
 			cy.get('.web-form-actions .btn-primary').click();
-			cy.wait(500);
-			cy.get('.modal.show > .modal-dialog').should('be.visible');
+			cy.wait(5000);
+			cy.url().should('include', '/me');
 		});
 	});
 });

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

@@ -25,7 +25,6 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		this.setup_listeners();
 		if (this.introduction_text) this.set_form_description(this.introduction_text);
 		if (this.allow_print && !this.is_new) this.setup_print_button();
-		if (this.allow_delete && !this.is_new) this.setup_delete_button();
 		if (this.is_new) this.setup_cancel_button();
 		this.setup_primary_action();
 		this.setup_previous_next_button();
@@ -79,9 +78,9 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		}
 
 		$('.web-form-footer').after(`
-			<div id="form-step-footer" class="pull-right">
-				<button class="btn btn-primary btn-previous btn-sm ml-2">${__("Previous")}</button>
-				<button class="btn btn-primary btn-next btn-sm ml-2">${__("Next")}</button>
+			<div id="form-step-footer" class="text-right">
+				<button class="btn btn-default btn-previous btn-sm ml-2">${__("Previous")}</button>
+				<button class="btn btn-default btn-next btn-sm ml-2">${__("Next")}</button>
 			</div>
 		`);
 
@@ -141,6 +140,7 @@ export default class WebForm extends frappe.ui.FieldGroup {
 	set_form_description(intro) {
 		let intro_wrapper = document.getElementById('introduction');
 		intro_wrapper.innerHTML = intro;
+		intro_wrapper.classList.remove('hidden');
 	}
 
 	add_button(name, type, action, wrapper_class=".web-form-actions") {
@@ -164,25 +164,18 @@ 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 (!this.is_multi_step_form && $('.frappe-card').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() {
 		this.add_button_to_header(__("Cancel", null, "Button in web form"), "light", () => this.cancel());
 	}
 
-	setup_delete_button() {
-		frappe.has_permission(this.doc_type, "", "delete", () => {
-			this.add_button_to_header(
-				frappe.utils.icon('delete'),
-				"danger",
-				() => this.delete()
-			);
-		});
-	}
-
 	setup_print_button() {
 		this.add_button_to_header(
 			frappe.utils.icon('print'),
@@ -359,17 +352,6 @@ export default class WebForm extends frappe.ui.FieldGroup {
 		return true;
 	}
 
-	delete() {
-		frappe.call({
-			type: "POST",
-			method: "frappe.website.doctype.web_form.web_form.delete",
-			args: {
-				web_form_name: this.name,
-				docname: this.doc.name
-			}
-		});
-	}
-
 	print() {
 		window.open(`/printview?
 			doctype=${this.doc_type}
@@ -386,21 +368,19 @@ export default class WebForm extends frappe.ui.FieldGroup {
 			window.location.href = data;
 		}
 
-		const success_dialog = new frappe.ui.Dialog({
-			title: __("Saved Successfully"),
-			secondary_action: () => {
-				if (this.success_url) {
-					window.location.href = this.success_url;
-				} else if(this.login_required) {
-					window.location.href =
-						window.location.pathname + "?name=" + data.name;
-				}
-			}
-		});
-
-		success_dialog.show();
 		const success_message =
-			this.success_message || __("Your information has been submitted");
-		success_dialog.set_message(success_message);
+			this.success_message || __("Submitted");
+
+		frappe.toast({message: success_message, indicator:'green'});
+
+		// redirect
+		setTimeout(() => {
+			if (this.success_url) {
+				window.location.href = this.success_url;
+			} else if(this.login_required) {
+				window.location.href =
+					window.location.pathname + "?name=" + data.name;
+			}
+		}, 2000);
 	}
 }

frappe/public/js/frappe/web_form/web_form_list.js

@@ -6,7 +6,7 @@ export default class WebFormList {
 	constructor(opts) {
 		Object.assign(this, opts);
 		frappe.web_form_list = this;
-		this.wrapper = document.getElementById("datatable");
+		this.wrapper = document.getElementById("list-table");
 		this.make_actions();
 		this.make_filters();
 		$('.link-btn').remove();
@@ -320,6 +320,7 @@ frappe.ui.WebFormListRow = class WebFormListRow {
 	make_row() {
 		// Add Checkboxes
 		let cell = this.row.insertCell();
+		cell.classList.add('list-col-checkbox');
 
 		this.checkbox = document.createElement("input");
 		this.checkbox.type = "checkbox";
@@ -332,6 +333,7 @@ frappe.ui.WebFormListRow = class WebFormListRow {
 
 		// Add Serial Number
 		let serialNo = this.row.insertCell();
+		serialNo.classList.add('list-col-serial');
 		serialNo.innerText = this.serial_number;
 
 		this.columns.forEach(field => {

frappe/public/js/frappe/web_form/webform_script.js

@@ -52,11 +52,11 @@ frappe.ready(function() {
 			const data = setup_fields(r.message);
 			let web_form_doc = data.web_form;
 
-			if (web_form_doc.name && web_form_doc.allow_edit === 0) {
-				if (!window.location.href.includes("?new=1")) {
-					window.location.replace(window.location.pathname + "?new=1");
-				}
-			}
+			// if (web_form_doc.name && web_form_doc.allow_edit === 0) {
+			// 	if (!window.location.href.includes("?new=1")) {
+			// 		window.location.replace(window.location.pathname + "?new=1");
+			// 	}
+			// }
 			let doc = r.message.doc || build_doc(r.message);
 			web_form.prepare(web_form_doc, r.message.doc && web_form_doc.allow_edit === 1 ? r.message.doc : {});
 			web_form.make();

frappe/public/scss/desk/avatar.scss

@@ -111,8 +111,8 @@
 }
 
 .avatar-large {
-	width: 72px;
-	height: 72px;
+	width: 64px;
+	height: 64px;
 
 	.standard-image {
 		font-size: var(--text-2xl);

frappe/public/scss/website/base.scss

@@ -1,3 +1,13 @@
+$font-size-xs: 0.7rem;
+$font-size-sm: 0.85rem;
+$font-size-lg: 1.12rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+$font-size-3xl: 2rem;
+$font-size-4xl: 2.5rem;
+$font-size-5xl: 3rem;
+$font-size-6xl: 4rem;
+
 html {
 	height: 100%;
 }
@@ -14,45 +24,80 @@ img {
 	height: auto;
 }
 
+h1, h2, h3, h4 {
+	font-weight: 600;
+}
+
 h1 {
 	font-size: $font-size-3xl;
-	font-weight: 800;
 	line-height: 1.25;
 	letter-spacing: -0.025em;
-	margin-bottom: 1rem;
+	margin-top: 3rem;
+	margin-bottom: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
+		font-size: $font-size-5xl;
 		line-height: 2.5rem;
-		font-size: $font-size-4xl;
+		margin-top: 3.5rem;
+		margin-bottom: 1.25rem;
 	}
 	@include media-breakpoint-up(xl) {
+		font-size: $font-size-6xl;
 		line-height: 1;
-		font-size: $font-size-5xl;
+		margin-top: 4rem;
 	}
 }
 
 h2 {
-	font-size: $font-size-xl;
-	font-weight: 700;
+	font-size: $font-size-2xl;
+	margin-top: 2rem;
 	margin-bottom: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
-		font-size: $font-size-2xl;
-	}
-	@include media-breakpoint-up(md) {
 		font-size: $font-size-3xl;
+		margin-top: 4rem;
+		margin-bottom: 1rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-4xl;
+		margin-top: 4rem;
 	}
 }
 
 h3 {
-	font-size: $font-size-base;
-	font-weight: 600;
+	font-size: $font-size-xl;
+	margin-top: 1.5rem;
 	margin-bottom: 0.5rem;
 
 	@include media-breakpoint-up(sm) {
-		font-size: $font-size-lg;
+		font-size: $font-size-2xl;
+		margin-top: 2.5rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-3xl;
+		margin-top: 3.5rem;
 	}
-	@include media-breakpoint-up(md) {
+}
+
+h4 {
+	font-size: $font-size-lg;
+	margin-top: 1rem;
+	margin-bottom: 0.5rem;
+
+	@include media-breakpoint-up(sm) {
 		font-size: $font-size-xl;
+		margin-top: 1.25rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-2xl;
+		margin-top: 1.75rem;
 	}
+
+	a {
+		color: $body-color;
+	}
+}
+
+.btn.btn-lg {
+	font-size: $font-size-lg;
 }

frappe/public/scss/website/blog.scss

@@ -57,12 +57,12 @@
 
 	.blog-card-footer {
 		display: flex;
-		align-items: center;
+		align-items: top;
 		margin-top: 0.5rem;
 
 		.avatar {
+			margin-top: 0.4rem;
 			margin-right: 0.5rem;
-			border-radius: 50%;
 		}
 	}
 }
@@ -119,106 +119,4 @@
 			}
 		}
 	}
-
-	.add-comment-button {
-		margin-left: 35px;
-	}
-
-	.timeline-dot {
-		width: 16px;
-		height: 16px;
-		border-radius: 50%;
-		position: absolute;
-		top: 8px;
-		left: 22px;
-		background-color: var(--fg-color);
-		border: 1px solid var(--dark-border-color);
-
-		&:before {
-			content: ' ';
-			background: var(--gray-600);
-			position: absolute;
-			top: 5px;
-			left: 5px;
-			border-radius: 50%;
-			height: 4px;
-			width: 4px;
-		}
-	}
-
-	.blog-comments {
-		.comment-form-wrapper {
-			display: none;
-		}
-
-		.add-comment-section {
-			.login-required {
-				padding: var(--padding-sm);
-				border-radius: var(--border-radius-sm);
-				box-shadow: var(--card-shadow);
-			}
-
-			.new-comment {
-				display: flex;
-				padding: var(--padding-lg);
-				box-shadow: var(--card-shadow);
-				border-radius: var(--border-radius-md);
-
-				.new-comment-fields {
-					flex: 1;
-
-					.form-label {
-						font-weight: var(--text-bold);
-					}
-
-					.comment-text-area textarea {
-						resize: none;
-					}
-
-					@media (min-width: 576px) {
-						.comment-by {
-							padding-right: 0px !important;
-							padding-bottom: 0px !important;
-						}
-					}
-				}
-			}
-		}
-
-
-		#comment-list {
-			position: relative;
-			padding-left: var(--padding-xl);
-
-			&:before {
-				content: " ";
-				position: absolute;
-				top: var(--comment-timeline-top);
-				bottom: var(--comment-timeline-bottom);
-				border-left: 1px solid var(--dark-border-color);
-			}
-
-			.comment-row {
-				position: relative;
-
-				.comment-avatar {
-					position: absolute;
-					top: 10px;
-					left: -17px;
-				}
-
-				.comment-content {
-					box-shadow: var(--card-shadow);
-					border-radius: var(--border-radius-md);
-					padding: var(--padding-md);
-					margin-left: 35px;
-					flex: 1;
-
-					.content p{
-						margin-bottom: 0px;
-					}
-				}
-			}
-		}
-	}
 }

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/index.scss

@@ -5,7 +5,6 @@
 @import "../common/global";
 @import "../common/icons";
 @import "../common/alert";
-@import 'base';
 @import "../common/flex";
 @import "../common/buttons";
 @import "../common/modal";
@@ -14,6 +13,7 @@
 @import "../common/indicator";
 @import "../common/controls";
 @import "../common/awesomeplete";
+@import 'base';
 @import 'multilevel_dropdown';
 @import 'website_image';
 @import 'website_avatar';

frappe/public/scss/website/markdown.scss

@@ -1,30 +1,12 @@
-$font-sizes-desktop: (
-	"sm": 0.75rem,
-	"base": 1rem,
-	"lg": 1.125rem,
-	"xl": 1.41rem,
-	"2xl": 1.6rem,
-	"3xl": 2rem
-);
-
-$font-sizes-mobile: (
-	"sm": 0.75rem,
-	"base": 1rem,
-	"lg": 1.125rem,
-	"xl": 1.25rem,
-	"2xl": 1.5rem,
-	"3xl": 1.75rem
-);
+
+.section-markdown > .from-markdown {
+	max-width: 50rem;
+	margin: auto;
+}
 
 .from-markdown {
 	color: $gray-700;
 	line-height: 1.7;
-	letter-spacing: -0.011em;
-
-	> * + * {
-		margin-top: 0.75rem;
-		margin-bottom: 0;
-	}
 
 	> :first-child {
 		margin-top: 0;
@@ -47,6 +29,10 @@ $font-sizes-mobile: (
 		list-style: decimal;
 	}
 
+	p, li {
+		font-size: $font-size-lg;
+	}
+
 	li {
 		padding-top: 1px;
 		padding-bottom: 1px;
@@ -87,86 +73,6 @@ $font-sizes-mobile: (
 		font-weight: 600;
 	}
 
-	h1, h2, h3, h4, h5, h6 {
-		color: $gray-900;
-	}
-
-	h2, h3, h4, h5, h6 {
-		font-weight: 600;
-	}
-
-	h1 {
-		font-size: map-get($font-sizes-mobile, '3xl');
-		line-height: 1.5;
-		letter-spacing: -0.021em;
-		font-weight: 700;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, '3xl');
-			letter-spacing: -0.024em;
-		}
-
-		// for byline
-		& + p {
-			margin-top: 1.5rem;
-			font-size: map-get($font-sizes-mobile, 'xl');
-			letter-spacing: -0.014em;
-			line-height: 1.4;
-
-			@include media-breakpoint-up(md) {
-				font-size: map-get($font-sizes-desktop, 'xl');
-				letter-spacing: -0.0175em;
-			}
-		}
-	}
-
-	h2 {
-		font-size: map-get($font-sizes-mobile, '2xl');
-		line-height: 1.56;
-		letter-spacing: -0.015em;
-		margin-top: 4rem;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, '2xl');
-			letter-spacing: -0.0195em;
-		}
-	}
-
-	h3 {
-		font-size: map-get($font-sizes-mobile, 'xl');
-		line-height: 1.56;
-		letter-spacing: -0.014em;
-		margin-top: 2.25rem;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, 'xl');
-			letter-spacing: -0.0175em;
-		}
-	}
-
-	h4 {
-		font-size: map-get($font-sizes-mobile, 'lg');
-		line-height: 1.56;
-		letter-spacing: -0.014em;
-		margin-top: 2.5rem;
-	}
-
-	h5 {
-		font-size: map-get($font-sizes-mobile, 'base');
-		line-height: 1.5;
-		letter-spacing: -0.011em;
-		font-weight: 600;
-		margin-top: 2rem;
-	}
-
-	h6 {
-		font-size: map-get($font-sizes-mobile, 'sm');
-		line-height: 1.35;
-		font-weight: 600;
-		text-transform: uppercase;
-		margin-top: 1.5rem;
-	}
-
 	tr > td,
 	tr > th {
 		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/page_builder.scss

@@ -1,4 +1,7 @@
 .hero-content {
+	margin-top: 3rem;
+	margin-bottom: 3rem;
+
 	.btn-primary {
 		margin-top: 1rem;
 		margin-right: 0.5rem;
@@ -15,16 +18,23 @@
 
 .hero-title, .hero-subtitle {
 	max-width: 42rem;
+	margin-top: 0rem;
+	margin-bottom: 0.5rem;
+}
+
+.lead {
+	font-weight: normal;
+	font-size: 1.25rem;
+	margin-bottom: 1.5rem;
 }
 
 .hero-subtitle {
 	@extend .lead;
-	font-weight: 400;
 	color: $gray-600;
-	font-size: 1rem;
+	font-size: $font-size-lg;
 
 	@include media-breakpoint-up(sm) {
-		font-size: 1.25rem;
+		font-size: $font-size-xl;
 	}
 }
 
@@ -42,10 +52,10 @@
 .section-description {
 	max-width: 56rem;
 	margin-top: 0.5rem;
-	font-size: $font-size-base;
+	font-size: $font-size-lg;
 
-	@include media-breakpoint-up(lg) {
-		font-size: $font-size-lg;
+	@include media-breakpoint-up(media-breakpoint-up) {
+		font-size: $font-size-xl;
 	}
 }
 
@@ -226,14 +236,10 @@
 	}
 }
 
-.section-markdown > .from-markdown {
-	max-width: 42rem;
-}
-
 .section-cta {
 	padding: 3rem 2rem;
 	text-align: center;
-	background-color: $primary-light;
+	background-color: $gray-200;
 	border-radius: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
@@ -248,12 +254,7 @@
 	.title {
 		margin: 0 auto;
 		max-width: 36rem;
-		font-size: $font-size-2xl;
-		font-weight: 800;
 		line-height: 1.25;
-		@include media-breakpoint-up(md) {
-			font-size: $font-size-4xl;
-		}
 	}
 	.subtitle {
 		max-width: 36rem;
@@ -270,11 +271,15 @@
 		margin-top: 0.5rem;
 		font-size: $font-size-xs;
 	}
+	.action {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .section-small-cta {
 	padding: 1.8rem;
-	background-color: lighten($primary, 42%);
+	background-color: var(--gray-200);
 	border-radius: 0.75rem;
 	display: flex;
 	flex-direction: column;
@@ -294,26 +299,27 @@
 		}
 	}
 
-	.title {
-		max-width: 36rem;
-		font-size: $font-size-xl;
-		font-weight: 800;
-		line-height: 1.25;
-		@include media-breakpoint-up(md) {
-			font-size: $font-size-2xl;
-		}
+	.section-title {
+		line-height: 1;
+		margin-bottom: 0.25rem;
 	}
+
 	.subtitle {
 		max-width: 36rem;
 		font-size: $font-size-base;
 		color: $gray-900;
-		margin-bottom: 1.2rem;
+		margin-bottom: 0.5rem;
 
 		@include media-breakpoint-up(md) {
 			font-size: $font-size-lg;
 			margin-bottom: 0px;
 		}
 	}
+
+	.action {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .section-cta-container {
@@ -379,6 +385,20 @@
 	}
 }
 
+.testimonial-author {
+	margin-top: 1rem;
+	display: flex;
+	align-items: center;
+
+	.avatar {
+		margin-right: 0.5rem;
+	}
+
+	p {
+		margin-bottom: 0;
+	}
+}
+
 .split-section-content.align-top {
 	margin-top: 2rem;
 }
@@ -514,12 +534,12 @@
 
 		@include media-breakpoint-up(md) {
 			grid-template-columns: repeat(2, 1fr);
-			gap: 6rem;
+			gap: 3rem 5rem;
 		}
 
 		.feature-title {
-			font-size: $font-size-xl;
-			font-weight: bold;
+			font-size: $font-size-lg;
+			font-weight: 600;
 
 			@include media-breakpoint-up(md) {
 				font-size: $font-size-2xl;
@@ -528,7 +548,7 @@
 
 		.feature-content {
 			font-size: $font-size-base;
-			margin-top: 1.75rem;
+			margin-top: 1.25rem;
 
 			@include media-breakpoint-up(xl) {
 				font-size: $font-size-lg;
@@ -630,9 +650,14 @@
 	}
 }
 
+.section-title {
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+
 .section-title + .section-features, .section-description + .section-features {
 	&[data-columns="2"] {
-		margin-top: 3.75rem;
+		margin-top: 3rem;
 	}
 
 	&[data-columns="3"] {
@@ -651,6 +676,14 @@
 	position: relative;
 }
 
+.feature-title {
+	margin-top: 0;
+}
+
+.feature-content {
+	line-height: 1.7;
+}
+
 .feature-title, .feature-content {
 	margin-bottom: 0;
 }
@@ -666,3 +699,19 @@
 .section-with-embed .embed-container {
 	margin-top: 2rem;
 }
+
+.section-video-wrapper {
+	margin-bottom: 1rem;
+}
+
+.section-video {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    cursor: pointer;
+}
+
+.video-thumbnail {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    object-fit: cover;
+}

frappe/public/scss/website/variables.scss

@@ -58,7 +58,7 @@ $font-size-lg: 1.125rem !default;
 $font-size-xl: 1.25rem !default;
 $font-size-2xl: 1.5rem !default;
 $font-size-3xl: 1.875rem !default;
-$font-size-4xl: 2.25rem !default;
+$font-size-4xl: 2.5rem !default;
 $font-size-5xl: 3rem !default;
 $font-size-6xl: 4rem !default;
 

frappe/public/scss/website/web_form.scss

@@ -1,26 +1,45 @@
 @import "../common/form";
 
-
 [data-doctype="Web Form"] {
-	.page-content-wrapper {
+	.page_content {
+		max-width: 800px;
+		margin: auto;
 
-		.breadcrumb-container.container {
-			@include media-breakpoint-up(sm) {
-				padding-left: 0;
+		.frappe-card {
+			padding: 1rem;
+
+			h3 {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+
+			.web-form-head {
+				margin: 0 -1rem;
+				padding: 0 1rem 1rem 1rem;
+				margin-bottom: 1rem;
+				border-bottom: 1px solid var(--border-color);
 			}
-		}
 
-		.container {
-			max-width: 800px;
+			#introduction {
+				margin-bottom: 2rem;
+			}
 
-			&.my-4 {
-				background-color: var(--fg-color);
+			#introduction p {
+				color: var(--text-muted);
+			}
 
-					@include media-breakpoint-up(sm) {
-						padding: 1.8rem;
-						border-radius: var(--border-radius-md);
-						box-shadow: var(--card-shadow);
-					}
+			.web-form-actions button {
+				margin-top: 0.1rem;
+			}
+		}
+
+		.frappe-card.list-card {
+			min-height: 400px;
+		}
+
+		.breadcrumb-container.container {
+			@include media-breakpoint-up(sm) {
+				padding-left: 0;
 			}
 		}
 	}
@@ -57,13 +76,21 @@
 	}
 }
 
-.web-form-wrapper~#datatable {
+.list-table {
+	margin-left: -1rem;
+	margin-right: -1rem;
+
 	.table {
 		thead {
 			th {
 				border: 0;
+				font-size: 13px;
 				font-weight: normal;
-				color: var(--text-muted)
+				color: var(--text-muted);
+
+				input[type="checkbox"] {
+					margin-bottom: -2px;
+				}
 			}
 		}
 
@@ -71,8 +98,22 @@
 			color: var(--text-color);
 
 			td {
-			border-top: 1px solid var(--border-color);
+				font-size: 13px;
+				border-top: 1px solid var(--border-color);
 			}
 		}
+
+		input[type="checkbox"] {
+			margin-left: 0.5rem;
+			margin-top: 2px;
+		}
+
+		.list-col-checkbox {
+			width: 1rem;
+		}
+
+		.list-col-serial {
+			width: 1.5rem;
+		}
 	}
-}
+}

frappe/templates/includes/avatar_macro.html

@@ -1,18 +1,18 @@
-{% macro avatar(user_id=None, css_style=None, size="avatar-small") %}
+{% macro avatar(user_id=None, css_style=None, size="avatar-small", full_name=None, image=None) %}
 {% set user_info = frappe.utils.get_user_info_for_avatar(user_id) %}
-<span class="avatar {{ size }}" title="{{ user_info.name }}" style="{{ css_style or '' }}">
-	{% if user_info.image  %}
+<span class="avatar {{ size }}" title="{{ full_name or user_info.name }}" style="{{ css_style or '' }}">
+	{% if image or user_info.image  %}
 	<img
 		class="avatar-frame standard-image"
-		src="{{ user_info.image }}"
-		title="{{ user_info.name }}">
+		src="{{ image or user_info.image }}"
+		title="{{ full_name or user_info.name }}">
 	</span>
 	{% else %}
 	<span
 		class="avatar-frame standard-image"
-		title="{{ user_info.name }}">
-		{{ frappe.utils.get_abbr(user_info.name).upper() }}
+		title="{{ full_name or user_info.name }}">
+		{{ frappe.utils.get_abbr(full_name or user_info.name).upper() }}
 	</span>
 	{% endif %}
 </span>
-{% endmacro %}
+{% endmacro %}

frappe/templates/includes/blog/blogger.html

@@ -1,8 +1,9 @@
-{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
 
 <div class="media">
-	{{ square_image_with_fallback(src=blogger_info.avatar, size='small', alt=blogger_info.full_name, class='align-self-start mr-4 rounded') }}
-	<div class="media-body">
+	{{  avatar(full_name=blogger_info.full_name, image=blogger_info.avatar, size='avatar-large') }}
+
+	<div class="media-body ml-3">
 		<h5 class="mt-0">
 			<a href="/blog?blogger={{ blogger_info.name }}" class="text-dark">{{ blogger_info.full_name }}</a>
 		</h5>

frappe/templates/includes/comments/comments.html

@@ -62,11 +62,13 @@
 		let user_id = "";
 
 		let update_timeline_line_length = function(direction, size) {
-			if (direction == 'top') {
-				$('.blog-container')[0].style.setProperty('--comment-timeline-top', size);
-			} else {
-				let comment_timeline_bottom = $('.comment-list .comment-row:last-child').height() - 10;
-				$('.blog-container')[0].style.setProperty('--comment-timeline-bottom', comment_timeline_bottom +'px');
+			if ($('.blog-container').length) {
+				if (direction == 'top') {
+					$('.blog-container')[0].style.setProperty('--comment-timeline-top', size);
+				} else {
+					let comment_timeline_bottom = $('.comment-list .comment-row:last-child').height() - 10;
+					$('.blog-container')[0].style.setProperty('--comment-timeline-bottom', comment_timeline_bottom +'px');
+				}
 			}
 		}
 
@@ -194,3 +196,105 @@
 		});
 	});
 </script>
+
+<style>
+
+.add-comment-button {
+	margin-left: 35px;
+}
+
+.timeline-dot {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	position: absolute;
+	top: 8px;
+	left: 22px;
+	background-color: var(--fg-color);
+	border: 1px solid var(--dark-border-color);
+}
+
+.timeline-dot::before {
+	content: ' ';
+	background: var(--gray-600);
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	border-radius: 50%;
+	height: 4px;
+	width: 4px;
+}
+
+.comment-form-wrapper {
+	display: none;
+}
+
+.login-required {
+	padding: var(--padding-sm);
+	border-radius: var(--border-radius-sm);
+	box-shadow: var(--card-shadow);
+}
+
+.new-comment {
+	display: flex;
+	padding: var(--padding-lg);
+	box-shadow: var(--card-shadow);
+	border-radius: var(--border-radius-md);
+	background-color: var(--fg-color);
+}
+
+.new-comment-fields {
+	flex: 1;
+}
+
+.new-comment .form-label {
+	font-weight: var(--text-bold);
+}
+
+.new-comment .comment-text-area textarea {
+	resize: none;
+}
+
+@media (min-width: 576px) {
+	.comment-by {
+		padding-right: 0px !important;
+		padding-bottom: 0px !important;
+	}
+}
+
+#comment-list {
+	position: relative;
+	padding-left: var(--padding-xl);
+}
+
+#comment-list::before {
+	content: " ";
+	position: absolute;
+	top: var(--comment-timeline-top);
+	bottom: var(--comment-timeline-bottom);
+	border-left: 1px solid var(--dark-border-color);
+}
+
+.comment-row {
+	position: relative;
+}
+.comment-avatar {
+	position: absolute;
+	top: 10px;
+	left: -17px;
+}
+
+.comment-content {
+	box-shadow: var(--card-shadow);
+	background-color: var(--fg-color);
+	border-radius: var(--border-radius-md);
+	padding: var(--padding-md);
+	margin-left: 35px;
+	flex: 1;
+}
+
+.comment-content .content p{
+	margin-bottom: 0px;
+}
+
+</style>

frappe/templates/includes/web_block.html

@@ -3,6 +3,8 @@
 		'section-padding-top': web_block.add_top_padding,
 		'section-padding-bottom': web_block.add_bottom_padding,
 		'bg-light': web_block.add_shade,
+		'border-top': web_block.add_border_at_top,
+		'border-bottom': web_block.add_border_at_bottom,
 	},
 	web_block.css_class
 ]) -%}
@@ -10,7 +12,10 @@
 {%- if web_template_type == 'Section' -%}
 {%- if not web_block.hide_block -%}
 <section class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
-	data-section-template="{{ web_block.web_template | e }}">
+	data-section-template="{{ web_block.web_template | e }}"
+	{% if web_block.add_background_image -%}
+		style="background: url({{ web_block.background_image}}) no-repeat center center; background-size: cover;"
+	{%- endif %}>
 	{%- if web_block.add_container -%}
 	<div class="container">
 	{%- endif -%}

frappe/website/doctype/blog_post/blog_post.json

@@ -113,6 +113,7 @@
    "depends_on": "eval:doc.content_type === 'Markdown'",
    "fieldname": "content_md",
    "fieldtype": "Markdown Editor",
+   "ignore_xss_filter": 1,
    "label": "Content (Markdown)"
   },
   {
@@ -213,7 +214,7 @@
  "index_web_pages_for_search": 1,
  "is_published_field": "published",
  "links": [],
- "modified": "2022-03-09 01:48:25.227295",
+ "modified": "2022-03-21 14:42:19.282612",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Blog Post",
@@ -245,6 +246,7 @@
  "route": "blog",
  "sort_field": "modified",
  "sort_order": "ASC",
+ "states": [],
  "title_field": "title",
  "track_changes": 1
-}
+}

frappe/website/doctype/blog_post/templates/blog_post_row.html

@@ -1,3 +1,5 @@
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
+
 {%- set post = doc -%}
 <div class="blog-card col-sm-12 {{ 'col-md-8' if post.featured else 'col-md-4' }}">
 	<div class="card h-100">
@@ -26,7 +28,7 @@
 				<p class="post-description text-muted">{{ post.intro }}</p>
 			</div>
 			<div class="blog-card-footer">
-				<img class="avatar website-image-extra-small" src="{{ post.avatar }}">
+				{{  avatar(full_name=post.full_name, image=post.avatar, size='avatar-medium') }}
 				<div class="text-muted">
 					<a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
 					<div class="small">

frappe/website/doctype/web_form/templates/web_form.html

@@ -2,41 +2,42 @@
 
 {% block title %}{{ _(title) }}{% endblock %}
 
-{% block header %}
-<h3>{{ _(title) }}</h3>
-{% endblock %}
-
-{% block breadcrumbs %}
-{% if has_header and login_required %}
-{% include "templates/includes/breadcrumbs.html" %}
-{% endif %}
-{% endblock %}
-
-{% block header_actions %}
-{% if is_list %}
-<div class="list-view-actions"></div>
-{% else %}
-<div class="web-form-actions"></div>
-{% endif %}
-{% endblock %}
+{% block breadcrumbs %}{% endblock %}
 
 {% macro container_attributes() %}
 data-web-form="{{ name }}" data-web-form-doctype="{{ doc_type }}" data-login-required="{{ frappe.utils.cint(login_required and frappe.session.user=='Guest') }}" data-is-list="{{ frappe.utils.cint(is_list) }}" data-allow-delete="{{ allow_delete }}"
 {% endmacro %}
 
 {% block page_content %}
-<div>
+
+{% if has_header and login_required and allow_multiple %}
+<!-- breadcrumb -->
+{% include "templates/includes/breadcrumbs.html" %}
+{% else %}
+<div style="height: 3rem"></div>
+{% endif %}
+
+<!-- main card -->
+<div class="frappe-card {{ frappe.utils.cint(is_list) and 'list-card' or '' }}">
 	{% if is_list %}
-	{# web form list #}
+	<!-- list -->
+	<div class="d-flex justify-content-between">
+		<h3>{{ _(title) }}</h3>
+		<div class="list-view-actions"></div>
+	</div>
+
 	<div class="web-form-wrapper" {{ container_attributes() }}></div>
 	<div id="list-filters" class="row mt-4"></div>
-	<div id="datatable" class="pt-4 overflow-auto"></div>
+	<div id="list-table" class="list-table pt-4 overflow-auto"></div>
 	<div class="list-view-footer text-right"></div>
 	{% else %}
-	{# web form #}
+	<!-- web form -->
+	<div class="d-flex justify-content-between web-form-head">
+		<h3>{{ _(title) }}</h3>
+		<div class="web-form-actions"></div>
+	</div>
 	<div role="form">
-		<div id="introduction" class="text-muted"></div>
-		<hr>
+		<div id="introduction" class="text-muted hidden"></div>
 		<div class="web-form-wrapper" {{ container_attributes() }}></div>
 		<div class="web-form-footer text-right"></div>
 	</div>
@@ -61,15 +62,16 @@ data-web-form="{{ name }}" data-web-form-doctype="{{ doc_type }}" data-login-req
 	</div>
 	{% endif %} {# attachments #}
 
-	{% if allow_comments and not frappe.form_dict.new and not is_list -%}
-	<div class="comments mt-6">
-		<h3>{{ _("Comments") }}</h3>
-		{% include 'templates/includes/comments/comments.html' %}
-	</div>
-	{%- endif %} {# comments #}
-
 	{% endif %}
 </div>
+
+{% if allow_comments and not frappe.form_dict.new and not is_list -%}
+<!-- comments -->
+<div class="comments" style="margin-top: 3rem;">
+	{% include 'templates/includes/comments/comments.html' %}
+</div>
+{%- endif %} {# comments #}
+
 {% endblock page_content %}
 
 {% block script %}
@@ -132,6 +134,9 @@ frappe.init_client_script = () => {
 {% endif %}
 
 <style>
+body {
+	background-color: var(--bg-color);
+}
 {% if style is defined %}
 	{{ style }}
 {% endif %}

frappe/website/doctype/web_form/web_form.json

@@ -183,7 +183,8 @@
   },
   {
    "fieldname": "introduction_text",
-   "fieldtype": "Text Editor",
+   "fieldtype": "Small Text",
+   "ignore_xss_filter": 1,
    "label": "Introduction"
   },
   {
@@ -234,7 +235,7 @@
    "label": "Success Message"
   },
   {
-   "description": "Go to this URL after completing the form (only for Guest users)",
+   "description": "Go to this URL after completing the form",
    "fieldname": "success_url",
    "fieldtype": "Data",
    "label": "Success URL"
@@ -368,7 +369,7 @@
  "icon": "icon-edit",
  "is_published_field": "published",
  "links": [],
- "modified": "2021-11-15 14:12:44.624573",
+ "modified": "2022-03-23 15:44:41.385001",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Form",
@@ -386,6 +387,7 @@
  ],
  "sort_field": "modified",
  "sort_order": "DESC",
+ "states": [],
  "title_field": "title",
  "track_changes": 1
 }

frappe/website/doctype/web_page/web_page.js

@@ -18,7 +18,7 @@ frappe.ui.form.on('Web Page', {
 		frm.set_query('web_template', 'page_blocks', function() {
 			return {
 				filters: {
-					"type": 'Section'
+					"type": ['in', ['Section', 'Component']]
 				}
 			};
 		});

frappe/website/doctype/web_page_block/web_page_block.json

@@ -13,8 +13,12 @@
   "add_container",
   "add_top_padding",
   "add_bottom_padding",
+  "add_border_at_top",
+  "add_border_at_bottom",
   "add_shade",
-  "hide_block"
+  "hide_block",
+  "add_background_image",
+  "background_image"
  ],
  "fields": [
   {
@@ -68,18 +72,42 @@
    "default": "1",
    "fieldname": "add_top_padding",
    "fieldtype": "Check",
-   "label": "Add Space on Top"
+   "label": "Add Space at Top"
   },
   {
    "default": "1",
    "fieldname": "add_bottom_padding",
    "fieldtype": "Check",
-   "label": "Add Space on Bottom"
+   "label": "Add Space at Bottom"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_border_at_top",
+   "fieldtype": "Check",
+   "label": "Add Border at Top"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_border_at_bottom",
+   "fieldtype": "Check",
+   "label": "Add Border at Bottom"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_background_image",
+   "fieldtype": "Check",
+   "label": "Add Background Image"
+  },
+  {
+   "depends_on": "add_background_image",
+   "fieldname": "background_image",
+   "fieldtype": "Attach Image",
+   "label": "Background Image"
   }
  ],
  "istable": 1,
  "links": [],
- "modified": "2020-05-11 15:21:54.247652",
+ "modified": "2022-03-21 14:23:32.665108",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Page Block",
@@ -88,5 +116,6 @@
  "quick_entry": 1,
  "sort_field": "modified",
  "sort_order": "DESC",
+ "states": [],
  "track_changes": 1
 }

frappe/website/js/website.js

@@ -423,6 +423,18 @@ $.extend(frappe, {
 				});
 			});
 		}
+	},
+	setup_videos: () => {
+		// converts video images into youtube embeds (via Page Builder)
+		$('.section-video-wrapper').on('click', (e) => {
+			let $video = $(e.currentTarget);
+			let id = $video.data('youtubeId');
+			console.log(id);
+			$video.find(".video-thumbnail").hide();
+			$video.append(`
+				<iframe allowfullscreen="" class="section-video" f;rameborder="0" src="//youtube.com/embed/${id}?autoplay=1"></iframe>
+			`);
+		});
 	}
 });
 
@@ -647,5 +659,6 @@ $(document).on("page-change", function() {
 
 frappe.ready(function() {
 	frappe.show_language_picker();
+	frappe.setup_videos();
 	frappe.socketio.init(window.socketio_port);
 });

frappe/website/web_template/cover_image/cover_image.html

@@ -0,0 +1,5 @@
+{{ frappe.render_template('templates/includes/image_with_blur.html', {
+	"src": url,
+	"alt": description,
+	"class": "full-width-image"
+}) }}

frappe/website/web_template/cover_image/cover_image.json

@@ -0,0 +1,34 @@
+{
+ "__islocal": true,
+ "__unsaved": 1,
+ "creation": "2022-03-15 14:17:49.482939",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "__islocal": 1,
+   "__unsaved": 1,
+   "fieldname": "url",
+   "fieldtype": "Attach Image",
+   "label": "Image",
+   "reqd": 0
+  },
+  {
+   "__islocal": 1,
+   "__unsaved": 1,
+   "fieldname": "description",
+   "fieldtype": "Data",
+   "label": "Description",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-15 14:17:49.482939",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Cover Image",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Component"
+}

frappe/website/web_template/full_width_image/full_width_image.json

@@ -1,4 +1,5 @@
 {
+ "__unsaved": 1,
  "creation": "2020-04-17 16:03:35.676241",
  "docstatus": 0,
  "doctype": "Web Template",
@@ -17,8 +18,9 @@
   }
  ],
  "idx": 0,
- "modified": "2020-09-11 15:52:40.656939",
+ "modified": "2022-03-15 14:17:17.563982",
  "modified_by": "Administrator",
+ "module": "Website",
  "name": "Full Width Image",
  "owner": "Administrator",
  "standard": 1,

frappe/website/web_template/hero/hero.html

@@ -9,12 +9,12 @@
 		{%- if primary_action or secondary_action -%}
 		<div class="hero-buttons">
 			{%- if primary_action -%}
-			<a class="btn btn-lg btn-primary" href="{{ primary_action }}">
+			<a class="btn btn-lg btn-dark" href="{{ primary_action }}">
 				{{ primary_action_label }}
 			</a>
 			{%- endif -%}
 			{%- if secondary_action -%}
-			<a class="btn btn-lg btn-primary-light" href="{{ secondary_action }}">
+			<a class="btn btn-lg btn-light ml-3" href="{{ secondary_action }}">
 				{{ secondary_action_label }}
 			</a>
 			{%- endif -%}

frappe/website/web_template/hero/hero.json

@@ -1,4 +1,5 @@
 {
+ "__unsaved": 1,
  "creation": "2020-04-19 15:26:23.140620",
  "docstatus": 0,
  "doctype": "Web Template",
@@ -49,7 +50,7 @@
   }
  ],
  "idx": 0,
- "modified": "2020-10-26 17:39:56.959008",
+ "modified": "2022-03-21 14:30:14.405261",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Hero",

frappe/website/web_template/section_with_cta/section_with_cta.html

@@ -4,8 +4,12 @@
 		{%- if subtitle -%}
 		<p class="subtitle">{{ subtitle }}</p>
 		{%- endif -%}
-		<div class="mt-6">
-			<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
+		<div class="mt-3">
+			<h4 class="action">
+				<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
+					<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
+				</a>
+			</h4>
 		</div>
 		{%- if cta_description -%}
 		<div class="description">

frappe/website/web_template/section_with_small_cta/section_with_small_cta.html

@@ -1,14 +1,18 @@
 <div class="section-cta-container">
 	<div class="section-small-cta">
 		<div>
-			<h2 class="title">{{ title or '' }}</h2>
+			<h3 class="section-title">{{ title or '' }}</h3>
 			{%- if subtitle -%}
 			<p class="subtitle">{{ subtitle }}</p>
 			{%- endif -%}
 		</div>
 		<div>
 			{%- if cta_label and cta_url -%}
-			<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
+			<h4 class="action">
+				<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
+					<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
+				</a>
+			</h4>
 			{%- endif -%}
 		</div>
 	</div>

frappe/website/web_template/section_with_testimonials/section_with_testimonials.html

@@ -0,0 +1,31 @@
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
+
+<div class="section-with-features">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+
+	<div class="section-features" data-columns="{{ columns or 3 }}">
+		{%- for testimonial in testimonials -%}
+		<div class="section-feature">
+			<div>
+				{%- if testimonial.content -%}
+				<p class="feature-content">{{ testimonial.content }}</p>
+				{%- endif -%}
+			</div>
+			<div class="testimonial-author">
+				{{  avatar(full_name=testimonial.full_name, image=testimonial.image, size='avatar-medium') }}
+				<p>
+					{{ testimonial.full_name }}
+					{%- if testimonial.designation -%}
+					<br>{{ testimonial.designation }}
+					{%- endif -%}
+				</p>
+			</div>
+		</div>
+		{%- endfor -%}
+	</div>
+</div>

frappe/website/web_template/section_with_testimonials/section_with_testimonials.json

@@ -0,0 +1,73 @@
+{
+ "__unsaved": 1,
+ "creation": "2022-03-21 15:28:13.141783",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "default": "3",
+   "fieldname": "columns",
+   "fieldtype": "Select",
+   "label": "Columns",
+   "options": "2\n3\n4",
+   "reqd": 0
+  },
+  {
+   "fieldname": "testimonials",
+   "fieldtype": "Table Break",
+   "label": "Testimonials",
+   "reqd": 0
+  },
+  {
+   "fieldname": "content",
+   "fieldtype": "Small Text",
+   "label": "Content",
+   "reqd": 0
+  },
+  {
+   "fieldname": "full_name",
+   "fieldtype": "Data",
+   "label": "Full Name",
+   "reqd": 0
+  },
+  {
+   "fieldname": "designation",
+   "fieldtype": "Data",
+   "label": "Designation",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image",
+   "fieldtype": "Attach Image",
+   "label": "Image",
+   "reqd": 0
+  },
+  {
+   "fieldname": "url",
+   "fieldtype": "Data",
+   "label": "URL",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-21 15:39:39.044104",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Section with Testimonials",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Section"
+}

frappe/website/web_template/section_with_videos/section_with_videos.html

@@ -0,0 +1,24 @@
+<div class="section-with-features">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+
+	<div class="section-features" data-columns="{{ columns or 3 }}">
+		{%- for video in videos -%}
+		<div class="section-feature">
+            <div class="section-video-wrapper" data-youtube-id="{{ video.youtube_id }}">
+                <img class="video-thumbnail" src="https://i.ytimg.com/vi/{{ video.youtube_id }}/sddefault.jpg">
+            </div>
+            {%- if video.title -%}
+            <h3 class="feature-title">{{ video.title }}</h3>
+            {%- endif -%}
+            {%- if video.content -%}
+            <p class="feature-content">{{ video.content }}</p>
+            {%- endif -%}
+    </div>
+		{%- endfor -%}
+	</div>
+</div>

frappe/website/web_template/section_with_videos/section_with_videos.json

@@ -0,0 +1,61 @@
+{
+ "__unsaved": 1,
+ "creation": "2022-03-21 15:59:18.432776",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "default": "3",
+   "fieldname": "columns",
+   "fieldtype": "Select",
+   "label": "Columns",
+   "options": "2\n3\n4",
+   "reqd": 0
+  },
+  {
+   "fieldname": "videos",
+   "fieldtype": "Table Break",
+   "label": "Videos",
+   "reqd": 0
+  },
+  {
+   "fieldname": "youtube_id",
+   "fieldtype": "Data",
+   "label": "YouTube Video ID",
+   "reqd": 0
+  },
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "content",
+   "fieldtype": "Small Text",
+   "label": "Content",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-21 16:03:46.339279",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Section with Videos",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Section"
+}

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;