diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index a106fa8f92..88237e3282 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/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;
}
}
}
diff --git a/frappe/website/doctype/web_form/templates/web_form.html b/frappe/website/doctype/web_form/templates/web_form.html
index 7c4dc6d94d..a3ebc35e69 100644
--- a/frappe/website/doctype/web_form/templates/web_form.html
+++ b/frappe/website/doctype/web_form/templates/web_form.html
@@ -2,6 +2,13 @@
{% block breadcrumbs %}{% endblock %}
+{% block header %}
+ {% if banner_image %}
+
+ 
+ {% endif %}
+{% endblock %}
+
{% macro header_buttons() %}
{% if allow_edit and in_view_mode %}
@@ -40,13 +47,6 @@
{% endmacro %}
{% block page_content %}
-
- {% if banner_image %}
-
- {% endif %}
-