From 4dc37d216f3663c245921ea9feb0a624c6e9a259 Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Wed, 5 Oct 2016 17:25:17 +0530
Subject: [PATCH] [style] for web forms

---
 frappe/public/css/website.css               |  5 +-
 frappe/public/less/website.less             |  5 +-
 frappe/templates/generators/web_form.html   | 68 ++++++++++++++-------
 frappe/website/doctype/web_form/web_form.py |  6 +-
 4 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/frappe/public/css/website.css b/frappe/public/css/website.css
index 626906ffe2..b79a8795a1 100644
--- a/frappe/public/css/website.css
+++ b/frappe/public/css/website.css
@@ -592,6 +592,7 @@ fieldset {
   font-weight: 500 !important;
 }
 .web-sidebar .sidebar-items {
+  margin-top: -10px;
   margin-bottom: 30px;
 }
 .web-sidebar .sidebar-items .title {
@@ -633,7 +634,8 @@ fieldset {
   margin-top: 15px;
 }
 .web-list-item {
-  padding: 15px 0px;
+  padding: 10px;
+  margin: 0px -15px;
   border-bottom: 1px solid #EBEFF2;
 }
 .web-list-item h1,
@@ -810,7 +812,6 @@ a.active {
 }
 .page-content.with-sidebar {
   padding-left: 50px;
-  padding-right: 50px;
 }
 @media screen and (max-width: 480px) {
   .page-content {
diff --git a/frappe/public/less/website.less b/frappe/public/less/website.less
index 70e98eb732..8bdeafa350 100644
--- a/frappe/public/less/website.less
+++ b/frappe/public/less/website.less
@@ -256,6 +256,7 @@ fieldset {
 
 	.sidebar-items {
 		// margin-top:30px;
+		margin-top: -10px;
 		margin-bottom:30px;
 		.title{
 			font-size: 14px;
@@ -308,7 +309,8 @@ fieldset {
 }
 
 .web-list-item {
-	padding: 15px 0px;
+	padding: 10px;
+	margin: 0px -15px;
 	border-bottom: 1px solid @light-border-color;
 
 	h1, h2, h3 {
@@ -535,7 +537,6 @@ a.active {
 
 .page-content.with-sidebar {
 	padding-left: 50px;
-	padding-right: 50px;
 }
 
 @media screen and (max-width: 480px) {
diff --git a/frappe/templates/generators/web_form.html b/frappe/templates/generators/web_form.html
index 88014b977c..8755de0d61 100644
--- a/frappe/templates/generators/web_form.html
+++ b/frappe/templates/generators/web_form.html
@@ -32,8 +32,7 @@
 {% block page_content %}
 <div class="introduction">
 	{% if introduction_text %}
-	<p class="lead">{{ introduction_text }}</p>
-	<hr>
+	<p class="text-muted">{{ introduction_text }}</p>
 	{% endif %}
 </div>
 <div class="form-message alert alert-warning hide"></div>
@@ -74,7 +73,7 @@
 
 {%- macro help(field) -%}
 		{% if field.description -%}
-		<span class="help-block small">{{ _(field.description) }}</span>
+		<span class="help-block small text-muted">{{ _(field.description) }}</span>
 		{%- endif -%}
 {%- endmacro %}
 
@@ -147,7 +146,7 @@
 		<p class="{{ value(field, _doc) and 'hide' or '' }} attach-input-wrap">
 			<input type="file" style="margin-top: 7px;"
 				{{ properties(field) }}>
-			<p class='text-muted small'>
+			<p class='text-muted small' style='margin-bottom: 20px;'>
 				{{ _("Max attachment size is {0}MB").format(max_attachment_size) }}
 			</p>
 		</p>
@@ -157,7 +156,7 @@
 	<div class="form-group">
 		<div class="checkbox">
 			{% if with_label %}
-			<label>
+			<label class='text-muted'>
 				<input type="checkbox" id="{{ field.fieldname }}"
 					name="{{ field.fieldname }}" data-doctype="{{ field.parent }}"
 					{{ _doc and _doc.get(field.fieldname) and 'checked' or '' }}>
@@ -243,7 +242,14 @@
 	<div class="web-form-page{% if loop.index > 1 %} hidden{% endif %}"
 		data-idx="{{ loop.index }}"
 		data-label="{{ page.label or _("Page {0}").format(loop.index) }}">
-		{% if page.label %}<h2>{{ page.label }}</h2>{% endif %}
+		{% if page.label %}
+			<h2 class='text-center'>{{ page.label }}</h2>
+		{% endif %}
+		{% if page.description %}
+			<p class='text-center text-muted small'>{{ page.description }}</p>
+			<br>
+		{% endif %}
+
 		{% for section in page.sections %}
 		<div class="section">
 			{% if section.label %}
@@ -263,18 +269,18 @@
 					{% endfor %}
 			</div>
 			{% if last_page and accept_payment and payment_url %}
-				<div class="well payment-details">
-					{% if not doc.paid %}
-						{% if payment_button_help %}
-						<div class='text-muted' style='padding-bottom: 15px;'>
-							{{ payment_button_help }}</div>
-						{% endif %}
-						<a class="btn btn-primary btn-payment" href="{{ payment_url }}">
-							{{ payment_button_label }}</a>
-					{% else %}
-						<div>{{ _("Payment Complete") }}</div>
+			<div class="well payment-details">
+				{% if not doc.paid %}
+					{% if payment_button_help %}
+					<div class='text-muted' style='padding-bottom: 15px;'>
+						{{ payment_button_help }}</div>
 					{% endif %}
-				</div>
+					<a class="btn btn-primary btn-payment" href="{{ payment_url }}">
+						{{ payment_button_label }}</a>
+				{% else %}
+					<div>{{ _("Payment Complete") }}</div>
+				{% endif %}
+			</div>
 			{% endif %}
 		</div>
 		{% endfor %}
@@ -728,11 +734,30 @@ frappe.ready(function() {
 
 {% block style %}
 <style>
-.web-form-page {
+
+.introduction {
+	border-bottom: 1px solid #e1e9f0;
+	padding: 15px;
+	padding-top: 0px;
+	margin-left: -15px;
+	margin-right: -15px;
+	margin-bottom: 15px;
+}
+
+.form-group label {
+	font-weight: normal;
+}
+
+input[type='checkbox'] {
+	margin-top: 3px;
+}
+
+.checkbox label {
+	font-size: 12px;
 }
 
-.web-form-page input, .web-form-page select {
-	max-width: 500px;
+.web-form-page, .web-form-page .section {
+	padding: 20px 0px;
 }
 
 .web-form-grid-row input, .web-form-grid-row select {
@@ -748,8 +773,7 @@ frappe.ready(function() {
 
 .slide-progress {
     /*border-top: 1px solid #d1d8dd;*/
-	margin-top: -7px;
-	padding: 15px 0px;
+	margin-top: -10px;
 }
 .slide-progress .icon-fixed-width {
 	vertical-align: middle;
diff --git a/frappe/website/doctype/web_form/web_form.py b/frappe/website/doctype/web_form/web_form.py
index 4b06092830..db5c659dd9 100644
--- a/frappe/website/doctype/web_form/web_form.py
+++ b/frappe/website/doctype/web_form/web_form.py
@@ -239,7 +239,7 @@ def get_context(context):
 			new_page = {'sections': []}
 			layout.append(new_page)
 			if df and df.fieldtype=='Page Break':
-				new_page['label'] = df.label
+				new_page.update(df.as_dict())
 
 			return new_page
 
@@ -247,7 +247,7 @@ def get_context(context):
 			new_section = {'columns': []}
 			layout[-1]['sections'].append(new_section)
 			if df and df.fieldtype=='Section Break':
-				new_section['label'] = df.label
+				new_section.update(df.as_dict())
 
 			return new_section
 
@@ -280,7 +280,7 @@ def get_context(context):
 				if not section:
 					section = add_section()
 					column = None
-				if not column:
+				if column==None:
 					column = add_column()
 				column.append(df)