Merge pull request #1740 from KanchanChauhan/websitemakeover

Website makeover

frappe/public/css/website.css

@@ -555,11 +555,13 @@ fieldset {
 .web-sidebar .sidebar-item a {
   color: #8D99A6;
 }
-.web-sidebar .sidebar-item a:hover {
-  border-color: inherit;
-}
 .web-sidebar .sidebar-item a.active {
   color: #36414C !important;
+  font-weight: 500 !important;
+}
+.web-sidebar .sidebar-items {
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
 .page-footer {
   padding: 15px 0px;
@@ -581,7 +583,7 @@ fieldset {
 }
 .web-list-item {
   padding: 15px 0px;
-  border-bottom: 1px solid #EBEFF2;
+  border-top: 1px solid #EBEFF2;
 }
 .web-list-item h1,
 .web-list-item h2,
@@ -598,7 +600,25 @@ fieldset {
   text-decoration: none;
 }
 .web-list-item:last-child {
-  border-bottom: none;
+  border-bottom: 1px solid #EBEFF2;
+}
+.blog-info {
+  text-align: center;
+  margin-top: 30px;
+}
+.blog-text,
+.post-description {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  font-size: 16px;
+  line-height: 28px;
+}
+.blog-text p,
+.post-description p {
+  margin-bottom: 40px;
+}
+.blogger-name {
+  font-size: 24px;
 }
 .blog-footer {
   padding: 5px 15px;
@@ -614,24 +634,87 @@ fieldset {
 .blog-category {
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-size: 12px;
+  font-size: 10px;
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+}
+.author {
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 10px;
+  border-bottom: 1px solid #EBEFF2;
+  padding-bottom: 20px;
 }
 .blogger {
   padding-top: 30px;
   padding-bottom: 15px;
-  border-top: 1px solid #EBEFF2;
+}
+.blog-dot:before {
+  padding-right: 8px;
+  padding-left: 8px;
+  content: "\2022";
+}
+.blog-list-item {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  border: none;
+}
+.post-by {
+  padding-bottom: 50px;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid #EBEFF2;
+}
+.blog-list-item .blog-text,
+.blog-list-item .read-more-btn,
+.blog-list-item .recent-post {
+  display: none;
+}
+.blog-list-item .post-by {
+  padding-bottom: 25px;
+}
+.blog-list-item .post-description {
+  padding-top: 25px;
+}
+.blog-list-item:first-child .row .blog-header {
+  font-size: 34px;
+}
+.blog-list-item:first-child .row .post-by {
+  font-weight: 500;
+}
+.blog-list-item:first-child .row .post-description {
+  font-weight: 500;
+}
+.blog-list-item:first-child .row .blog-text {
+  display: block;
+  padding-top: 0px;
+  padding-bottom: 20px;
+}
+.blog-list-item:first-child .row .read-more-btn {
+  display: inline;
+  padding-top: 0px;
+  border-bottom: 1px dotted #d1d8dd;
+  font-size: 12px;
+}
+.blog-list-item:first-child .row .post-description {
+  padding-bottom: 25px;
+}
+.blog-list-item:first-child .row .recent-post {
+  display: block;
+  padding-top: 50px;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #EBEFF2;
 }
 .blog-comments,
 .help-article-comments {
-  padding: 0px 15px 15px 85px;
+  padding: 0px 15px 15px 0px;
 }
-.comment-view {
+.blog-comments {
   background-color: #fafbfc;
   position: relative;
 }
-.comment-view:before {
+.blog-comments:before {
   content: "";
   background-color: #fafbfc;
   position: absolute;
@@ -864,6 +947,11 @@ body {
 .page-hero h1 {
   font-size: 32px;
 }
+.page-head h1 {
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 24px;
+}
 .btn-next-wrapper {
   margin-top: 60px;
 }
@@ -892,27 +980,6 @@ a:link,
 a:active {
   text-decoration: none;
 }
-.blog-header {
-  font-size: 36px;
-  margin-left: -1px;
-}
-.blog-dot:before {
-  padding-right: 8px;
-  padding-left: 8px;
-  content: "\2022";
-}
-.blog-list-item {
-  margin-top: 25px;
-  margin-bottom: 25px;
-  border: none;
-}
-.post-by {
-  margin-top: -5px;
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  font-size: 12px;
-  letter-spacing: 0.5px;
-}
 li .footer-child-item {
   margin-bottom: 4px !important;
 }
@@ -938,6 +1005,7 @@ li .social-child-item {
   font-size: 20px;
   padding-top: 30px;
   padding-bottom: 20px;
+  border-bottom: 1px solid #d1d8dd;
 }
 .item-search {
   border-bottom: 1px solid #d1d8dd;
@@ -960,3 +1028,21 @@ li .social-child-item {
   padding-bottom: 2000px;
   margin-bottom: -2000px;
 }
+.shopping-cart {
+  margin-top: 12px;
+  margin-bottom: 8px;
+  padding-right: 15px;
+  border-right: 1px solid #d1d8dd;
+}
+.badge-wrapper {
+  min-height: 17px;
+  min-width: 17px;
+  display: inline-block;
+  border: 1px solid #d1d8dd;
+  border-radius: 3px;
+  color: #7575ff;
+  text-align: center;
+}
+.dropdown .logged-in {
+  border-left: 1px solid #d1d8dd;
+}

frappe/public/less/website.less

@@ -22,6 +22,7 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: 300;
 }
 
+
 .navbar-brand {
 	max-width: none;
 }
@@ -233,12 +234,14 @@ fieldset {
 		color: @text-muted;
 	}
 
-	.sidebar-item a:hover {
-		border-color: inherit;
-	}
-
 	.sidebar-item a.active {
 		color: @text-color !important;
+		font-weight:500 !important;
+	}
+	
+	.sidebar-items {
+		margin-top:30px;
+		margin-bottom:30px;
 	}
 }
 
@@ -268,7 +271,7 @@ fieldset {
 
 .web-list-item {
 	padding: 15px 0px;
-	border-bottom: 1px solid @light-border-color;
+	border-top: 1px solid @light-border-color;
 
 	h1, h2, h3 {
 		margin-top: 10px;
@@ -287,7 +290,26 @@ fieldset {
 // }
 
 .web-list-item:last-child {
-	border-bottom: none;
+	border-bottom: 1px solid @light-border-color;
+}
+
+.blog-info {
+	text-align:center;
+	margin-top: 30px;
+}
+
+.blog-text, .post-description {
+	padding-top: 40px;
+	padding-bottom: 40px;
+	font-size: 16px;
+	line-height: 28px;
+	p {
+		margin-bottom: 40px;
+	}
+}
+
+.blogger-name {
+	font-size:24px;
 }
 
 .blog-footer {
@@ -307,28 +329,99 @@ fieldset {
 .blog-category {
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
-	font-size: 12px;
+	font-size: 10px;
 	text-align: center;
-	margin-bottom: 20px;
+	margin-bottom: 30px;
+}
+
+.author {
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	font-size: 10px;
+	border-bottom: 1px solid @light-border-color;
+	padding-bottom:20px;
 }
 
 .blogger {
 	padding-top: 30px;
 	padding-bottom: 15px;
-	border-top: 1px solid @light-border-color;
+}
+
+.blog-dot:before{
+	padding-right:8px;
+	padding-left:8px;
+	content:"\2022";
+}
+
+.blog-list-item {
+	margin-top:25px;
+	margin-bottom:25px;
+	border:none;
+}
+
+.post-by {
+	padding-bottom: 50px;
+	font-size: 10px;
+	letter-spacing: 0.5px;
+	border-bottom: 1px solid @light-border-color;
+}
+
+.blog-list-item {
+	.blog-text,.read-more-btn,.recent-post {
+		display: none;
+	}
+	.post-by {
+			padding-bottom: 25px;
+		}
+	.post-description{
+			padding-top: 25px;
+		}
+}
+
+.blog-list-item:first-child .row {
+	.blog-header {
+		font-size: 34px;
+	}
+	.post-by {
+		font-weight: 500;
+	}
+	.post-description {
+		font-weight: 500;
+	}
+	.blog-text {
+		display: block;
+		padding-top: 0px;
+		padding-bottom: 20px;
+	}	
+	.read-more-btn {
+		display: inline;
+		padding-top: 0px;
+		border-bottom: 1px dotted @border-color;
+		font-size: 12px;
+	}	
+	.post-description {
+		padding-bottom: 25px;
+	}
+	.recent-post {
+		display: block;
+		padding-top: 50px;
+		padding-bottom: 20px;
+		margin-bottom: 20px;
+		border-bottom: 1px solid @light-border-color;
+	}
 }
 
 .blog-comments,
 .help-article-comments {
-    padding: 0px 15px 15px 85px;
+    padding: 0px 15px 15px 0px;
 }
-.comment-view {
+.blog-comments {
 	background-color: #fafbfc;
 	position: relative;
 
 }
 
-.comment-view:before {
+.blog-comments:before {
     content:"";
     background-color:#fafbfc;
     position: absolute;
@@ -456,6 +549,12 @@ a.active {
 	}
 }
 
+.page-head h1 {
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	font-size: 24px;
+}
+
 .btn-next-wrapper {
 	margin-top: 60px;
 }
@@ -487,31 +586,6 @@ a:hover, a:visited, a:link, a:active
     text-decoration: none;
 }
 
-.blog-header {
-	font-size: 36px;
-	margin-left: -1px;
-}
-
-.blog-dot:before{
-	padding-right:8px;
-	padding-left:8px;
-	content:"\2022";
-}
-
-.blog-list-item {
-	margin-top:25px;
-	margin-bottom:25px;
-	border:none;
-}
-
-.post-by {
-	margin-top: -5px;
-	margin-bottom: 4px;
-	text-transform: uppercase;
-	font-size: 12px;
-	letter-spacing: 0.5px;
-}
-
 li .footer-child-item {
 	margin-bottom:4px !important;
 }
@@ -542,6 +616,7 @@ li .social-child-item {
 	font-size:20px;
 	padding-top:30px;
 	padding-bottom:20px;
+	border-bottom: 1px solid @border-color;
 }
 
 .item-search {
@@ -562,3 +637,22 @@ li .social-child-item {
 .vert-line>div{
         padding-bottom:2000px; margin-bottom:-2000px;}
 
+.shopping-cart {
+	margin-top:12px;
+	margin-bottom:8px;
+	padding-right:15px;
+	border-right: 1px solid @border-color;
+}
+.badge-wrapper {
+	min-height: 17px;
+	min-width: 17px;
+	display: inline-block;
+	border: 1px solid @border-color;
+	border-radius: 3px;
+	color: #7575ff;
+	text-align:center;
+}
+
+.dropdown .logged-in {
+	border-left: 1px solid @border-color;
+}

frappe/templates/generators/blog_post.html

@@ -1,15 +1,23 @@
 {% extends "templates/web.html" %}
 
-{% block header %}{{ _("Blog") }}{% endblock %}
-
+{% block breadcrumbs %}
+<div class="page-breadcrumbs" data-html-block="breadcrumbs">	                    
+	<ul class="breadcrumb">
+		<li>			
+			<a href="/blog"><h1>{{ blog_title or _("Blog") }}</h1></a>
+		</li>	
+	</ul>
+</div>
+{% endblock %}
 {% block page_content %}
-<article class="blog-content" itemscope itemtype="http://schema.org/BlogPost">
+<article class="blog-content" itemscope itemtype="http://schema.org/BlogPosting">
+	<meta  itemprop="publisher" content="{{brand_html}}"></meta>
 	<!-- begin blog content -->
 	<div class="blog-info">
 	<div class="text-muted blog-category">{{blog_category}}</div>
-	<h1 class="blog-header">{{ title }}</h1>
+	<div itemprop="headline" class="h1 blog-header">{{ title }}</div>
 	<p class="post-by text-muted"><a href="/blog?by={{ blogger }}&by_name={{ full_name }}" class="no-decoration">
-		 BY {{ blogger_info and blogger_info.full_name or full_name }}</a> <i class="blog-dot"></i> {{ frappe.format_date(published_on) }} <i class="blog-dot"></i>{{ comment_text }}</p>
+		 By <meta  itemprop="author" content="{{ blogger_info and blogger_info.full_name or full_name }}">{{ blogger_info and blogger_info.full_name or full_name }}</meta></a> <i class="blog-dot"></i> <meta  itemprop="datePublished" content="{{ frappe.format_date(published_on) }}">{{ frappe.format_date(published_on) }}</meta> <i class="blog-dot"></i>{{ comment_text }}</p>
 	</div>
 	<div itemprop="articleBody" class="longform blog-text">
 	{{ content }}
@@ -17,7 +25,7 @@
 	<!-- end blog content -->
 </article>
 {% if blogger_info %}
-<div class="post-by text-muted" style="margin-bottom:20px;">Author</div>
+<div class="author text-muted">Author</div>
 {% include "templates/includes/blog/blogger.html" %}
 {% endif %}
 <div class="blog-comments">
@@ -28,3 +36,10 @@
     frappe.ready(function() { frappe.set_search_path("/blog"); })
 </script>
 {% endblock %}
+{% block style %}
+<style>
+.content-block {
+	padding-bottom: 0px;
+}
+</style>
+{% endblock %}

frappe/templates/includes/blog/blog.html

@@ -1,7 +1,7 @@
 {% extends "templates/web.html" %}
 
 {% block title %}{{ blog_title or _("Blog") }}{% endblock %}
-{% block header %}{{ blog_title or _("Blog") }}{% endblock %}
+{% block header %}<h1>{{ blog_title or _("Blog") }}</h1>{% endblock %}
 {% block hero %}{% endblock %}
 
 {% block page_content %}

frappe/templates/includes/blog/blog_row.html

@@ -1,12 +1,19 @@
 {%- set post = doc -%}
 <div class="web-list-item blog-list-item">
 	<div class="row">
-	<div class="col-xs-12">
-		<h1 class="blog-header"><a href="/{{ post.page_name }}">{{ post.title }}</a></h1>
-		<p class="post-by text-muted"><a href="/blog?by={{ post.blogger }}&by_name={{ post.full_name }}" class="no-decoration">
-			 BY {{ post.full_name }}</a> <i class="blog-dot"></i> {{ frappe.format_date(post.published_on) }} <i class="blog-dot"></i> <a href="/{{ post.parent_website_route }}" class="no-decoration">{{ post.blog_category }}</a> <i class="blog-dot"></i> {{ post.comment_text }}</p>
-		<p class="post-description">{{ post.content }}</p>
-	</div>
-	</div>
+		<div class="col-xs-12">
+			<div class="h1 blog-header"><a href="/{{ post.page_name }}">{{ post.title }}</a></div>
+			<p class="post-by text-muted"><a href="/blog?by={{ post.blogger }}&by_name={{ post.full_name }}" class="no-decoration">
+			<a href="/{{ post.parent_website_route }}" class="no-decoration">{{ post.blog_category }}</a> <i class="blog-dot"></i>By {{ post.full_name }}</a> <i class="blog-dot"></i> {{ frappe.format_date(post.published_on) }} <i class="blog-dot"></i> {{ post.comment_text }}</p>
+			<p class="post-description">{{ post.intro }}</p>
+			<div class="longform blog-text">
+			{{ post.content }}
+			</div>
+			<span class="read-more-btn">
+			<a href="/{{ post.page_name }}">Continue Reading</a>
+			</span>
+			<span class="recent-post text-uppercase text-muted">{{_("Recent Posts")}}</span>
+		</div>
 	</div>
+</div>
 

frappe/templates/includes/blog/blogger.html

@@ -6,7 +6,7 @@
 	</div>
 	<div class="inline-block" style="width: calc(100% - 100px)">
 		<div class="blogger-name">{{ blogger_info.full_name }}</div>
-		<p class="text-muted">{{ blogger_info.bio }}</p>
+		<p class="text-muted">{%if blogger_info.bio%}{{ blogger_info.bio }}{%endif%}</p>
 		<p><a href="/blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">
 			All Posts By {{ blogger_info.full_name }}</a></p>
 	</div>

frappe/templates/includes/comments/comments.html

@@ -25,22 +25,20 @@
 			<div class="alert" style="display:none;"></div>
 			<form>
 				<fieldset>
-					<div class="row {% if login_required %}hide{% endif %}" style="margin-bottom: 15px">
+					<div class="row {% if login_required %}hide{% endif %}">
 						<div class="col-sm-6">
-							<input class="form-control" name="comment_by_fullname" placeholder="{{ _("Your Name") }}"
-								type="text">
+							<p><input class="form-control" name="comment_by_fullname" placeholder="{{ _("Your Name") }}"
+								type="text"></p>
 						</div>
 						<div class="col-sm-6">
-							<input class="form-control" name="comment_by"
-								placeholder="{{ _("Your Email Id") }}" type="email">
+							<p><input class="form-control" name="comment_by"
+								placeholder="{{ _("Your Email Id") }}" type="email"></p>
 						</div>
 					</div>
-					<textarea class="form-control" name="comment" rows=10
-						placeholder="{{ _("Comment") }}"></textarea>
-					<p style="margin-top: 15px;">
-                        <button class="btn btn-primary btn-sm" id="submit-comment">
-                            {{ _("Submit") }}</button>
-                    </p>
+					<p><textarea class="form-control" name="comment" rows=10
+						placeholder="{{ _("Comment") }}"></textarea></p>
+                        <p><button class="btn btn-primary btn-sm" id="submit-comment">
+                            {{ _("Submit") }}</button></p>
 				</fieldset>
 			</form>
 		</div>

frappe/templates/includes/footer/footer_items.html

@@ -1,6 +1,6 @@
 {% for page in footer_items %}
 	{% if not page.parent_label -%}
-		<li data-label='{{ page.label }}' {% if page.child_items %} {% endif %}>
+		<li style="margin-left:65px;" data-label='{{ page.label }}' {% if page.child_items %} {% endif %}>
 		<a {% if not page.child_items -%} href="{{ (page.url or '')|abs_url }}" {%- endif %}
 		{% if page.child_items %} onclick="return false;" {% endif %}
 		{{ page.target or ''}}>				
@@ -16,9 +16,10 @@
 			{%- endfor -%}
 			</ul>
 		{%- else -%}
-		{{ page.label }}
+		<span class="footer-group-label text-extra-muted">{{ page.label }}<span>
 		</a>
 		{%- endif -%}
 		</li>
 	{%- endif -%}
-{% endfor %}
+{% endfor %}
+

frappe/templates/includes/login/login.css

@@ -98,7 +98,9 @@ h5:before {
     position: relative;
     text-align: center;
 	margin-bottom:20px;
-
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+	font-weight: 300;
 }
 
 p{
@@ -109,6 +111,13 @@ p{
 	color: white;
 }
 
+.btn-login {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 400;	
+	font-size: 14px;
+}
+
 .content-block {
 	padding-top:10px;
 	padding-bottom:30px;

frappe/templates/includes/navbar/navbar_items.html

@@ -13,6 +13,6 @@
 	{% include "templates/includes/navbar/navbar_link.html" %}
 	{%- endif -%}
 	{%- endfor %}
-	<li class="shopping-cart" style="padding-top:9px;"></li>
+	{% block navbar_right_extension %}{% endblock %}
 	{% include "templates/includes/navbar/navbar_login.html" %}
-</ul>
+</ul>

frappe/templates/includes/navbar/navbar_login.html

@@ -22,6 +22,6 @@
 	</ul>
 </li>
 {% if not hide_login %}
-<li class="btn-login-area"><a href="/login">{{ _("Login") }}</a></li>
+<li class="btn-login-area text-uppercase"><a href="/login">{{ _("Login") }}</a></li>
 {% endif %}
 {% endif %}

frappe/templates/includes/search_box.html

@@ -15,11 +15,19 @@ frappe.ready(function() {
 	if(get_url_arg("search")){
 	var txt = get_url_arg("search");
 	$(".item-search-results").html("Search results for : " + txt);
+	$(".item-search").toggle(false);
 	$(".clear").toggle(true);
 	}
 	var thread = null;
 	function findResult(t) {
-		window.location.href=document.URL + "?search=" + t;
+		if (window.location.href.indexOf("?") > -1) 
+		{
+			window.location.href=document.URL + "&search=" + t;
+		}
+		else
+		{
+			window.location.href=document.URL + "?search=" + t;
+		}
 	}
 
 	$(".item-search-input").keyup(function() {

frappe/templates/includes/web_sidebar.html

@@ -7,14 +7,14 @@
 			<div class="col-xs-10">
 				<div class="web-sidebar-user">{{ fullname }}</div>
 				<a href="/?cmd=web_logout">
-					<div style="margin-top:0px;" class="text-muted small">
+					<div class="text-muted small">
 						{{ _("Logout") }}</div>
 				</a>
 			</div>
 		</div>
 	</div>
 	<div class="sidebar-items">
-		<ul class="list-unstyled" style="margin: 30px 0px;">
+		<ul class="list-unstyled">
 			<li class="sidebar-item">
 				<a href="/me">My Account</a>
 			</li>
@@ -40,7 +40,7 @@
 
 <script>
 frappe.ready(function() {
-	$('.sidebar a').each(function(index) {
+	$('.sidebar-item a').each(function(index) {
 	        if(this.href.trim() == window.location)
 	            $(this).addClass("active");
 	    });

frappe/templates/pages/list.py

@@ -133,7 +133,8 @@ def get_list(doctype, txt, filters, limit_start, limit_page_length=20, ignore_pe
 	if txt:
 		if meta.search_fields:
 			for f in meta.get_search_fields():
-				or_filters.append([doctype, f.strip(), "like", "%" + txt + "%"])
+				if f == 'name' or meta.get_field(f).fieldtype in ('Data', 'Text', 'Small Text', 'Text Editor'):
+					or_filters.append([doctype, f, "like", "%" + txt + "%"])
 		else:
 			if isinstance(filters, dict):
 				filters["name"] = ("like", "%" + txt + "%")

frappe/website/doctype/blog_post/blog_post.py

@@ -46,7 +46,6 @@ class BlogPost(WebsiteGenerator):
 		clear_cache("writers")
 
 	def get_context(self, context):
-		context.show_search = True
 		# this is for double precaution. usually it wont reach this code if not published
 		if not cint(self.published):
 			raise Exception, "This blog has not been published yet!"
@@ -144,7 +143,8 @@ def get_blog_list(doctype, txt=None, filters=None, limit_start=0, limit_page_len
 			t1.title, t1.name, t1.blog_category, t1.parent_website_route, t1.published_on,
 				concat(t1.parent_website_route, "/", t1.page_name) as page_name,
 				t1.published_on as creation,
-				ifnull(t1.blog_intro, t1.content) as content,
+				t1.content as content,
+				ifnull(t1.blog_intro, t1.content) as intro,
 				t2.full_name, t2.avatar, t1.blogger,
 				(select count(name) from `tabCommunication`
 					where
@@ -166,7 +166,7 @@ def get_blog_list(doctype, txt=None, filters=None, limit_start=0, limit_page_len
 
 	for post in posts:
 		post.published = global_date_format(post.creation)
-		post.content = strip_html_tags(post.content[:140])
+		post.content = strip_html_tags(post.content[:340])
 		if not post.comments:
 			post.comment_text = _('No comments yet')
 		elif post.comments==1: