Add WoT identicons as avatars.

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 875d6aa..22e411b 100644 (file)
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -138,6 +138,16 @@ textarea {
        border-bottom: none;
 }
 
+#sone .post > .avatar {
+       position: absolute;
+}
+
+#sone .post > .inner-part {
+       margin-left: 48px;
+       padding-left: 0.5em;
+       min-height: 48px;
+}
+
 #sone .post .author {
        display: inline;
        font-weight: bold;
@@ -149,7 +159,6 @@ textarea {
 }
 
 #sone .post .status-line {
-       clear: both;
        margin-top: 0.5ex;
        font-size: 85%;
 }
@@ -201,6 +210,16 @@ textarea {
        padding-top: 0.2ex;
 }
 
+#sone .post .reply > .avatar {
+       position: absolute;
+}
+
+#sone .post .reply > .inner-part {
+       margin-left: 36px;
+       padding-left: 0.5em;
+       min-height: 36px;
+}
+
 #sone .post .reply {
        clear: both;
        background-color: #f0f0ff;

diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js
index 695503c..66314e1 100644 (file)
--- a/src/main/resources/static/javascript/sone.js
+++ b/src/main/resources/static/javascript/sone.js
@@ -297,16 +297,16 @@ function getReplyId(element) {
 
 function likePost(postId) {
        $.getJSON("ajax/like.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
-               $("#sone .post#" + postId + " > .status-line .like").addClass("hidden");
-               $("#sone .post#" + postId + " > .status-line .unlike").removeClass("hidden");
+               $("#sone .post#" + postId + " > .inner-part > .status-line .like").addClass("hidden");
+               $("#sone .post#" + postId + " > .inner-part > .status-line .unlike").removeClass("hidden");
                updatePostLikes(postId);
        });
 }
 
 function unlikePost(postId) {
        $.getJSON("ajax/unlike.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
-               $("#sone .post#" + postId + " > .status-line .unlike").addClass("hidden");
-               $("#sone .post#" + postId + " > .status-line .like").removeClass("hidden");
+               $("#sone .post#" + postId + " > .inner-part > .status-line .unlike").addClass("hidden");
+               $("#sone .post#" + postId + " > .inner-part > .status-line .like").removeClass("hidden");
                updatePostLikes(postId);
        });
 }
@@ -314,9 +314,9 @@ function unlikePost(postId) {
 function updatePostLikes(postId) {
        $.getJSON("ajax/getLikes.ajax", { "type": "post", "post": postId }, function(data, textStatus) {
                if (data.success) {
-                       $("#sone .post#" + postId + " > .status-line .likes").toggleClass("hidden", data.likes == 0)
-                       $("#sone .post#" + postId + " > .status-line .likes span.like-count").text(data.likes);
-                       $("#sone .post#" + postId + " > .status-line .likes > span").attr("title", generateSoneList(data.sones));
+                       $("#sone .post#" + postId + " > .inner-part > .status-line .likes").toggleClass("hidden", data.likes == 0)
+                       $("#sone .post#" + postId + " > .inner-part > .status-line .likes span.like-count").text(data.likes);
+                       $("#sone .post#" + postId + " > .inner-part > .status-line .likes > span").attr("title", generateSoneList(data.sones));
                }
        });
 }

diff --git a/src/main/resources/templates/include/head.html b/src/main/resources/templates/include/head.html
index 5f0d567..19a5f38 100644 (file)
--- a/src/main/resources/templates/include/head.html
+++ b/src/main/resources/templates/include/head.html
@@ -34,7 +34,7 @@
                $(document).ready(function() {
                        $("#sone .post").each(function() {
                                postId = $(this).attr("id");
-                               enhanceDeletePostButton("#sone .post#" + postId + " > .status-line .delete button", postId);
+                               enhanceDeletePostButton("#sone .post#" + postId + " > .inner-part > .status-line .delete button", postId);
                                (function(postId) {
                                        $("#sone .post#" + postId + " .reply").each(function() {
                                                replyId = $(this).attr("id");
@@ -104,11 +104,11 @@
        <script language="javascript">
                /* convert all “like” buttons to javascript functions. */
                $(document).ready(function() {
-                       $("#sone .post > .status-line .like").submit(function() {
+                       $("#sone .post > .inner-part > .status-line .like").submit(function() {
                                likePost(getPostId(this));
                                return false;
                        });
-                       $("#sone .post > .status-line .unlike").submit(function() {
+                       $("#sone .post > .inner-part > .status-line .unlike").submit(function() {
                                unlikePost(getPostId(this));
                                return false;
                        });

diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html
index 3d4b409..c5df1f0 100644 (file)
--- a/src/main/resources/templates/include/viewPost.html
+++ b/src/main/resources/templates/include/viewPost.html
@@ -1,4 +1,8 @@
 <div id="<% post.id|html>" class="post<%if loop.last> last<%/if>">
+       <div class="avatar">
+               <img src="/WoT/GetIdenticon?identity=<% post.sone.id|html>&amp;width=48&height=48" width="48" height="48" alt="Avatar Image" />
+       </div>
+       <div class="inner-part">
        <div>
                <div class="author profile-link"><a href="viewSone.html?sone=<% post.sone.id|html>"><% post.sone.niceName|html></a></div>
                <div class="text"><% post.text|html></div>
@@ -34,6 +38,10 @@
        <div class="replies">
                <%foreach post.replies reply>
                        <div id="<% reply.id|html>" class="reply">
+                               <div class="avatar">
+                                       <img src="/WoT/GetIdenticon?identity=<% reply.sone.id|html>&amp;width=36&height=36" width="36" height="36" alt="Avatar Image" />
+                               </div>
+                               <div class="inner-part">
                                <div>
                                        <div class="author profile-link"><a href="viewSone.html?sone=<% reply.sone.id|html>"><% reply.sone.niceName|html></a></div>
                                        <div class="text"><% reply.text|html></div>
@@ -66,6 +74,7 @@
                                                </form>
                                        <%/if>
                                </div>
+                               </div>
                        </div>
                <%/foreach>
                <%ifnull ! currentSone>
@@ -80,4 +89,5 @@
                        </div>
                <%/if>
        </div>
+       </div>
 </div>