Merge pull request xsawyerx#18 from danfumarel/master

individual post page 100% BLOGSPERL-95
andrewalker · Jan 6, 2016 · c9f846d · c9f846d
2 parents c7f6e58 + eba11bd
commit c9f846d
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 19 deletions.
diff --git 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
@@ -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 %]
diff --git 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
@@ -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 %]