fix: Website Enhancements

frappe/hooks.py

@@ -43,6 +43,11 @@
 	"assets/css/report.min.css",
 ]
 
+doctype_js = {
+	"Web Page": "public/js/frappe/utils/web_template.js",
+	"Website Settings": "public/js/frappe/utils/web_template.js"
+}
+
 web_include_js = [
 	"website_script.js"
 ]

frappe/patches.txt

@@ -309,4 +309,5 @@ frappe.patches.v12_0.set_default_password_reset_limit
 frappe.patches.v13_0.set_route_for_blog_category
 frappe.patches.v13_0.enable_custom_script
 frappe.patches.v13_0.update_newsletter_content_type
-frappe.patches.v13_0.delete_event_producer_and_consumer_keys
+execute:frappe.db.set_value('Website Settings', 'Website Settings', {'navbar_template': 'Standard Navbar', 'footer_template': 'Standard Footer'})
+frappe.patches.v13_0.delete_event_producer_and_consumer_keys

frappe/public/js/frappe/dom.js

@@ -34,7 +34,7 @@ frappe.dom = {
 	},
 	remove_script_and_style: function(txt) {
 		const evil_tags = ["script", "style", "noscript", "title", "meta", "base", "head"];
-		const regex = new RegExp(evil_tags.map(tag => `<${tag}>.*<\\/${tag}>`).join('|'));
+		const regex = new RegExp(evil_tags.map(tag => `<${tag}>.*<\\/${tag}>`).join('|'), 's');
 		if (!regex.test(txt)) {
 			// no evil tags found, skip the DOM method entirely!
 			return txt;

frappe/public/js/frappe/form/controls/markdown_editor.js

@@ -44,5 +44,9 @@ frappe.ui.form.ControlMarkdownEditor = frappe.ui.form.ControlCode.extend({
 			.then(() => {
 				this.update_preview();
 			});
+	},
+
+	set_disp_area(value) {
+		this.disp_area && $(this.disp_area).text(value);
 	}
 });

frappe/public/js/frappe/form/toolbar.js

@@ -186,7 +186,7 @@ frappe.ui.form.Toolbar = Class.extend({
 	},
 	set_indicator: function() {
 		var indicator = frappe.get_indicator(this.frm.doc);
-		if (this.frm.save_disabled && [__('Saved'), __('Not Saved')].includes(indicator[0])) {
+		if (this.frm.save_disabled && indicator && [__('Saved'), __('Not Saved')].includes(indicator[0])) {
 			return;
 		}
 		if(indicator) {
@@ -272,12 +272,12 @@ frappe.ui.form.Toolbar = Class.extend({
 			});
 		}
 
-		if (frappe.user_roles.includes("System Manager") && me.frm.meta.issingle === 0) {
+		if (frappe.user_roles.includes("System Manager")) {
 			let is_doctype_form = me.frm.doctype === 'DocType';
 			let doctype = is_doctype_form ? me.frm.docname : me.frm.doctype;
 			let is_doctype_custom = is_doctype_form ? me.frm.doc.custom : false;
 
-			if (doctype != 'DocType' && !is_doctype_custom) {
+			if (doctype != 'DocType' && !is_doctype_custom && me.frm.meta.issingle === 0) {
 				this.page.add_menu_item(__("Customize"), function() {
 					if (me.frm.meta && me.frm.meta.custom) {
 						frappe.set_route('Form', 'DocType', doctype);

frappe/public/js/frappe/utils/web_template.js

@@ -0,0 +1,71 @@
+function open_web_template_values_editor(template, current_values = {}) {
+	return new Promise(resolve => {
+		frappe.model.with_doc("Web Template", template).then((doc) => {
+			let d = new frappe.ui.Dialog({
+				title: __("Edit Values"),
+				fields: get_fields(doc),
+				primary_action(values) {
+					d.hide();
+					resolve(values);
+				},
+			});
+			d.set_values(current_values);
+			d.show();
+
+			d.sections.forEach((sect) => {
+				let fields_with_value = sect.fields_list.filter(
+					(field) => current_values[field.df.fieldname]
+				);
+
+				if (fields_with_value.length) {
+					sect.collapse(false);
+				}
+			});
+		});
+	});
+
+	function get_fields(doc) {
+		let normal_fields = [];
+		let table_fields = [];
+
+		let current_table = null;
+		for (let df of doc.fields) {
+			if (current_table) {
+				current_table.fields = current_table.fields || [];
+
+				if (df.fieldtype != 'Table Break') {
+					current_table.fields.push(df);
+				} else {
+					table_fields.push(df);
+					current_table = df;
+				}
+			} else if (df.fieldtype != 'Table Break') {
+				normal_fields.push(df);
+			} else {
+				table_fields.push(df);
+				current_table = df;
+			}
+		}
+
+		let fields = [
+			...normal_fields,
+			...table_fields.map(tf => {
+				let data = current_values[tf.fieldname] || [];
+				return {
+					label: tf.label,
+					fieldname: tf.fieldname,
+					fieldtype: 'Table',
+					fields: tf.fields.map((df, i) => ({
+						...df,
+						in_list_view: i <= 1,
+						columns: tf.fields.length == 1 ? 10 : 5
+					})),
+					data,
+					get_data: () => data
+				};
+			})
+		];
+
+		return fields;
+	}
+}

frappe/public/scss/base.scss

@@ -33,7 +33,7 @@ h1 {
 
 h2 {
 	font-size: $font-size-xl;
-	font-weight: bold;
+	font-weight: 700;
 	margin-bottom: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
@@ -44,3 +44,15 @@ h2 {
 	}
 }
 
+h3 {
+	font-size: $font-size-base;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+
+	@include media-breakpoint-up(sm) {
+		font-size: $font-size-lg;
+	}
+	@include media-breakpoint-up(md) {
+		font-size: $font-size-xl;
+	}
+}

frappe/public/scss/css_variables.scss

@@ -0,0 +1,28 @@
+:root {
+	--gray-50: #{$gray-50};
+	--gray-100: #{$gray-100};
+	--gray-200: #{$gray-200};
+	--gray-300: #{$gray-300};
+	--gray-400: #{$gray-400};
+	--gray-500: #{$gray-500};
+	--gray-600: #{$gray-600};
+	--gray-700: #{$gray-700};
+	--gray-800: #{$gray-800};
+	--gray-900: #{$gray-900};
+
+	--black: #{$black};
+	--primary: #{$primary};
+	--primary-light: #{$primary-light};
+	--light: #{$light};
+
+	--font-size-xs: #{$font-size-xs};
+	--font-size-sm: #{$font-size-sm};
+	--font-size-base: #{$font-size-base};
+	--font-size-lg: #{$font-size-lg};
+	--font-size-xl: #{$font-size-xl};
+	--font-size-2xl: #{$font-size-2xl};
+	--font-size-3xl: #{$font-size-3xl};
+	--font-size-4xl: #{$font-size-4xl};
+	--font-size-5xl: #{$font-size-5xl};
+	--font-size-6xl: #{$font-size-6xl};
+}

frappe/public/scss/footer.scss

@@ -0,0 +1,82 @@
+.web-footer {
+	padding: 5rem 0;
+	min-height: 140px;
+}
+
+.footer-logo {
+	min-width: 5rem;
+	height: 1.5rem;
+	object-fit: contain;
+	object-position: left;
+}
+
+.footer-child-item {
+	margin-top: 0.5rem;
+}
+
+.footer-link, .footer-child-item a {
+	font-size: $font-size-sm;
+	font-weight: 500;
+	color: $gray-700;
+
+	&:hover {
+		color: $primary;
+		text-decoration: none;
+	}
+}
+
+.footer-col-right {
+	@include media-breakpoint-up(sm) {
+		text-align: right;
+	}
+}
+
+.footer-col-left, .footer-col-right {
+	padding-top: 0.8rem;
+	padding-bottom: 1rem;
+	line-height: 2;
+
+	&:empty {
+		padding: 0;
+	}
+}
+
+.footer-col-left .footer-link {
+	margin-right: 1rem;
+}
+
+.footer-col-right .footer-link {
+	margin-right: 1rem;
+	@include media-breakpoint-up(sm) {
+		margin-right: 0;
+		margin-left: 1rem;
+	}
+}
+
+.footer-group {
+	margin-top: 2rem;
+}
+
+.footer-group-label {
+	color: $text-muted;
+	font-size: $font-size-sm;
+	margin-bottom: 0.5rem;
+}
+
+.footer-grouped-links {
+	margin-bottom: 2rem;
+}
+
+.footer-group-links {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	max-height: 10rem;
+	margin-bottom: 0;
+}
+
+.footer-info {
+	border-top: 1px solid $border-color;
+	color: $text-muted;
+	font-size: $font-size-sm;
+}

frappe/public/scss/markdown.scss

@@ -10,6 +10,10 @@
 		margin-top: 0;
 	}
 
+	> :last-child {
+		margin-bottom: 0;
+	}
+
 	ul,
 	ol {
 		padding-left: 2.5rem;

frappe/public/scss/navbar.scss

@@ -0,0 +1,59 @@
+.navbar-light {
+	border-bottom: 1px solid $border-color;
+}
+
+.navbar-brand {
+	img {
+		display: inline-block;
+		max-width: 150px;
+		max-height: 25px;
+	}
+}
+
+.navbar-cta {
+	@include media-breakpoint-up(lg) {
+		margin-left: 1rem;
+	}
+}
+
+
+.navbar.bg-dark {
+	.dropdown-menu {
+		font-size: 0.75rem;
+		background-color: $dark;
+		border-radius: 0;
+	}
+
+	.nav-link {
+		white-space: nowrap;
+		color: $light;
+
+		&:hover {
+			color: $primary;
+		}
+	}
+
+	.nav-item {
+		padding: 0rem 1rem;
+	}
+
+	.dropdown-item {
+		color: $light;
+
+		&:hover {
+			background-color: $dark;
+			color: $primary;
+		}
+	}
+}
+
+.navbar-light .navbar-nav .nav-link {
+	color: $gray-700;
+	font-size: $font-size-sm;
+	font-weight: 500;
+
+	&:hover,
+	&:focus, &.active {
+		color: $primary;
+	}
+}