comments html/css refactoring

AlexP11223 · AlexP11223 · commit 5f888161c3b3 · 2015-05-07T23:17:42.000+03:00
diff --git a/src/main/webapp/WEB-INF/templates/fragments/comments.html b/src/main/webapp/WEB-INF/templates/fragments/comments.html
@@ -9,10 +9,17 @@
 <body>
     <th:block th:fragment="commentList">
         <div class="comment" th:attr="data-commentId=${comment.id}" th:each="comment : ${comments}">
-            <a th:unless="${comment.deleted}" class="comment-title" th:href="@{|/users/${comment.user.username}|}" th:text="${comment.user.username}"></a>
-            <span th:if="${comment.deleted}" class="deleted">[deleted]</span>
+            <div class="comment-header">
+                <th:block th:unless="${comment.deleted}">
+                    <a class="avatar" th:href="@{|/users/${comment.user.username}|}">
+                        <img class="img-rounded" src="http://i.imgur.com/ecaVXWH.jpg"/>
+                    </a>
+                    <a class="comment-username" th:href="@{|/users/${comment.user.username}|}" th:text="${comment.user.username}"></a>
+                </th:block>
+                <span th:if="${comment.deleted}" class="deleted">[deleted]</span>
 
-            <span class="post-date" th:text="${#temporals.format(comment.dateTime, 'MMM dd, yyyy HH:mm')}"></span>
+                <span class="post-date" th:text="${#temporals.format(comment.dateTime, 'MMM dd, yyyy HH:mm')}"></span>
+            </div>
 
             <div>
                 <div class="comment-content" th:classappend="${comment.deleted} ? 'deleted'" th:utext="${comment.deleted} ? '[deleted]' : ${comment.getCommentTextHtml()}"></div>
diff --git a/src/main/webapp/WEB-INF/templates/profile.html b/src/main/webapp/WEB-INF/templates/profile.html
@@ -19,7 +19,7 @@
         <div class="col-sm-3 no-padding-col profile-info">
             <h3 th:text="${user.username}"></h3>
 
-            <div class="avatar">
+            <div class="avatar-big">
                 <img class="img-responsive img-rounded" src="http://i.imgur.com/ecaVXWH.jpg"/>
             </div>
 
diff --git a/src/main/webapp/css/blog.css b/src/main/webapp/css/blog.css
@@ -130,10 +130,28 @@ label.error {
 .comments {
 }
 
-.comment-title {
+.avatar {
+    margin-right: 10px;
+}
+
+.avatar img {
+    width: 28px;
+    height: 28px;
+}
+
+.comment-username {
     font-weight: bold;
     color: #369;
     margin-right: 10px;
+    vertical-align: middle;
+}
+
+.comment-header .post-date {
+    vertical-align: middle;
+}
+
+.comment-header {
+    margin-bottom: 10px;
 }
 
 .comment {
@@ -169,7 +187,7 @@ label.error {
     font-weight: bold;
 }
 
-.avatar {
+.avatar-big {
     margin-top: 15px;
     margin-bottom: 15px;
 }
