From 74560b32c1bcf43f1e91608ca42b539f13380dce Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Mon, 27 May 2013 14:47:56 +0530
Subject: [PATCH] [website] updates for bootstrap3

---
 patches/may_2013/p06_make_notes.py            |   1 +
 website/css/website.css                       |  42 +-----
 .../style_settings/custom_template.css        |  21 +--
 website/templates/css/blog_page.css           |   4 +
 website/templates/html/blog_footer.html       |   2 +-
 website/templates/html/blog_page.html         |   2 +-
 website/templates/html/footer.html            | 134 ++++++++++--------
 website/templates/html/navbar.html            |  63 ++++----
 .../templates/html/product_breadcrumbs.html   |   2 +-
 website/templates/html/product_group.html     |   2 -
 .../templates/html/product_search_box.html    |  13 +-
 website/templates/js/blog.js                  |   2 +-
 website/templates/js/product_list.js          |   2 +-
 website/templates/pages/blog.html             |   2 +-
 website/templates/pages/contact.html          |  30 ++--
 15 files changed, 149 insertions(+), 173 deletions(-)

diff --git a/patches/may_2013/p06_make_notes.py b/patches/may_2013/p06_make_notes.py
index b9dbca1859..bdf7aec04a 100644
--- a/patches/may_2013/p06_make_notes.py
+++ b/patches/may_2013/p06_make_notes.py
@@ -20,3 +20,4 @@ def execute():
 		
 	webnotes.delete_doc("DocType", "Question")
 	webnotes.delete_doc("DocType", "Answer")
+	webnotes.bean("Style Settings").save()
diff --git a/website/css/website.css b/website/css/website.css
index 25e2c91ac2..ea88396a5d 100644
--- a/website/css/website.css
+++ b/website/css/website.css
@@ -1,47 +1,15 @@
-div.outer {
-	padding: 30px;
-	margin: 30px -30px 10px -30px;
-	min-height: 400px;
+h1, h2, h3, h4, h5 {
+	font-weight: bold;
 }
 
-.outer .navbar {
-	margin: -30px -30px 20px -30px;
-}
-
-footer {
-	text-align: left;
-	margin: auto;
-	margin-bottom: 20px;
-}
-
-.navbar-inner {
-	border: 0px;
-	border-bottom: 1px solid #ddd;
-	border-radius: 0px;
-	padding-right: 30px;
-	padding-left: 30px;
-}
-
-p, li {
-	line-height: 1.5em;
-}
-
-.layout-wrapper {
-	box-shadow: none;
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	border-radius: 0px 0px 5px 5px;
-}
-
-.layout-main {
-	min-height: 400px;
-	padding: 30px;
+.content {
+	padding-bottom: 30px;
 }
 
 .missing-image {
 	background-color: #eee;
 	padding: 40px;
-	width: 32px;
+	width: 112px;
 	font-size: 32px;
 	color: #888;
 }
diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css
index f055b782fe..996774eaea 100644
--- a/website/doctype/style_settings/custom_template.css
+++ b/website/doctype/style_settings/custom_template.css
@@ -66,8 +66,9 @@ div.web-footer, div.web-footer a {
 }
 
 /* Bootstrap Navbar */
-.navbar-inverse .navbar-inner {
+.navbar-inverse {
 	box-shadow: none;
+	border-radius: 0px;
     background-color: #{{ doc.top_bar_background or "444444"}};
     background-repeat: repeat-x;
 	background-image: none;
@@ -78,9 +79,9 @@ div.web-footer, div.web-footer a {
 	{%- endif %}
 }
 
-.navbar-inverse .brand,
-.navbar-inverse .brand:hover,
-.navbar-inverse .brand:focus,
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-brand:hover,
+.navbar-inverse .navbar-brand:focus,
 .navbar-inverse .nav > li > a {
   color: #{{ doc.top_bar_foreground or "fffffff"}};
   text-shadow: none;
@@ -117,8 +118,8 @@ div.web-footer, div.web-footer a {
   color: #{{ doc.top_bar_foreground or "fffffff"}};
 }
 
-.navbar-fixed-top .navbar-inner,
-.navbar-static-top .navbar-inner {
+.navbar-fixed-top,
+.navbar-static-top {
   -webkit-box-shadow: none;
      -moz-box-shadow: none;
           box-shadow: none;
@@ -190,14 +191,6 @@ div.web-footer, div.web-footer a {
   text-shadow: none;
 }
 
-.breadcrumb > li > .divider {
-  color: #{{ doc.page_text }};
-}
-
-.breadcrumb > .active {
-  color: #{{ doc.page_text }};
-}
-
 
 .table-striped tbody > tr:nth-child(odd) > td,
 .table-striped tbody > tr:nth-child(odd) > th {
diff --git a/website/templates/css/blog_page.css b/website/templates/css/blog_page.css
index 8f56cd2fec..ffa45b4115 100644
--- a/website/templates/css/blog_page.css
+++ b/website/templates/css/blog_page.css
@@ -1,4 +1,8 @@
 	<style>
+		[itemprop="articleBody"] {
+			font-size: 120%;
+		}
+	
 		.comment-title {
 			color:#777;
 		}
diff --git a/website/templates/html/blog_footer.html b/website/templates/html/blog_footer.html
index cab099b4ea..8a845725e2 100644
--- a/website/templates/html/blog_footer.html
+++ b/website/templates/html/blog_footer.html
@@ -5,8 +5,8 @@
 	<ul class="breadcrumb" style="background-color: transparent; padding-left: 0px;">
 	{% for category in categories %}
 		<li><a href="blog?category={{ category }}">{{ category }}</a> 
-		{% if not loop.last %}<span class="divider">/</span>{% endif %}</li>
 	{% endfor %}
+	</ul>
 	<br><br>
 	{% endif %}
 	<p>Show posts by <a href="blog">everyone</a>. Meet the <a href="writers">writers</a> of this blog</p>
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index c5378dd716..ddb61d0278 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -37,7 +37,7 @@
 		
 		{% include 'app/website/templates/html/comment.html' %}
 	</div>
-	<div><button class="btn add-comment">{{ texts.add_comment }}</button></div>
+	<div><button class="btn btn-default add-comment">{{ texts.add_comment }}</button></div>
 	<div style="display: none; margin-top: 10px;" 
 		id="comment-form">
 		<div class="alert" style="display:none;"></div>
diff --git a/website/templates/html/footer.html b/website/templates/html/footer.html
index 746b6e9114..3161987ed8 100644
--- a/website/templates/html/footer.html
+++ b/website/templates/html/footer.html
@@ -1,71 +1,79 @@
-<footer class="container"><div class="web-footer">
-	{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
-	<div class="social-icons" style="">
-		<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>
-		{% if google_plus_one %}
-			<a href="https://plus.google.com/share?url={{ url }}"
-			 	target="_blank"><i class="icon-google-plus"></i></a>
+<footer class="container">
+	<div class="web-footer row">
+	<div class="col col-lg-12">
+		{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
+		<div class="social-icons" style="">
+			<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>
+			{% if google_plus_one %}
+				<a href="https://plus.google.com/share?url={{ url }}"
+				 	target="_blank"><i class="icon-google-plus"></i></a>
+			{% endif %}
+			{% if twitter_share %}
+				<a href="https://twitter.com/intent/tweet?url={{ url }}&text={{ encoded_title }}"
+					target="_blank" ><i class="icon-twitter"></i></a>
+			{% endif %}
+			{% if facebook_share %}
+				<a href="https://www.facebook.com/sharer.php?u={{ url }}&t={{ encoded_title }}&via={{ twitter_share_via }}"
+					target="_blank"><i class="icon-facebook"></i></a>
+			{% endif %}
+			{% if linked_in_share %}
+				<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ url }}&title={{ encoded_title }}"
+					target="_blank"><i class="icon-linkedin"></i></a>
+			{% endif %}
+		</div>
 		{% endif %}
-		{% if twitter_share %}
-			<a href="https://twitter.com/intent/tweet?url={{ url }}&text={{ encoded_title }}"
-				target="_blank" ><i class="icon-twitter"></i></a>
+		<p style="float: right; clear: right;">
+			<a style="font-size: 90%; color: #888;" href="attributions">ERPNext Powered</a>
+		</p>
+		<div class="web-footer-menu">
+			<ul>
+				{% for item in footer_items %}
+				<li><a href="{{ item.url }}" {{ item.target }}
+					data-label="{{ item.label }}">{{ item.label }}</a></li>
+				{% endfor %}
+			</ul>
+		</div>
+		{% if copyright %}
+		<div class="web-footer-copyright">&copy; {{ copyright }}</div>
 		{% endif %}
-		{% if facebook_share %}
-			<a href="https://www.facebook.com/sharer.php?u={{ url }}&t={{ encoded_title }}&via={{ twitter_share_via }}"
-				target="_blank"><i class="icon-facebook"></i></a>
+		{% if address %}
+		{{ address }}
 		{% endif %}
-		{% if linked_in_share %}
-			<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ url }}&title={{ encoded_title }}"
-				target="_blank"><i class="icon-linkedin"></i></a>
-		{% endif %}
-	</div>
-	{% endif %}
-	<p style="float: right; clear: right;">
-		<a style="font-size: 90%; color: #888;" href="attributions">ERPNext Powered</a>
-	</p>
-	<div class="web-footer-menu">
-	<ul>
-		{% for item in footer_items %}
-		<li><a href="{{ item.url }}" {{ item.target }}
-			data-label="{{ item.label }}">{{ item.label }}</a></li>
-		{% endfor %}
-	</ul>
-	</div>
-	{% if copyright %}
-	<div class="web-footer-copyright">&copy; {{ copyright }}</div>
-	{% endif %}
-	{% if address %}
-	{{ address }}
-	{% endif %}
-	<p><div class="input-append" style="text-align: center; margin:30px 0px;">
-	  <input class="col col-lg-3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
-	  <button class="btn" type="button" id="footer-subscribe-button">Stay Updated</button>
-	</div></p>
-	<script>
-		$("#footer-subscribe-button").click(function() {
+		<br>
+		<div class="input-group col col-lg-6 col-offset-3">
+			<input type="text" id="footer-subscribe-email" placeholder="Your email address...">
+			<span class="input-group-btn">
+				<button class="btn btn-default" type="button" id="footer-subscribe-button">Stay Updated</button>
+			</span>
+		</div>
+		<br>
+		<script>
+			$("#footer-subscribe-button").click(function() {
 
-			$("#footer-subscribe-email").attr('disabled', true);
-			$("#footer-subscribe-button").html("Sending...")
-				.attr("disabled", true);
+				$("#footer-subscribe-email").attr('disabled', true);
+				$("#footer-subscribe-button").html("Sending...")
+					.attr("disabled", true);
 
-			if($("#footer-subscribe-email").val()) {
-				erpnext.send_message({
-					subject:"Subscribe me",
-					sender: $("#footer-subscribe-email").val(),
-					message: "Subscribe to newsletter (via website footer).",
-					callback: function(r) {
-						if(!r.exc) {
-							$("#footer-subscribe-button").html("Thank You :)")
-								.addClass("btn-success").attr("disabled", true);
-						} else {
-							$("#footer-subscribe-button").html("Error :( Not a valid id?")
-								.addClass("btn-danger").attr("disabled", false);
-							$("#footer-subscribe-email").val("").attr('disabled', false);
+				if($("#footer-subscribe-email").val()) {
+					erpnext.send_message({
+						subject:"Subscribe me",
+						sender: $("#footer-subscribe-email").val(),
+						message: "Subscribe to newsletter (via website footer).",
+						callback: function(r) {
+							if(!r.exc) {
+								$("#footer-subscribe-button").html("Thank You :)")
+									.addClass("btn-success").attr("disabled", true);
+							} else {
+								$("#footer-subscribe-button").html("Error :( Not a valid id?")
+									.addClass("btn-danger").attr("disabled", false);
+								$("#footer-subscribe-email").val("").attr('disabled', false);
+							}
 						}
-					}
-				});
-			}
-		});
-	</script>
+					});
+				}
+			});
+		</script>
+		</div>
+	</div>
 	</div>
 </footer>
diff --git a/website/templates/html/navbar.html b/website/templates/html/navbar.html
index 55e8094b3d..635cf349cc 100644
--- a/website/templates/html/navbar.html
+++ b/website/templates/html/navbar.html
@@ -1,37 +1,36 @@
 <div class="navbar navbar-inverse" style="">
-	<div class="navbar-inner">
-		{%- if brand_html %}<a class="brand" href="index">{{ brand_html }}</a>{% endif -%}
-		<div class="container">
-			<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-			</button>
-			<div class="nav-collapse collapse">
-				<ul class="nav">
-					{%- for page in top_bar_items -%}
-					{% if not page.parent_label -%}
-					<li data-label="{{ page.label }}" {% if page.child_items %} class="dropdown"{% endif %}>
-						<a href="{{ page.url or '#' }}" {% if page.child_items %} class="dropdown-toggle" onclick="return false;" data-toggle="dropdown"{% endif %} {{ page.target or ''}}>
-						{{ page.label }}
-						{%- if page.child_items -%}
-							<b class="caret"></b>
-						</a>
-							<ul class="dropdown-menu">
-							{%- for child in page.child_items -%}
-								<li data-label="{{ child.label }}">
-									<a {% if child.indent %} style="padding-left: {{(int(child.indent)+1)*15 }}px"{% endif %} href="{{ child.url }}" {{ child.target or '' }}>{{ child.label }}</a>
-								</li>
-							{%- endfor -%}
-							</ul>
-						{%- else -%}
-						</a>
-						{%- endif -%}
-						</li>
+	{%- if brand_html %}<a class="navbar-brand" href="index">{{ brand_html }}</a>{% endif -%}
+	<div class="container">
+		<button type="button" class="navbar-toggle" data-toggle="collapse" 
+			data-target=".navbar-responsive-collapse">
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+		</button>
+		<div class="nav-collapse collapse navbar-responsive-collapse">
+			<ul class="nav navbar-nav">
+				{%- for page in top_bar_items -%}
+				{% if not page.parent_label -%}
+				<li data-label="{{ page.label }}" {% if page.child_items %} class="dropdown"{% endif %}>
+					<a href="{{ page.url or '#' }}" {% if page.child_items %} class="dropdown-toggle" onclick="return false;" data-toggle="dropdown"{% endif %} {{ page.target or ''}}>
+					{{ page.label }}
+					{%- if page.child_items -%}
+						<b class="caret"></b>
+					</a>
+						<ul class="dropdown-menu">
+						{%- for child in page.child_items -%}
+							<li data-label="{{ child.label }}">
+								<a {% if child.indent %} style="padding-left: {{(int(child.indent)+1)*15 }}px"{% endif %} href="{{ child.url }}" {{ child.target or '' }}>{{ child.label }}</a>
+							</li>
+						{%- endfor -%}
+						</ul>
+					{%- else -%}
+					</a>
 					{%- endif -%}
-					{%- endfor %}
-				</ul>
-			</div>
+					</li>
+				{%- endif -%}
+				{%- endfor %}
+			</ul>
 		</div>
 	</div>
 </div>
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 3f8c42ac73..3cd501e961 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -3,7 +3,7 @@
 	<div class="clearfix">
 		<ul class="breadcrumb">
 			{% for ig in obj.parent_groups[:-1] %}
-			<li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a> <span class="divider">/</span></li>
+			<li><a href="{{ ig.page_name }}.html">{{ ig.name }}</a></li>
 			{% endfor %}
 			<li class="active">{{ obj.parent_groups[-1].name }}</li>
 		</ul>
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index d11e1b0c5e..54a55af34e 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -13,8 +13,6 @@
 	<h3>{{ name }}</h3>
 	{% endif %}
 </div>
-{% include 'app/website/templates/html/product_search_box.html' %}
-{% include 'app/website/templates/html/product_breadcrumbs.html' %}
 <div class="col col-lg-12">
 	{% if sub_groups %}
 	<hr />
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 9bce9c501e..29564f3fae 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,11 +1,12 @@
 <div class="col col-lg-12 clearfix">
-	<div class="pull-right" style="margin-top: 15px;">
+	<div class="pull-right" style="margin-top: 15px; margin-bottom: 15px;">
 		<form class="form-search">
-			<div class="input-append">
-				<input type="text" class="col col-lg-2 search-query" 
-					id="product-search" placeholder="Product Search..." />
-				<button class="btn" id="btn-product-search">
-					<i class="icon-search"></i></button>
+			<div class="input-group col col-lg-4 col-offset-8">
+				<input type="text" id="product-search" placeholder="Product Search...">
+				<span class="input-group-btn">
+					<button class="btn btn-default" type="button" id="btn-product-search">
+						<i class="icon-search"></i></button>
+				</span>
 			</div>
 		</form>
 	</div>
diff --git a/website/templates/js/blog.js b/website/templates/js/blog.js
index ec7b83a1b0..2154d472df 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -87,7 +87,7 @@ var blog = {
 		if(!data.length || data.length < 20) {
 			if(blog.start) {
 				$("#next-page").toggle(false)
-					.parent().append("<div class='alert alert-info'>Nothing more to show.</div>");	
+					.parent().append("<div class='text-muted'>Nothing more to show.</div>");	
 			} else {
 				$("#next-page").toggle(false)
 					.parent().append("<div class='alert'>No blogs written yet.</div>");	
diff --git a/website/templates/js/product_list.js b/website/templates/js/product_list.js
index f8f21b36d9..6873973f0f 100644
--- a/website/templates/js/product_list.js
+++ b/website/templates/js/product_list.js
@@ -40,7 +40,7 @@ window.render_product_list = function(data) {
 				.replaceWith("<div class='alert'>No products found.</div>");
 		} else {
 			$(".more-btn")
-				.replaceWith("<div class='alert'>Nothing more to show.</div>");
+				.replaceWith("<div class='text-muted'>Nothing more to show.</div>");
 		}
 	} else {
 		$(".more-btn").toggle(true)
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index ba98f36412..fcb542bff8 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -25,7 +25,7 @@
 		<!-- blog list will be generated dynamically -->
 	</div>
 	<div style="text-align: center;">
-		<button id="next-page" class="btn" 
+		<button id="next-page" class="btn btn-default" 
 			style="display:none;">More...</button>
 	</div>
 </div>
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index 10576f8ff7..113b627435 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -11,24 +11,28 @@
 	<h3>{{ obj.doc.heading or "Contact Us"}}</h3>
 	<div class="row">
 		<div class="web-form col col-lg-8">
-			<div class="row">
-			<div class="col col-lg-6">
-				<p id="contact-alert" class="alert" 
-					style="display: none;">&nbsp;</p>
-			</div>
-			</div>
-			<div class="clearfix"></div>
-			<p><select class="col col-lg-6" name="subject">
+			<p id="contact-alert" class="alert" 
+				style="display: none;">&nbsp;</p>
+			<p>
+				<select name="subject">
 				{% for option in obj.query_options %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endfor %}
-			</select></p>
-			<p><input class="col col-lg-6" name="email" type="text" placeholder="Your Email Address" /></p>
-			<p><textarea class="col col-lg-6" rows="10" name="message"></textarea></p>
-			<p><button class="btn btn-primary btn-send">Send</button></p>
+				</select>
+			</p>
+			<p>
+				<input name="email" type="text" 
+				placeholder="Your Email Address" />
+			</p>
+			<p>
+				<textarea rows="10" name="message"></textarea>
+			</p>
+			<p>
+				<button class="btn btn-primary btn-send">Send</button>
+			</p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="col col-lg-3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="col col-lg-3 col-offset-1 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
 			<h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
 			{% if obj.address.address_line1 %}
 				<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>