From bc3b03051604b56f2bd9937750762f8a88ae6ead Mon Sep 17 00:00:00 2001
From: Dan Fumarel <dan.fumarel@evozon.com>
Date: Wed, 6 Jan 2016 15:25:35 +0200
Subject: [PATCH] individual post page done 100%(ui)

---
 public/blog/css/style.css | 111 ++++++++++++++++++++++++++++++++++++--
 views/comment_form.tt     |   2 +-
 views/list_comments.tt    |  24 ++++-----
 views/post.tt             |   8 +++
 4 files changed, 126 insertions(+), 19 deletions(-)

diff --git a/public/blog/css/style.css b/public/blog/css/style.css
index a784065e..6f739b97 100644
--- a/public/blog/css/style.css
+++ b/public/blog/css/style.css
@@ -3661,6 +3661,17 @@ background-size: cover;
 
 /*individual posts page fumy */
 
+.individual-post .meta .bubble img {
+   border-radius: 50%;
+   height: 70px;
+   width: 70px;
+   z-index: 2;
+   position: absolute;
+   left: -120px;
+   background: #ffffff;
+}
+
+
 .individual-post .info-entry .user {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: 18px;
@@ -3691,16 +3702,13 @@ background-size: cover;
    color: #ffffff;
 }
 
-.individual-post .meta .bubble img {
-   background: #ffffff;
-}
-
 .blog-post {
    background-color: #07001b;
 }
 
 .blog-comment {
    background-color: #dadada;
+   padding-bottom: 60px;
 }
 
 .individual-post-tags {
@@ -3748,6 +3756,101 @@ background-size: cover;
    margin-bottom: 25px;
 }
 
+.blog-comment .title h5 {
+   color: #333333;
+   font-size: 18px;
+   text-transform: uppercase;
+   font-weight: bold;
+   margin: 30px 0 0;
+   padding-bottom: 25px;
+   border-bottom: 2px solid #c9c9c9;
+}
+
+.blog-comment .title i {
+   padding-left: 10px;
+}
+
+.blog-comment .sign-to-leave-comment {
+   margin-top: 30px;
+   font-family: 'Montserrat', 'Open Sans', sans-serif;
+   font-size: 18px;
+   color: #999999;
+}
+
+.comments .comment-list .bubble img {
+   border-radius: 50%;
+   height: 70px;
+   width: 70px;
+   z-index: 2;
+   position: absolute;
+   top:28px;
+   left: -120px;
+   background: #ffffff;
+}
+
+.comments .comment-list {
+   font-family: 'Montserrat', 'Open Sans', sans-serif;
+   font-size: 18px;
+}
+
+.comments .comment-list .comment-author {
+   margin-top: 40px;
+}
+
+.comments .comment-list .comment-author b {
+   color: #333333;
+}
+
+.comment .cmeta {
+   font-size: 18px;
+   color: #a5a5a5;
+}
+
+.comments .comment p {
+   margin-top: 15px;
+   font-size: 18px;
+}
+
+.comments .comment {
+   margin: 0;
+}
+
+.comments .comment .cmeta {
+   font-style: normal;
+}
+
+@media all and (max-width: 660px) {
+   .comments .comment-list .bubble img,
+   .individual-post .meta .bubble img {
+      left: -80px;
+      width: 50px;
+      height: 50px;
+   }
+}
+
+@media all and (max-width: 480px) {
+   .comments .comment-list .bubble img {
+      display: none;
+   }
+}
+
+@media all and (max-width: 429px) {
+   .individual-post .pager-post li {
+      font-size: 14px;
+   }
+}
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/views/comment_form.tt b/views/comment_form.tt
index 4b1aa52e..a0e26c48 100644
--- a/views/comment_form.tt
+++ b/views/comment_form.tt
@@ -10,7 +10,7 @@
 		    </form>
 	</div>
 [% ELSE %]
-    <div>
+    <div class="sign-to-leave-comment">
     	<p>Please <a href="/sign-up">sign in</a> to leave a comment</p>
     </div>
 [% END %]
\ No newline at end of file
diff --git a/views/list_comments.tt b/views/list_comments.tt
index a5e6f0fa..27c4634c 100644
--- a/views/list_comments.tt
+++ b/views/list_comments.tt
@@ -1,18 +1,14 @@
 <div class="comments" id="comments">
-    <div class="title">
-        <h5>[% nr_of_comments %] [% IF (nr_of_comments == 1) %] Comment [% ELSE %] Comments [% END %]
-            <a target="_blank" href="/feed/post/[% post.slug %]">
-                <i class="icon-rss"></i>
-            </a>
-        </h5>
-    </div>
+
     <ul class="comment-list">
         [% FOREACH comment in comments %]
             <li class="comment" id="comment_[% comment.id %]">
-                <a class="pull-left" href="#">
-                    <img class="avatar" src="[% comment.avatar %]" class="img-responsive" />
-                </a>
-                
+                <div class="col-xs-2">
+                </div>
+                <div class="col-xs-10 content-comment">
+                    <div class="bubble">
+                        <img class="user-image" src="[% IF post.user.avatar_path %][% post.user.avatar_path %][% ELSE %]/blog/img/male-user.png[% END %]">
+                    </div>
                 [% IF comment.fullname %]
                     <div class="comment-author">
                         <b>[% comment.fullname %]</b>
@@ -24,7 +20,7 @@
                 [% END %]
                 
                 <div class="cmeta">
-                    Commented on [% comment.comment_date %]
+                    [% comment.comment_date %]
                 </div>
                 <p>
                     [% comment.content %]
@@ -45,7 +41,7 @@
                             <a class="pull-left" href="#">
                                 <img class="avatar" src="[% reply.avatar %]" class="img-responsive" />
                             </a>
-                            
+
                             [% IF reply.fullname %]
                                 <div class="comment-author">
                                     <b>[% reply.fullname %]</b>
@@ -67,7 +63,7 @@
                         </li>
                     [% END %]
                 </ul>
-                
+                </div>
             </li>
         [% END %]
     </ul>
diff --git a/views/post.tt b/views/post.tt
index b576379b..d31e6d74 100644
--- a/views/post.tt
+++ b/views/post.tt
@@ -90,6 +90,14 @@
 <div class="blog-comment">
     <div class="container">
         <div class="row">
+              <div class="title">
+                  <h5>[% IF (nr_of_comments == 1) %] Comment [% ELSE %] Comments [% END %] ([% nr_of_comments %])
+                      <a target="_blank" href="/feed/post/[% post.slug %]">
+                          <i class="icon-rss"></i>
+                      </a>
+                  </h5>
+              </div>
+
                     <!-- Comment posting -->
                     [% INCLUDE comment_form.tt %]