fix: moved banner image in to page header section

(cherry picked from commit 3c9bc6f1ec)

frappe/public/scss/website/web_form.scss

@@ -1,380 +1,387 @@
 @import "../common/form";
 
 [data-doctype="Web Form"] {
-	.page_content {
-		max-width: 800px;
-		margin: auto;
-
-		h1 {
-			font-size: 2.25rem;
-			margin-top: 0;
-			margin-bottom: 0;
-		}
-
-		.web-form-banner-image {
-			margin: -4rem -14rem 5rem;
-			padding-top: 3rem;
-			position: relative;
-
-			img {
-				position: absolute;
-				object-fit: cover;
+	.page-content-wrapper {
+		.container {
+			.page-header {
 				width: 100%;
-				height: 250px;
-				z-index: -1;
-			}
-		}
-
-		.web-form-header {
-			border: 1px solid var(--dark-border-color);
-			border-bottom: none;
-			border-top-left-radius: var(--border-radius-md);
-			border-top-right-radius: var(--border-radius-md);
-			background-color: var(--fg-color);
-			padding: 2rem 2rem 0;
 
-			.breadcrumb-container {
-				padding: 0px;
-				margin: 0 0 2rem;
-
-				ol.breadcrumb {
-					padding: 0px;
+				img {
+					margin: -1rem 0rem -10.5rem;
+					object-fit: cover;
+					width: 100%;
+					height: 250px;
+					z-index: -1;
 				}
 			}
 
-			.web-form-head {
-				border-bottom: 1px solid var(--dark-border-color);
-				padding-bottom: 1.25rem;
+			.page_content {
+				max-width: 800px;
+				margin: auto;
 
-				.title {
-					display: flex;
-					justify-content: space-between;
+				h1 {
+					font-size: 2.25rem;
+					margin-top: 0;
+					margin-bottom: 0;
 				}
 
-				.web-form-introduction {
-					color: var(--text-muted);
-					margin-top: 1.25rem;
+				.web-form-header {
+					border: 1px solid var(--dark-border-color);
+					border-bottom: none;
+					border-top-left-radius: var(--border-radius-md);
+					border-top-right-radius: var(--border-radius-md);
+					background-color: var(--fg-color);
+					padding: 2rem 2rem 0;
 
-					p {
-						color: var(--text-muted);
-					}
-				}
-			}
-		}
+					.breadcrumb-container {
+						padding: 0px;
+						margin: 0 0 2rem;
 
-		.web-form {
-			background-color: var(--fg-color);
-			padding: 1.25rem 2rem 2rem;
-			border: 1px solid var(--dark-border-color);
-			border-top: none;
-			border-bottom-left-radius: var(--border-radius);
-			border-bottom-right-radius: var(--border-radius);
-
-			.web-form-wrapper {
-				.form-control {
-					color: var(--text-color);
-					background-color: var(--control-bg);
-				}
-
-				.form-section {
-					.section-head {
-						font-weight: bold;
-						font-size: var(--text-xl);
-						padding: var(--padding-md) 0;
+						ol.breadcrumb {
+							padding: 0px;
+						}
 					}
-				}
 
-				.form-column {
-					padding: 0 var(--padding-sm);
+					.web-form-head {
+						border-bottom: 1px solid var(--dark-border-color);
+						padding-bottom: 1.25rem;
 
-					&:first-child {
-						padding-left: 0;
-					}
+						.title {
+							display: flex;
+							justify-content: space-between;
+						}
 
-					&:last-child {
-						padding-right: 0;
-					}
+						.web-form-introduction {
+							color: var(--text-muted);
+							margin-top: 1.25rem;
 
-					@include media-breakpoint-down(sm) {
-						padding: 0;
+							p {
+								color: var(--text-muted);
+							}
+						}
 					}
 				}
 
-				.web-form-skeleton {
-					.box-group {
-						display: flex;
-						gap: 20px;
-						margin-bottom: 15px;
+				.web-form {
+					background-color: var(--fg-color);
+					padding: 1.25rem 2rem 2rem;
+					border: 1px solid var(--dark-border-color);
+					border-top: none;
+					border-bottom-left-radius: var(--border-radius);
+					border-bottom-right-radius: var(--border-radius);
+
+					.web-form-wrapper {
+						.form-control {
+							color: var(--text-color);
+							background-color: var(--control-bg);
+						}
 
-						.box-container {
-							width: 100%;
+						.form-section {
+							.section-head {
+								font-weight: bold;
+								font-size: var(--text-xl);
+								padding: var(--padding-md) 0;
+							}
+						}
+
+						.form-column {
+							padding: 0 var(--padding-sm);
 
-							.box {
-								background-color: var(--control-bg);
-								border-radius: var(--border-radius);
+							&:first-child {
+								padding-left: 0;
 							}
 
-							.box-label {
-								height: 20px;
-								width: 100px;
-								margin-bottom: 0.5rem;
+							&:last-child {
+								padding-right: 0;
 							}
 
-							.box-area {
-								height: 34px;
-								width: 100%;
+							@include media-breakpoint-down(sm) {
+								padding: 0;
 							}
 						}
-					}
-				}
-			}
 
-			.web-form-footer {
-				margin-top: 1rem;
+						.web-form-skeleton {
+							.box-group {
+								display: flex;
+								gap: 20px;
+								margin-bottom: 15px;
 
-				.web-form-actions {
-					display: flex;
-					justify-content: space-between;
+								.box-container {
+									width: 100%;
 
-					.btn {
-						font-size: var(--text-base);
-					}
+									.box {
+										background-color: var(--control-bg);
+										border-radius: var(--border-radius);
+									}
 
-					.btn-link {
-						padding-left: 0px;
-						color: var(--text-color);
+									.box-label {
+										height: 20px;
+										width: 100px;
+										margin-bottom: 0.5rem;
+									}
 
-						&:hover {
-							color: var(--text-on-light-blue);
+									.box-area {
+										height: 34px;
+										width: 100%;
+									}
+								}
+							}
 						}
 					}
 
-					.left-area {
-						display: flex;
-						flex: 1;
-					}
+					.web-form-footer {
+						margin-top: 1rem;
 
-					.center-area {
-						display: flex;
-						align-items: center;
-						font-size: var(--text-base);
-
-						.slides-progress {
+						.web-form-actions {
 							display: flex;
+							justify-content: space-between;
 
-							.slide-step {
-								@include flex(flex, center, center, null);
-
-								height: 18px;
-								width: 18px;
-								border-radius: var(--border-radius-full);
-								border: 1px solid var(--gray-300);
-								margin: 0 var(--margin-xs);
-								background-color: var(--card-bg);
-
-								.slide-step-indicator {
-									height: 6px;
-									width: 6px;
-									background-color: var(--gray-300);
-									border-radius: var(--border-radius-full);
-								}
+							.btn {
+								font-size: var(--text-base);
+							}
 
-								.slide-step-complete {
-									display: none;
+							.btn-link {
+								padding-left: 0px;
+								color: var(--text-color);
 
-									.icon-xs {
-										height: 10px;
-										width: 10px;
-									}
+								&:hover {
+									color: var(--text-on-light-blue);
 								}
+							}
 
-								&.active {
-									border: 1px solid var(--primary);
+							.left-area {
+								display: flex;
+								flex: 1;
+							}
 
-									.slide-step-indicator {
-										display: block;
-										background-color: var(--primary);
-									}
-								}
+							.center-area {
+								display: flex;
+								align-items: center;
+								font-size: var(--text-base);
+
+								.slides-progress {
+									display: flex;
+
+									.slide-step {
+										@include flex(flex, center, center, null);
+
+										height: 18px;
+										width: 18px;
+										border-radius: var(--border-radius-full);
+										border: 1px solid var(--gray-300);
+										margin: 0 var(--margin-xs);
+										background-color: var(--card-bg);
+
+										.slide-step-indicator {
+											height: 6px;
+											width: 6px;
+											background-color: var(--gray-300);
+											border-radius: var(--border-radius-full);
+										}
 
-								&.step-success:not(.active) {
-									background-color: var(--primary);
-									border: 1px solid var(--primary);
+										.slide-step-complete {
+											display: none;
 
-									.slide-step-indicator {
-										display: none;
-									}
+											.icon-xs {
+												height: 10px;
+												width: 10px;
+											}
+										}
 
-									.slide-step-complete {
-										display: flex;
+										&.active {
+											border: 1px solid var(--primary);
 
-										.icon use {
-											stroke-width: 2;
-											stroke: var(--white);
+											.slide-step-indicator {
+												display: block;
+												background-color: var(--primary);
+											}
+										}
+
+										&.step-success:not(.active) {
+											background-color: var(--primary);
+											border: 1px solid var(--primary);
+
+											.slide-step-indicator {
+												display: none;
+											}
+
+											.slide-step-complete {
+												display: flex;
+
+												.icon use {
+													stroke-width: 2;
+													stroke: var(--white);
+												}
+											}
 										}
 									}
 								}
 							}
+
+							.right-area {
+								display: flex;
+								justify-content: flex-end;
+								flex: 1;
+							}
 						}
 					}
+				}
 
-					.right-area {
+				.attachments {
+					margin-top: 2rem;
+					padding: 2rem;
+					border-radius: var(--border-radius);
+					border: 1px solid var(--dark-border-color);
+
+					.attachment {
 						display: flex;
-						justify-content: flex-end;
-						flex: 1;
+						justify-content: space-between;
+						gap: 6px;
+						color: var(--text-muted);
+						font-size: var(--text-md);
+
+						&:hover {
+							text-decoration: none;
+							.file-name span {
+								text-decoration: underline;
+							}
+						}
 					}
 				}
-			}
-		}
 
-		.attachments {
-			margin-top: 2rem;
-			padding: 2rem;
-			border-radius: var(--border-radius);
-			border: 1px solid var(--dark-border-color);
-
-			.attachment {
-				display: flex;
-				justify-content: space-between;
-				gap: 6px;
-				color: var(--text-muted);
-				font-size: var(--text-md);
-
-				&:hover {
-					text-decoration: none;
-					.file-name span {
-						text-decoration: underline;
+				.success-page {
+					background-color: var(--fg-color);
+					padding: 2rem;
+					border: 1px solid var(--dark-border-color);
+					border-radius: var(--border-radius);
+					text-align: center;
+
+					svg.icon {
+						width: 5rem;
+						height: 5rem;
+						margin: 1rem;
 					}
-				}
-			}
-		}
 
-		.success-page {
-			background-color: var(--fg-color);
-			padding: 2rem;
-			border: 1px solid var(--dark-border-color);
-			border-radius: var(--border-radius);
-			text-align: center;
-
-			svg.icon {
-				width: 5rem;
-				height: 5rem;
-				margin: 1rem;
-			}
+					h2 {
+						margin-top: 0;
+						margin-bottom: 0;
+					}
 
-			h2 {
-				margin-top: 0;
-				margin-bottom: 0;
-			}
+					.success-message {
+						margin-bottom: 1.6rem;
+					}
+				}
 
-			.success-message {
-				margin-bottom: 1.6rem;
-			}
-		}
+				.web-list-container {
+					min-height: 470px;
+					border: 1px solid var(--dark-border-color);
+					border-radius: var(--border-radius-md);
+					padding: 2rem;
 
-		.web-list-container {
-			min-height: 470px;
-			border: 1px solid var(--dark-border-color);
-			border-radius: var(--border-radius-md);
-			padding: 2rem;
+					.web-list-header {
+						display: flex;
+						justify-content: space-between;
+						border-bottom: 1px solid var(--dark-border-color);
+						padding-bottom: 1.25rem;
 
-			.web-list-header {
-				display: flex;
-				justify-content: space-between;
-				border-bottom: 1px solid var(--dark-border-color);
-				padding-bottom: 1.25rem;
+						.web-list-actions {
+							align-self: center;
+						}
+					}
 
-				.web-list-actions {
-					align-self: center;
-				}
-			}
+					.web-list-filters {
+						display: flex;
+						flex-wrap: wrap;
+						margin: 1.25rem 0;
+						gap: 10px;
+
+						.form-group.frappe-control {
+							min-width: 145px;
+							padding: 0px;
+							margin: 0px;
+							align-self: center;
+
+							.checkbox {
+								.input-xs {
+									height: var(--checkbox-size);
+								}
 
-			.web-list-filters {
-				display: flex;
-				flex-wrap: wrap;
-				margin: 1.25rem 0;
-				gap: 10px;
-
-				.form-group.frappe-control {
-					min-width: 145px;
-					padding: 0px;
-					margin: 0px;
-					align-self: center;
-
-					.checkbox {
-						.input-xs {
-							height: var(--checkbox-size);
-						}
+								.help-box {
+									display: none;
+								}
+							}
 
-						.help-box {
-							display: none;
+							.input-xs {
+								height: 28px;
+								line-height: 1.2;
+							}
 						}
 					}
 
-					.input-xs {
-						height: 28px;
-						line-height: 1.2;
-					}
-				}
-			}
+					.web-list-table {
+						overflow: auto;
 
-			.web-list-table {
-				overflow: auto;
+						.table {
+							border-bottom: 1px solid var(--border-color);
+							border-top: 1px solid var(--border-color);
 
-				.table {
-					border-bottom: 1px solid var(--border-color);
-					border-top: 1px solid var(--border-color);
+							thead tr {
+								th {
+									border: 0;
+									font-size: 13px;
+									font-weight: normal;
+									color: var(--text-muted);
 
-					thead tr {
-						th {
-							border: 0;
-							font-size: 13px;
-							font-weight: normal;
-							color: var(--text-muted);
+									input[type="checkbox"] {
+										margin-bottom: -2px;
+									}
+								}
+							}
+
+							tbody tr {
+								color: var(--text-color);
+								cursor: pointer;
+
+								td {
+									font-size: 13px;
+									border-top: 1px solid var(--border-color);
+								}
+							}
 
 							input[type="checkbox"] {
-								margin-bottom: -2px;
+								margin-top: 2px;
 							}
-						}
-					}
 
-					tbody tr {
-						color: var(--text-color);
-						cursor: pointer;
+							.list-col-checkbox {
+								width: 1rem;
+							}
 
-						td {
-							font-size: 13px;
-							border-top: 1px solid var(--border-color);
+							.list-col-serial {
+								width: 1.5rem;
+							}
 						}
-					}
-
-					input[type="checkbox"] {
-						margin-top: 2px;
-					}
 
-					.list-col-checkbox {
-						width: 1rem;
+						.no-result {
+							min-height: 330px;
+							border-top: 1px solid var(--border-color);
+						}
 					}
 
-					.list-col-serial {
-						width: 1.5rem;
+					.web-list-footer {
+						text-align: right;
 					}
 				}
 
-				.no-result {
-					min-height: 330px;
-					border-top: 1px solid var(--border-color);
+				.breadcrumb-container.container {
+					@include media-breakpoint-up(sm) {
+						padding-left: 0;
+					}
 				}
 			}
 
-			.web-list-footer {
-				text-align: right;
-			}
-		}
-
-		.breadcrumb-container.container {
-			@include media-breakpoint-up(sm) {
+			@include media-breakpoint-down(lg) {
 				padding-left: 0;
+				padding-right: 0;
 			}
 		}
 	}

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

@@ -2,6 +2,13 @@
 
 {% block breadcrumbs %}{% endblock %}
 
+{% block header %}
+	{% if banner_image %}
+		<!-- banner image -->
+		<img class="web-form-banner-image" src="{{ banner_image }}" alt="Banner Image">
+	{% endif %}
+{% endblock %}
+
 {% macro header_buttons() %}
 	{% if allow_edit and in_view_mode %}
 		<!-- edit button -->
@@ -40,13 +47,6 @@
 {% endmacro %}
 
 {% block page_content %}
-	<!-- banner image -->
-	{% if banner_image %}
-		<div class="web-form-banner-image">
-			<img src="{{ banner_image }}" alt="Banner Image">
-		</div>
-	{% endif %}
-
 	<!-- web form container -->
 	<div class="web-form-container">
 		<!-- breadcrumb -->