[frio] Thread display redesign

- Add fake form at end of comment list
- Shuffle comment box buttons around using flex display
- Convert divs into paragraphs
- Remove unused commentInsert() and qCommentInsert() function from textedit.js

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index f213123fb6c89c0d869da950fec69098d3a93656..1caaba9b9ddcf95d4146f58f6e629f8628f71de0 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1669,7 +1669,13 @@ aside .panel-body {
 
 /* wall items */
 .wall-item-container {
-    position: relative;
+    background-color: rgba(0, 0, 0, 0.03);
+    padding: 0.5em;
+    border-top: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.wall-item-container .media {
+    margin-top: 0;
 }
 
 /* wall items contact photo */
@@ -1914,12 +1920,13 @@ code > .hl-main {
 
 /* item social action buttons */
 .wall-item-actions {
-    margin-top: 15px;
+    display: flex;
+    margin: .5em 0;
+    justify-content: space-between;
 }
-.wall-item-actions, .wall-item-actions a, .wall-item-actions button {
+.wall-item-actions a, .wall-item-actions button {
     font-size: 13px;
     color: #555;
-    margin-bottom: 0;
 }
 .wall-item-actions .active {
     font-weight: bold;
@@ -2013,9 +2020,10 @@ code > .hl-main {
     position: relative!important;
     margin-top: 0;
 }
-.hide-comments-outer-wrapper {
-/*    text-align: center;
-    margin-top: -18px;*/
+.hide-comments-outer {
+    background-color: rgba(0, 0, 0, 0.03);
+    padding: 0.5em;
+    border-radius: 0.5em 0.5em 0 0;
 }
 .hide-comments-total {
     cursor: pointer;
@@ -2024,21 +2032,31 @@ code > .hl-main {
 /*
 * Comment Box
 */
-.thread_level_2 .wall-item-comment-wrapper {
-    padding-right: 5px;
+
+.comment-fake-form,
+.wall-item-comment-wrapper {
+    padding: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.8);
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: 0 0 10px 10px;
 }
-.comment-edit-submit-wrapper {
-    margin-bottom: 25px;
+
+.comment-fake-form {
+    border-color: #d9d9d9;
 }
-.comment-edit-submit-wrapper a,
-.comment-edit-submit-wrapper a:hover {
-    padding-top: 5px !important;
-    padding-bottom: 5px !important;
+
+.comment-container .wall-item-comment-wrapper {
+    margin-top: 0.5em;
 }
-.comment-icon-list > li > .icon,
-.comment-icon-list > li > .icon:hover {
-    color: #555;
-    background-color: transparent;
+
+.comment-edit-submit-wrapper {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.comment-icon-list {
+    display: flex;
+    justify-content: space-between;
 }
 
 /* acpopup  + textcompletion*/

diff --git a/view/theme/frio/js/textedit.js b/view/theme/frio/js/textedit.js
index e0c06af581f134ce8a7e9750beab82d0c0488336..93d7fe8cee5c0a3e81eb10246e7513ab0aea2d64 100644 (file)
--- a/view/theme/frio/js/textedit.js
+++ b/view/theme/frio/js/textedit.js
@@ -82,7 +82,8 @@ function insertFormatting(BBcode, id) {
        if (tmpStr == '') {
                $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
                $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-               openMenu("comment-edit-submit-wrapper-" + id);
+               closeMenu("comment-fake-form-" + id);
+               openMenu("item-comments-" + id);
        }
 
        textarea = document.getElementById("comment-edit-text-" + id);
@@ -134,115 +135,99 @@ function cmtBbClose(id) {
        $("#comment-edit-bb-" + id).hide();
 }
 
-function commentExpand(id) {
-       $("#comment-edit-text-" + id).putCursorAtEnd();
-       $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
-       $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-       $("#comment-edit-text-" + id).focus();
+function commentExpand(id)
+{
        $("#mod-cmnt-wrap-" + id).show();
-       openMenu("comment-edit-submit-wrapper-" + id);
+       closeMenu("comment-fake-form-" + id);
+       openMenu("item-comments-" + id);
+       $("#comment-edit-text-" + id)
+               .putCursorAtEnd()
+               .addClass("comment-edit-text-full")
+               .removeClass("comment-edit-text-empty");
+
        return true;
 }
 
-function commentClose(obj, id) {
-       if (obj.value == '') {
-               $("#comment-edit-text-" + id).removeClass("comment-edit-text-full");
-               $("#comment-edit-text-" + id).addClass("comment-edit-text-empty");
+function commentClose(obj, id)
+{
+       if (obj.value === '' || obj.value === obj.dataset.default) {
+               $("#comment-edit-text-" + id)
+                       .removeClass("comment-edit-text-full")
+                       .addClass("comment-edit-text-empty");
                $("#mod-cmnt-wrap-" + id).hide();
-               closeMenu("comment-edit-submit-wrapper-" + id);
+               openMenu("comment-fake-form-" + id);
+               closeMenu("item-comments-" + id);
                return true;
        }
        return false;
 }
 
 function showHideCommentBox(id) {
-       if ($('#comment-edit-form-' + id).is(':visible')) {
-               $('#comment-edit-form-' + id).hide();
+       var $el = $('#comment-edit-form-' + id);
+       if ($el.is(':visible')) {
+               $el.hide();
        } else {
-               $('#comment-edit-form-' + id).show();
+               $el.show();
        }
 }
 
 function commentOpenUI(obj, id) {
-       $("#comment-edit-text-" + id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty");
-       // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
-       // The submit button gets tabindex + 1
-       $("#comment-edit-text-" + id).attr('tabindex', '9');
-       $("#comment-edit-submit-" + id).attr('tabindex', '10');
-       $("#comment-edit-submit-wrapper-" + id).show();
+       closeMenu("comment-fake-form-" + id);
+       openMenu("item-comments-" + id);
+       $("#comment-edit-text-" + id)
+               .putCursorAtEnd()
+               .addClass("comment-edit-text-full").removeClass("comment-edit-text-empty")
+               .attr('tabindex', '9');         // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them)
+       $("#comment-edit-submit-" + id).attr('tabindex', '10'); // The submit button gets tabindex + 1
        // initialize autosize for this comment
        autosize($("#comment-edit-text-" + id + ".text-autosize"));
 }
 
 function commentCloseUI(obj, id) {
-       if (obj.value === '') {
-               $("#comment-edit-text-" + id).removeClass("comment-edit-text-full").addClass("comment-edit-text-empty");
-               $("#comment-edit-text-" + id).removeAttr('tabindex');
+       if (obj.value === '' || obj.value === obj.dataset.default) {
+               $("#comment-edit-text-" + id)
+                       .removeClass("comment-edit-text-full").addClass("comment-edit-text-empty")
+                       .removeAttr('tabindex');
                $("#comment-edit-submit-" + id).removeAttr('tabindex');
-               $("#comment-edit-submit-wrapper-" + id).hide();
+               openMenu("comment-fake-form-" + id);
+               closeMenu("item-comments-" + id);
                // destroy the automatic textarea resizing
                autosize.destroy($("#comment-edit-text-" + id + ".text-autosize"));
        }
 }
 
 function jotTextOpenUI(obj) {
-       if (obj.value == '') {
-               $(".modal-body #profile-jot-text").addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
+       if (obj.value === '' || obj.value === obj.dataset.default) {
+               var $el = $(".modal-body #profile-jot-text");
+               $el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty");
                // initiale autosize for the jot
-               autosize($(".modal-body #profile-jot-text"));
+               autosize($el);
        }
 }
 
 function jotTextCloseUI(obj) {
-       if (obj.value === '') {
-               $(".modal-body #profile-jot-text").removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
+       if (obj.value === '' || obj.value === obj.dataset.default) {
+               var $el = $(".modal-body #profile-jot-text");
+               $el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty");
                // destroy the automatic textarea resizing
-               autosize.destroy($(".modal-body #profile-jot-text"));
+               autosize.destroy($el);
        }
 }
 
 function commentOpen(obj, id) {
-       if (obj.value == '') {
-               $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
-               $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
+       if (obj.value === '' || obj.value === obj.dataset.default) {
+               $("#comment-edit-text-" + id)
+                       .putCursorAtEnd()
+                       .addClass("comment-edit-text-full")
+                       .removeClass("comment-edit-text-empty");
                $("#mod-cmnt-wrap-" + id).show();
-               openMenu("comment-edit-submit-wrapper-" + id);
+               closeMenu("comment-fake-form-" + id);
+               openMenu("item-comments-" + id);
                return true;
        }
        return false;
 }
 
-function commentInsert(obj, id) {
-       var tmpStr = $("#comment-edit-text-" + id).val();
-       if (tmpStr == '') {
-               $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
-               $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-               openMenu("comment-edit-submit-wrapper-" + id);
-       }
-       var ins = $(obj).html();
-       ins = ins.replace('&lt;', '<');
-       ins = ins.replace('&gt;', '>');
-       ins = ins.replace('&amp;', '&');
-       ins = ins.replace('&quot;', '"');
-       $("#comment-edit-text-" + id).val(tmpStr + ins);
-}
-
-function qCommentInsert(obj, id) {
-       var tmpStr = $("#comment-edit-text-" + id).val();
-       if (tmpStr == '') {
-               $("#comment-edit-text-" + id).addClass("comment-edit-text-full");
-               $("#comment-edit-text-" + id).removeClass("comment-edit-text-empty");
-               openMenu("comment-edit-submit-wrapper-" + id);
-       }
-       var ins = $(obj).val();
-       ins = ins.replace('&lt;', '<');
-       ins = ins.replace('&gt;', '>');
-       ins = ins.replace('&amp;', '&');
-       ins = ins.replace('&quot;', '"');
-       $("#comment-edit-text-" + id).val(tmpStr + ins);
-       $(obj).val('');
-}
-
 function confirmDelete() {
        return confirm(aStr.delitem);
 }

diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl
index 4edc8f473e5059a04df30de8f3c4d31794d20120..903eb13468dfa5c2ce12eb1c3d459f1134d82936 100644 (file)
--- a/view/theme/frio/templates/comment_item.tpl
+++ b/view/theme/frio/templates/comment_item.tpl
@@ -1,10 +1,10 @@
 
 {{if $threaded}}
-<div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}" style="display: block;">
+<div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}">
 {{else}}
-<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}" style="display: block;">
+<div class="comment-wwedit-wrapper" id="comment-edit-wrapper-{{$id}}">
 {{/if}}
-       <form class="comment-edit-form" style="display: block;" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;">
+       <form class="comment-edit-form" data-item-id="{{$id}}" id="comment-edit-form-{{$id}}" action="item" method="post" onsubmit="post_comment({{$id}}); return false;">
                <input type="hidden" name="type" value="{{$type}}" />
                <input type="hidden" name="profile_uid" value="{{$profile_uid}}" />
                <input type="hidden" name="parent" value="{{$parent}}" />
@@ -13,64 +13,56 @@
                <input type="hidden" name="preview" id="comment-preview-inp-{{$id}}" value="0" />
                <input type="hidden" name="post_id_random" value="{{$rand_num}}" />
 
-               <div class="bb form-group">
-                       <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" onFocus="commentOpenUI(this,{{$id}});">{{$default}}</textarea>
-               </div>
-               {{if $qcomment}}
+               <p class="comment-edit-bb-{{$id}} comment-icon-list">
+                       <span>
+                               <button type="button" class="btn btn-sm icon bb-img" style="cursor: pointer;" aria-label="{{$edimg}}" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
+                                       <i class="fa fa-picture-o"></i>
+                               </button>
+                               <button type="button" class="btn btn-sm icon bb-attach" style="cursor: pointer;" aria-label="{{$edattach}}" title="{{$edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$prompttext}}');">
+                                       <i class="fa fa-paperclip"></i>
+                               </button>
+                       </span>
+                       <span>
+                               <button type="button" class="btn btn-sm icon bb-url" style="cursor: pointer;" aria-label="{{$edurl}}" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
+                                       <i class="fa fa-link"></i>
+                               </button>
+                               <button type="button" class="btn btn-sm icon underline" style="cursor: pointer;" aria-label="{{$eduline}}" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
+                                       <i class="fa fa-underline"></i>
+                               </button>
+                               <button type="button" class="btn btn-sm icon italic" style="cursor: pointer;" aria-label="{{$editalic}}" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
+                                       <i class="fa fa-italic"></i>
+                               </button>
+                               <button type="button" class="btn btn-sm icon bold" style="cursor: pointer;" aria-label="{{$edbold}}" title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
+                                       <i class="fa fa-bold"></i>
+                               </button>
+                               <button type="button" class="btn btn-sm icon quote" style="cursor: pointer;" aria-label="{{$edquote}}" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
+                                       <i class="fa fa-quote-left"></i>
+                               </button>
+                       </span>
+               </p>
+               <p>
+                       <textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}">{{$default}}</textarea>
+               </p>
+{{if $qcomment}}
+               <p>
                        <select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
-                       <option value=""></option>
-               {{foreach $qcomment as $qc}}
-                       <option value="{{$qc}}">{{$qc}}</option>
-               {{/foreach}}
+                               <option value=""></option>
+       {{foreach $qcomment as $qc}}
+                               <option value="{{$qc}}">{{$qc}}</option>
+       {{/foreach}}
                        </select>
-               {{/if}}
+               </p>
+{{/if}}
 
-               <div class="comment-edit-text-end clear"></div>
-               <div class="comment-edit-submit-wrapper" id="comment-edit-submit-wrapper-{{$id}}" style="display: none;">
+               <div class="comment-edit-submit-wrapper">
+{{if $preview}}
+                       <button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
+{{/if}}
                        <button type="submit" class="btn btn-primary btn-sm" id="comment-edit-submit-{{$id}}" name="submit"><i class="fa fa-envelope"></i> {{$submit}}</button>
-                       {{if $preview}}
-                               <button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
-                       {{/if}}
-                       <ul class="comment-edit-bb-{{$id}} comment-icon-list nav nav-pills pull-right">
-                               <li>
-                                       <button type="button" class="btn-link icon bb-img" style="cursor: pointer;" aria-label="{{$edimg}}" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
-                                               <i class="fa fa-picture-o"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon bb-url" style="cursor: pointer;" aria-label="{{$edurl}}" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
-                                               <i class="fa fa-link"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon" style="cursor: pointer;" aria-label="{{$edattach}}" title="{{$edattach}}" ondragenter="return commentLinkDrop(event, {{$id}});" ondragover="return commentLinkDrop(event, {{$id}});" ondrop="commentLinkDropper(event);" onclick="commentGetLink({{$id}}, '{{$prompttext}}');">
-                                               <i class="fa fa-paperclip"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon underline" style="cursor: pointer;" aria-label="{{$eduline}}" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
-                                               <i class="fa fa-underline"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon italic" style="cursor: pointer;" aria-label="{{$editalic}}" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
-                                               <i class="fa fa-italic"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon bold" style="cursor: pointer;" aria-label="{{$edbold}}" title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
-                                               <i class="fa fa-bold"></i>
-                                       </button>
-                               </li>
-                               <li>
-                                       <button type="button" class="btn-link icon quote" style="cursor: pointer;" aria-label="{{$edquote}}" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
-                                               <i class="fa fa-quote-left"></i>
-                                       </button>
-                               </li>
-                       </ul>
                </div>
 
                <div class="comment-edit-end clear"></div>
        </form>
        <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>
 </div>
+

diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl
index c6f90ac05d63dce6d584201d1dfb38f1e1af5c85..3b3f64a0d4f6b95d33f9f3f91a72719a498e8c94 100644 (file)
--- a/view/theme/frio/templates/search_item.tpl
+++ b/view/theme/frio/templates/search_item.tpl
@@ -161,9 +161,9 @@
                        </div>
                        <!-- ./TODO -->
 
-                       <div class="wall-item-actions">
+                       <p class="wall-item-actions">
                                {{* Action buttons to interact with the item (like: like, dislike, share and so on *}}
-                               <div class="wall-item-actions-left pull-left">
+                               <span class="wall-item-actions-left">
                                        <!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}}
                                        <div id="button-reply" class="pull-left">
                                                <button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span>
@@ -204,28 +204,27 @@
                                                {{/if}}
                                        {{/if}}
                                        <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
-                               </div>
+                               </span>
 
 
-                               <div class="wall-item-actions-right pull-right">
+                               <span class="wall-item-actions-right">
                                        {{* Event attendance buttons *}}
-                                       {{if $item.isevent}}
-                                       <div class="vote-event">
+                               {{if $item.isevent}}
+                                       <span class="vote-event">
                                                <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}}, 'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button>
                                                <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}}, 'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button>
                                                <button type="button" class="btn btn-defaultbutton-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}}, 'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button>
-                                       </div>
-                                       {{/if}}
+                                       </span>
+                               {{/if}}
 
-                                       <div class="pull-right checkbox">
-                                               {{if $item.drop.pagedrop}}
+                                       <span class="pull-right checkbox">
+                               {{if $item.drop.pagedrop}}
                                                <input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" />
                                                <label for="checkbox-{{$item.id}}"></label>
-                                               {{/if}}
-                                       </div>
-                               </div>
-                               <div class="clearfix"></div>
-                       </div><!--./wall-item-actions-->
+                               {{/if}}
+                                       </span>
+                               </span>
+                       </p><!--./wall-item-actions-->
 
                                        {{* Display likes, dislike and attendance stats *}}
                        {{if $item.responses}}

diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index 068f98136afb3be2c1a707f09c50211a6319c425..0fcb84bad0e3923875a7ab8d60c77d5b8c31aff2 100644 (file)
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -20,7 +20,7 @@ as the value of $top_child_total (this is done at the end of this file)
 {{/if}}
 
 {{if $item.thread_level==2 && $top_child_nr==1}}
-<div class="comment-container well well-sm"> <!--top-child-begin-->
+<div class="comment-container"> <!--top-child-begin-->
 {{/if}}
 {{* end of hacky part to count childrens *}}
 
@@ -308,9 +308,9 @@ as the value of $top_child_total (this is done at the end of this file)
                <!-- ./TODO -->
 
                <!-- <hr /> -->
-               <div class="wall-item-actions">
+               <p class="wall-item-actions">
                        {{* Action buttons to interact with the item (like: like, dislike, share and so on *}}
-                       <div class="wall-item-actions-left pull-left">
+                       <span class="wall-item-actions-left">
                                <!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}}
                                <div id="button-reply" class="pull-left">
                                        <button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span>
@@ -338,7 +338,7 @@ as the value of $top_child_total (this is done at the end of this file)
 
                                {{* Button to open the comment text field *}}
                                {{if $item.comment}}
-                               <button type="button" class="btn-link button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="showHide('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i>&nbsp;{{$item.switchcomment}}</button>
+                               <button type="button" class="btn-link button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i>&nbsp;{{$item.switchcomment}}</button>
                                {{/if}}
 
                                {{* Button for sharing the item *}}
@@ -351,27 +351,26 @@ as the value of $top_child_total (this is done at the end of this file)
                                        {{/if}}
                                {{/if}}
                                <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
-                       </div>
+                       </span>
 
-                       <div class="wall-item-actions-right pull-right">
+                       <span class="wall-item-actions-right">
                                {{* Event attendance buttons *}}
-                               {{if $item.isevent}}
-                               <div class="vote-event">
+                       {{if $item.isevent}}
+                               <span class="vote-event">
                                        <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doLikeAction({{$item.id}},'attendyes');"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button>
                                        <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doLikeAction({{$item.id}},'attendno');"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button>
                                        <button type="button" class="btn btn-xs btn-default button-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doLikeAction({{$item.id}},'attendmaybe');"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button>
-                               </div>
-                               {{/if}}
+                               </span>
+                       {{/if}}
 
-                               <div class="pull-right checkbox">
-                                       {{if $item.drop.pagedrop}}
+                               <span class="pull-right checkbox">
+                       {{if $item.drop.pagedrop}}
                                        <input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" id="checkbox-{{$item.id}}" class="item-select" value="{{$item.id}}" />
                                        <label for="checkbox-{{$item.id}}"></label>
-                               {{/if}}
-                               </div>
-                       </div>
-                       <div class="clearfix"></div>
-               </div><!--./wall-item-actions-->
+                       {{/if}}
+                               </span>
+                       </span>
+               </p><!--./wall-item-actions-->
 
                <div class="wall-item-links"></div>
 
@@ -384,20 +383,17 @@ as the value of $top_child_total (this is done at the end of this file)
                        </div>
                {{/if}}
 
+               {{* Insert comment box of threaded children *}}
+               {{if $item.threaded && $item.comment && $item.indent==comment}}
+                       <div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}" data-display="block" style="display: none;">
+                               {{$item.comment nofilter}}
+                       </div>
+               {{/if}}
+
                {{if $item.thread_level!=1}}
                </div><!--./media-body from for comments-->
-               <hr />
                {{/if}}
 
-
-               {{* Insert comment box of threaded children *}}
-               {{if $item.threaded}}{{if $item.comment}}{{if $item.indent==comment}}
-               <div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}" style="display: none;">
-                       {{$item.comment nofilter}}
-               </div>
-               {{/if}}{{/if}}{{/if}}
-
-
                {{foreach $item.children as $child}}
                        {{*
                        {{if $child.type == tag}}
@@ -413,21 +409,12 @@ as the value of $top_child_total (this is done at the end of this file)
                        Display this comment box if there are any comments. If not hide it. In this
                        case it could be opend with the "comment" button *}}
                {{if $item.total_comments_num}}
-                       {{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
-                               <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}">{{$item.comment nofilter}}</div>
-                       {{/if}}{{/if}}{{/if}}
-
-                       {{if $item.flatten}}
-                               <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}">{{$item.comment nofilter}}</div>
-                       {{/if}}
-               {{else}}
-                       {{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
-                               <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" style="display: none;">{{$item.comment nofilter}}</div>
-                       {{/if}}{{/if}}{{/if}}
-
-                       {{if $item.flatten}}
-                               <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" style="display: none;">{{$item.comment nofilter}}</div>
-                       {{/if}}
+                       <div class="comment-fake-form" id="comment-fake-form-{{$item.id}}">
+                               <textarea id="comment-fake-text-{{$item.id}}" class="comment-fake-text-empty form-control" placeholder="{{$item.reply_label}}" onFocus="commentOpenUI(this, {{$item.id}});"  rows="1"></textarea>
+                       </div>
+               {{/if}}
+               {{if $item.comment && $item.thread_level==1}}
+                       <div class="wall-item-comment-wrapper well well-small" id="item-comments-{{$item.id}}" data-display="block" style="display: none">{{$item.comment nofilter}}</div>
                {{/if}}
        </div><!-- /media -->
 </div><!-- ./panel-body or ./wall-item-container -->