Part 41.5 - Styling our comments

Author: jacurtis

public/css/styles.css

@@ -4,4 +4,46 @@
 
 .form-spacing-top {
 	margin-top: 30px;
-}
+}
+
+.comment {
+	margin-bottom: 45px;
+}
+
+.author-image {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	float: left;
+}
+
+.author-name {
+	float: left;
+	margin-left: 15px; 
+}
+
+.author-name>h4 {
+	margin: 5px 0px;
+	
+}
+
+.author-time {
+	font-size: 11px;
+	font-style: italic;
+	color: #aaa;
+}
+
+.comment-content {
+	clear: both;
+	margin-left: 65px;
+	font-size: 16px;
+	line-height: 1.3em;
+}
+
+.comments-title {
+	margin-bottom:45px;
+}
+
+.comments-title>span {
+	margin-right: 15px;
+}

resources/views/blog/single.blade.php

@@ -15,10 +15,23 @@
 
 	<div class="row">
 		<div class="col-md-8 col-md-offset-2">
+			<h3 class="comments-title"><span class="glyphicon glyphicon-comment"></span>  {{ $post->comments()->count() }} Comments</h3>
 			@foreach($post->comments as $comment)
 				<div class="comment">
-					<p><strong>Name:</strong> {{ $comment->name }}</p>
-					<p><strong>Comment:</strong><br/>{{ $comment->comment }}</p><br>
+					<div class="author-info">
+
+						<img src="{{ "https://www.gravatar.com/avatar/" . md5(strtolower(trim($comment->email))) . "?s=50&d=monsterid" }}" class="author-image">
+						<div class="author-name">
+							<h4>{{ $comment->name }}</h4>
+							<p class="author-time">{{ date('F nS, Y - g:iA' ,strtotime($comment->created_at)) }}</p>
+						</div>
+						
+					</div>
+
+					<div class="comment-content">
+						{{ $comment->comment }}
+					</div>
+					
 				</div>
 			@endforeach
 		</div>