Merge pull request #1746 from KanchanChauhan/blog-ui-changes

Blog UI changes and Clean up

frappe/public/css/website.css

@@ -380,7 +380,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 300;
+  font-weight: 400;
 }
 .navbar-brand {
   max-width: none;
@@ -583,7 +583,7 @@ fieldset {
 }
 .web-list-item {
   padding: 15px 0px;
-  border-top: 1px solid #EBEFF2;
+  border-bottom: 1px solid #EBEFF2;
 }
 .web-list-item h1,
 .web-list-item h2,
@@ -599,26 +599,16 @@ fieldset {
   color: inherit !important;
   text-decoration: none;
 }
-.web-list-item:last-child {
-  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;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
-.blog-text p,
 .post-description p {
-  margin-bottom: 40px;
-}
-.blogger-name {
-  font-size: 24px;
+  margin-bottom: 8px;
 }
 .blog-footer {
   padding: 5px 15px;
@@ -634,20 +624,18 @@ fieldset {
 .blog-category {
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-size: 10px;
   text-align: center;
   margin-bottom: 30px;
 }
 .author {
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  font-size: 10px;
   border-bottom: 1px solid #EBEFF2;
-  padding-bottom: 20px;
+  padding-bottom: 30px;
 }
 .blogger {
-  padding-top: 30px;
-  padding-bottom: 15px;
+  padding-top: 0px;
+  padding-bottom: 50px;
 }
 .blog-dot:before {
   padding-right: 8px;
@@ -655,56 +643,15 @@ fieldset {
   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;
+  margin-top: 30px;
+  margin-bottom: 30px;
 }
-.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 .blog-header {
+  font-size: 1.6em;
 }
-.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-header {
+  font-weight: 700;
+  font-size: 2em;
 }
 .blog-comments,
 .help-article-comments {
@@ -963,11 +910,14 @@ body {
   font-size: 12px;
 }
 .sidebar-block,
-.content-block {
+.page-content {
   padding-top: 50px;
   padding-bottom: 50px;
 }
-.content-block {
+.your-account-info {
+  margin-top: 50px;
+}
+.page-content {
   padding-left: 50px;
   padding-right: 50px;
 }
@@ -994,12 +944,14 @@ li .social-child-item {
   padding-top: 50px;
   padding-bottom: 50px;
   font-size: 18px;
+  line-height: 1.5;
 }
 .blog-text p {
   margin-bottom: 30px;
 }
 .blogger-name {
-  font-size: 24px;
+  margin-bottom: 0px;
+  margin-top: 0px;
 }
 .comment-header {
   font-size: 20px;
@@ -1046,3 +998,12 @@ li .social-child-item {
 .dropdown .logged-in {
   border-left: 1px solid #d1d8dd;
 }
+.cart-count-badge {
+  padding: 2px 4px;
+  margin-left: 10px;
+  background-color: #EBEFF2;
+  border-radius: 10px;
+  font-weight: 500;
+  margin-top: -10px;
+  margin-right: -8px;
+}

frappe/public/less/website.less

@@ -19,7 +19,7 @@ a& {
 }
 
 h1, h2, h3, h4, h5, h6 {
-	font-weight: 300;
+	font-weight: 400;
 }
 
 
@@ -201,7 +201,6 @@ fieldset {
 }
 
 .page-content {
-
 	hr {
 		margin-left: -15px;
 		margin-right: -15px;
@@ -271,7 +270,7 @@ fieldset {
 
 .web-list-item {
 	padding: 15px 0px;
-	border-top: 1px solid @light-border-color;
+	border-bottom: 1px solid @light-border-color;
 
 	h1, h2, h3 {
 		margin-top: 10px;
@@ -289,28 +288,19 @@ fieldset {
 // 	background: @panel-bg;
 // }
 
-.web-list-item:last-child {
-	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;
+.post-description {
+	padding-top: 8px;
+	padding-bottom: 8px;
 	p {
-		margin-bottom: 40px;
+		margin-bottom: 8px;
 	}
 }
 
-.blogger-name {
-	font-size:24px;
-}
 
 .blog-footer {
 	padding: 5px 15px;
@@ -329,7 +319,6 @@ fieldset {
 .blog-category {
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
-	font-size: 10px;
 	text-align: center;
 	margin-bottom: 30px;
 }
@@ -337,14 +326,13 @@ fieldset {
 .author {
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
-	font-size: 10px;
 	border-bottom: 1px solid @light-border-color;
-	padding-bottom:20px;
+	padding-bottom:30px;
 }
 
 .blogger {
-	padding-top: 30px;
-	padding-bottom: 15px;
+	padding-top: 0px;
+	padding-bottom: 50px;
 }
 
 .blog-dot:before{
@@ -354,61 +342,17 @@ fieldset {
 }
 
 .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;
+	margin-top:30px;
+	margin-bottom:30px;
+	
+	.blog-header {
+		font-size: 1.6em;
 	}
-	.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-header {
+	font-weight: 700;
+	font-size: 2em;
 }
 
 .blog-comments,
@@ -418,7 +362,6 @@ fieldset {
 .blog-comments {
 	background-color: #fafbfc;
 	position: relative;
-
 }
 
 .blog-comments:before {
@@ -567,12 +510,14 @@ a.active {
 	font-size: 12px;
 }
 
-.sidebar-block, .content-block {
+.sidebar-block, .page-content {
 	padding-top: 50px;
 	padding-bottom: 50px;
 }
-
-.content-block {
+.your-account-info {
+	margin-top: 50px;
+}
+.page-content {
 	padding-left: 50px;
 	padding-right: 50px;
 }
@@ -603,13 +548,15 @@ li .social-child-item {
 	padding-top: 50px;
 	padding-bottom: 50px;
 	font-size: 18px;
+	line-height: 1.5;
 	p {
 		margin-bottom: 30px;
 	}
 }
 
-.blogger-name{
-	font-size:24px;
+.blogger-name {
+	margin-bottom:0px;
+	margin-top:0px;
 }
 
 .comment-header{
@@ -656,3 +603,13 @@ li .social-child-item {
 .dropdown .logged-in {
 	border-left: 1px solid @border-color;
 }
+
+.cart-count-badge {
+	padding: 2px 4px;
+	margin-left: 10px;
+    background-color: @light-border-color;
+    border-radius:10px;
+	font-weight: 500;
+	margin-top: -10px;
+	margin-right: -8px;
+}

frappe/templates/generators/blog_post.html

@@ -1,23 +1,18 @@
 {% extends "templates/web.html" %}
 
-{% 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/BlogPosting">
+	<meta  itemprop="datePublished" content="{{ frappe.format_date(published_on) }}"></meta>
 	<meta  itemprop="publisher" content="{{brand_html}}"></meta>
 	<!-- begin blog content -->
 	<div class="blog-info">
-	<div class="text-muted blog-category">{{blog_category}}</div>
-	<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 <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>
+	<h1 itemprop="headline" class="blog-header">{{ title }}</h1>
+	<p class="post-by text-muted small">
+		<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> <a href="/{{ parent_website_route }}" class="no-decoration">{{ blog_category }}</a> 
+		<i class="blog-dot"></i> {{ comment_text }}
+	</p>
 	</div>
 	<div itemprop="articleBody" class="longform blog-text">
 	{{ content }}
@@ -25,20 +20,18 @@
 	<!-- end blog content -->
 </article>
 {% if blogger_info %}
-<div class="author text-muted">Author</div>
 {% include "templates/includes/blog/blogger.html" %}
 {% endif %}
 <div class="blog-comments">
 	{% include 'templates/includes/comments/comments.html' %}
 </div>
-
 <script>
     frappe.ready(function() { frappe.set_search_path("/blog"); })
 </script>
 {% endblock %}
 {% block style %}
 <style>
-.content-block {
+.page-content {
 	padding-bottom: 0px;
 }
 </style>

frappe/templates/includes/blog/blog_row.html

@@ -2,18 +2,15 @@
 <div class="web-list-item blog-list-item">
 	<div class="row">
 		<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>
+			<h1 class="blog-header"><a href="/{{ post.page_name }}">{{ post.title }}</a></h1>
 			<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>
+			<p class="post-by text-muted small">
+				<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>
 		</div>
 	</div>
-</div>
-
+</div>

frappe/templates/includes/blog/blogger.html

@@ -5,9 +5,7 @@
 		</div>
 	</div>
 	<div class="inline-block" style="width: calc(100% - 100px)">
-		<div class="blogger-name">{{ blogger_info.full_name }}</div>
+		<h2 class="blogger-name"><a href="/blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">{{ blogger_info.full_name }}</a></h2>
 		<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>
 </div>

frappe/templates/includes/comments/comments.html

@@ -20,7 +20,8 @@
 	</div>
 
 	<div class="comment-form-wrapper">
-		<div id="comment-form">
+		<a class="add-comment btn btn-default btn-sm">{{ _("Add Comment") }}</a>		 
+			<div style="display: none;" id="comment-form">
 			<p>{{ _("Leave a Comment") }}</p>
 			<div class="alert" style="display:none;"></div>
 			<form>
@@ -37,8 +38,8 @@
 					</div>
 					<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>
+                        <button class="btn btn-primary btn-sm" id="submit-comment" style="margin-top:10px">
+                            {{ _("Submit") }}</button>
 				</fieldset>
 			</form>
 		</div>
@@ -61,7 +62,9 @@
 			$(".add-comment").toggle(false)
 				.parent().append("<div class='text-muted'>Comments are closed.</div>")
 		}
-
+		$(".add-comment").click(function() {		
+			$(this).toggle(false);		
+		 	$("#comment-form").toggle();
             var full_name = "", user_id = "";
             if(frappe.is_user_logged_in()) {
                 full_name = getCookie("full_name");
@@ -72,6 +75,7 @@
                 }
             }
 			$("#comment-form textarea").val("");
+			})
 
 		$("#submit-comment").click(function() {
 			var args = {

frappe/templates/includes/login/login.css

@@ -116,9 +116,4 @@ p{
     letter-spacing: 0.5px;
     font-weight: 400;	
 	font-size: 14px;
-}
-
-.content-block {
-	padding-top:10px;
-	padding-bottom:30px;
 }

frappe/templates/includes/web_sidebar.html

@@ -24,11 +24,6 @@
 				<a href="{{ item.route }}" class="text-muted {{ 'active' if pathname==item.route else '' }}"
 				{% if item.target %}target="{{ item.target }}"{% endif %}>
 				{{ _(item.title) }}
-				{% if item.reference_doctype %}
-					<span class="badge">
-						{{ "20+" if item.count > 20 else item.count }}
-					</span>
-				{% endif %}
 				</a>
 			</li>
 		{% endif %}

frappe/templates/pages/me.html

@@ -10,12 +10,10 @@
 {% block page_content %}
 
 <!-- no-cache -->
-<div class="row">
-	<div class="col-sm-3">
-		<div class="your-account-info">
+<div class="row your-account-info">
+	<div class="col-sm-4">
 			<span class="user-image-myaccount"></span>			
-			<div>
-				
+			<div>				
 				<ul class="list-unstyled">
 					<li><a href="/update-password">
 						<h6 class="text-muted">{{ _("Reset Password") }}</h6>
@@ -27,15 +25,13 @@
 				</ul>
 			</div>
 		</div>
-	</div>
-	<div class="col-sm-4">
+	<div class="col-sm-8 pull-left">
 	    <p> 
 			<span class="label">User Name</span>
 	        <span class="value"> {{ fullname }}</span>
 		</p>
 		
 	</div>
-	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>
 {% endblock %}
 

frappe/templates/web.html

@@ -4,14 +4,13 @@
 {% block content %}
 <div class="page-container" id="page-{{ name or page_name }}" data-path="{{ pathname }}"
 	{% if page_or_generator=="Generator" %}data-doctype="{{ doctype }}"{% endif %}>
-		<div class="page-content {% if not show_sidebar %}page-max-width{% endif %}">
 			<div class="row {% if show_sidebar %}vert-line{% endif %}">
 				{% if show_sidebar %}
 					<div class="col-sm-3 sidebar-block">
 						{% include "templates/includes/web_sidebar.html" %}
 					</div>
 				{% endif %}
-				<div class="{% if show_sidebar %}content-block col-sm-9{% else %} content-block col-sm-12 {% endif %}">
+				<div class="{% if show_sidebar %}page-content col-sm-9{% else %} page-content col-sm-12 {% endif %}">
 					<div class="page-content-wrapper">
 						<div class="row page-head">
 							<div class="col-sm-8">
@@ -44,6 +43,5 @@
 					</div>
 				</div>
 			</div>
-		</div>
 </div>
 {% endblock %}

frappe/website/doctype/blog_post/blog_post.py

@@ -84,7 +84,6 @@ class BlogPost(WebsiteGenerator):
 
 def get_list_context(context=None):
 	list_context = frappe._dict(
-		page_title = _("Blog"),
 		template = "templates/includes/blog/blog.html",
 		row_template = "templates/includes/blog/blog_row.html",
 		get_list = get_blog_list,