Merge pull request #438 from git-marijus/master

revision/redesign of conv_item.tpl

8 files changed, 200 insertions, 344 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index 6b1bdb9fb..281f65683 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -43,7 +43,7 @@
 }
 
 #profile-rotator {
-	margin: 16px 0px 0px 16px;
+	margin: 16px;
 }
 
 /* this is referenced in js/acl.js - not sure if it is still needed. */
@@ -57,28 +57,13 @@
 /* conversation */
 
 .thread-wrapper.toplevel_item {
-	width: 90%;
 	margin-bottom: 10px;
 }
 
 /* conv_item */
 
 .hide-comments-outer {
-	margin-left: 60px;
-	padding: 15px 10px 15px 7px;
-}
-
-.wall-item-content-wrapper {
-	margin-top: 10px;
-	position: relative;
-}
-
-.wall-item-content-wrapper .wall-item-delete-wrapper {
-	opacity: 0;
-}
-
-.wall-item-content-wrapper:hover .wall-item-delete-wrapper {
-	opacity: 1;
+	padding: 10px 10px 10px 7px;
 }
 
 .wall-item-info {
@@ -105,55 +90,17 @@
 
 .wall-item-photo-wrapper {
 	margin-top: 0px;
-	margin-left: 10px;
-	margin-bottom: 10px;
+	margin-bottom: 20px;
 }
 
-.wall-item-photo-menu-button {
-	left:10px;
-	display: block;
-	position: absolute;
-	margin: 0px;
-	padding: 0px;
-	width: 16px;
-	height: 16px;
-	overflow: hidden;
-	text-indent: 40px;
-	display: none;
-}
-
-.wall-item-photo-menu {
-	left:10px;
-	width: auto;
-	position: absolute;
-	display: none;
-	z-index: 10000;
-}
-
-.wall-item-photo-menu ul {
-	margin:0px;
-	padding: 0px;
-}
-
-.wall-item-photo-menu li a {
-	display: block;
-	padding: 2px;
-}
-
-.wall-item-arrowphoto-wrapper {
-	position: absolute;
-	z-index: 99;
-	left: 75px;
+.comment .wall-item-photo-wrapper {
+	margin-bottom: 15px;
 }
 
 .wall-item-wrapper {
 	margin-left:10px;
 }
 
-.wall-item-arrowphoto-wrapper {
-
-}
-
 .lockview {
 	cursor: pointer;
 }
@@ -162,17 +109,21 @@
 	padding: 3px 20px;
 }
 
-.wall-item-author {
-	margin-top: 10px;
+.wall-item-lock {
+	float: left;
 }
 
+.wall-item-author {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
 .wall-item-ago .icon-ok {
 	cursor: pointer;
 }
 
 .wall-item-content {
-	margin-left: 10px;
 	overflow: auto;
 }
 
@@ -180,9 +131,12 @@
     max-width: 95%;
 }
 
-.wall-item-title {
-	float: left;
+.wall-item-title h3 {
 	font-weight: bold;
+	margin: 0px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .wall-item-title-end {
@@ -190,14 +144,9 @@
 }
 
 .wall-item-body {
-	margin-top: 10px;
 	word-wrap: break-word;
 }
 
-.wall-item-body.divmore {
-        padding-bottom: 15px;
-}
-
 .body-tag, .filesavetags, .categorytags {
 	opacity: 0.5;
 	filter:alpha(opacity=50);
@@ -209,41 +158,25 @@
 }
 
 .body-tag {
-	margin-top: 15px;
+	margin-top: 10px;
 }
 
-.wall-item-tools {
-	clear: both;
-	padding: 5px 10px;
-	margin-left: 60px;
-}
-.wall-item-tools-bs {
-clear: both;
-	padding: 5px 10px;
-	margin-left: 40px;
-}
-.comment .wall-item-tools {
-	margin-left: 0;
+.categorytags {
+	margin-top: 10px;
 }
-.comment .wall-item-tools-bs {
-	padding: 0px 0px;
-	margin-left: 35px;
+
+.wall-item-tools {
+	width: 100%;
+	margin-top: 10px;
 }
+
 .item-tool {
 	cursor: pointer;
 }
 
 .like-rotator {
-	float: left;
-	margin: 8px;
-}
-
-.wall-item-delete-wrapper {
 	float: right;
-}
-
-.wall-item-delete-end {
-	clear: both;
+	margin: 16px;
 }
 
 .item-select {
@@ -260,16 +193,6 @@ clear: both;
 	filter:alpha(opacity=100);
 }
 
-.wall-item-like,
-.wall-item-dislike {
-	margin-top: 5px;
-	margin-left: 65px;
-}
-.comment .wall-item-like,
-.comment .wall-item-dislike {
-	margin-top: 5px;
-	margin-left: 50px;
-}
 .wall-item-wrapper-end {
 	clear: both;
 }
@@ -289,7 +212,7 @@ clear: both;
 }
 
 .comment-edit-photo {
-	margin: 10px;
+	margin: 10px 10px 10px 7px;
 	float: left;
 }
 
diff --git a/view/css/default.css b/view/css/default.css
index 793148019..d47fdfe80 100644
--- a/view/css/default.css
+++ b/view/css/default.css
@@ -31,5 +31,5 @@ section {
 	width: 100%;
 	display: table-cell;
 	vertical-align: top;
-	padding: 65px 13px 200px 13px;
+	padding: 65px 10px 200px 10px;
 }
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 26ac639ee..678adbb86 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1383,7 +1383,6 @@ brain is weird like that */
 	max-height:150px;
 	background-color:$acpopup_bgcolour;
 	overflow:auto;
-	z-index:100000;
 	border:1px solid $acpopup_bordercolour;
 }
 .acpopupitem {
@@ -1662,7 +1661,7 @@ header {
 
 .profile-match-connect { margin-top: 5px; }
 
-.reshared-content { margin-left: 30px; }
+.reshared-content { margin-left: 20px; }
 .shared_header img { margin-right: 10px; }
 
 .tag1 {
@@ -1722,7 +1721,6 @@ margin: 20px;
 
 div#write-pages {
 display: block;
-z-index: 99;
 background: silver;
 width: 100%;
 }
@@ -1773,10 +1771,6 @@ a .drop-icons:hover {
 	font-size: 1.8em;
 }
 
-.item-category {
-	margin-right: 10px;
-}
-
 .design-tools ul {
 	list-style-type: none;
 }
@@ -1887,6 +1881,7 @@ img.mail-list-sender-photo {
 
 /* conversation */
 
+.hide-comments-outer,
 .thread-wrapper .wall-item-comment-wrapper,
 .wall-item-content-wrapper.comment {
 	margin-left: $comment_indent;
@@ -1897,56 +1892,41 @@ img.mail-list-sender-photo {
 }
 
 .wall-item-content-wrapper {
-	border-radius: $radiuspx;
 	background-color: $item_colour;
 	opacity: $item_opacity;
-	border-left: 2px solid $item_bordercolour;
-	border-bottom: 1px solid $item_bordercolour;
-}
-
-.wall-item-content-wrapper:hover{
-	z-index:99;
-}
-
-.wall-item-comment-wrapper {
-	margin-top: 10px;
-	border-left: 2px solid $item_bordercolour;
-	border-bottom: 1px solid $item_bordercolour; 
-}
-
-.wallwall .wwto {
-	top: $wwtop;
-}
-
-.wall-item-photo-menu-button {
-	background-image: url("../img/photo-menu.jpg");
-	background-position: top left;
-	background-repeat: no-repeat;
-	top: $pmenu_top;
+	padding: 10px;
 }
 
-.wall-item-photo-menu {
-	border: 2px solid #444444;
-	background: #FFFFFF;
-	top: $top_photo;
+.wall-item-content-wrapper {
+	border-top-right-radius: $radiuspx;
+	border-top-left-radius: $radiuspx;
 }
 
-.wall-item-photo-menu ul {
-	list-style: none
+.wall-item-content-wrapper:hover {
+	z-index:99;
 }
 
-.wall-item-photo-menu li a:hover {
-	color: #FFFFFF;
-	background: #3465A4;
-	text-decoration: none;
+.hide-comments-outer,
+.wall-item-content-wrapper.comment {
+	background-color: $comment_item_colour;
+	border-left: 3px solid $item_bordercolour;
+	border-radius: 0px;
+	padding: 7px 10px 7px 7px;
 }
 
-.comment .wall-item-photo-menu-button {
-	top: $pmenu_reply;
+.wall-item-comment-wrapper {
+	background-color: $comment_item_colour;
+	border-left: 3px solid $item_bordercolour;
+	border-radius: 0px;
+	border-bottom-right-radius: $radiuspx;
+	border-bottom-left-radius: $radiuspx;
 }
 
-.comment .wall-item-photo-menu {
-	top: $reply_photo;
+.wall-item-like,
+.wall-item-dislike {
+	font-size: $body_font_size;
+	text-align: left;
+	white-space: normal;
 }
 
 .wall-item-photo {
@@ -1967,15 +1947,6 @@ img.mail-list-sender-photo {
     box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
-.wall-item-arrowphoto-wrapper {
-	top: $wwtop;
-}
-
-.wall-item-lock {
-	font-size: 1.2em;
-	color: $toolicon_colour;
-}
-
 .wall-item-ago .icon-ok {
 	color: darkgreen;
 }
@@ -1986,11 +1957,12 @@ img.mail-list-sender-photo {
 }
 
 .wall-item-ago i {
-	font-size: 0.6em;
+	font-size: 0.8em;
 }
 
 .wall-item-content {
 	font-size: $font_size;
+	clear: both;
 }
 
 .item-tool {
@@ -1999,7 +1971,7 @@ img.mail-list-sender-photo {
 }
 
 .item-tool:hover {
-	color: $toolicon_activecolour;
+	/*color: $toolicon_activecolour;*/
 }
 
 .like-rotator {
@@ -2320,15 +2292,6 @@ blockquote {
 		width: 100%;
 	}
 
-	.thread-wrapper .wall-item-comment-wrapper,
-	.wall-item-content-wrapper.comment {
-		margin-left: 18px;
-	}
-
-	.hide-comments-outer {
-		margin-left: 18px;
-	}
-
 	.wall-item-photo {
 		width: 48px !important;
 		height: 48px !important;
diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php
index ab819f05b..bd4660c97 100644
--- a/view/theme/redbasic/php/config.php
+++ b/view/theme/redbasic/php/config.php
@@ -20,6 +20,7 @@ function theme_content(&$a) {
 	$arr['bgcolour'] = get_pconfig(local_user(),'redbasic', 'background_colour' );
 	$arr['background_image'] = get_pconfig(local_user(),'redbasic', 'background_image' );
 	$arr['item_colour'] = get_pconfig(local_user(),'redbasic', 'item_colour' );
+	$arr['comment_item_colour'] = get_pconfig(local_user(),'redbasic', 'comment_item_colour' );
 	$arr['item_opacity'] = get_pconfig(local_user(),'redbasic', 'item_opacity' );
 	$arr['toolicon_colour'] = get_pconfig(local_user(),'redbasic','toolicon_colour');
 	$arr['toolicon_activecolour'] = get_pconfig(local_user(),'redbasic','toolicon_activecolour');
@@ -56,6 +57,7 @@ function theme_post(&$a) {
 		set_pconfig(local_user(), 'redbasic', 'banner_colour', $_POST['redbasic_banner_colour']);
 		set_pconfig(local_user(), 'redbasic', 'background_image', $_POST['redbasic_background_image']);
 		set_pconfig(local_user(), 'redbasic', 'item_colour', $_POST['redbasic_item_colour']);
+		set_pconfig(local_user(), 'redbasic', 'comment_item_colour', $_POST['redbasic_comment_item_colour']);
 		set_pconfig(local_user(), 'redbasic', 'item_opacity', $_POST['redbasic_item_opacity']);
 		set_pconfig(local_user(), 'redbasic', 'toolicon_colour', $_POST['redbasic_toolicon_colour']);
 		set_pconfig(local_user(), 'redbasic', 'toolicon_activecolour', $_POST['redbasic_toolicon_activecolour']);
@@ -111,6 +113,7 @@ if(feature_enabled(local_user(),'expert'))
 		'$bgcolour' => array('redbasic_background_colour', t('Set the background colour'), $arr['bgcolour']),
 		'$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']),
 		'$item_colour' => array('redbasic_item_colour', t('Set the background colour of items'), $arr['item_colour']),
+		'$comment_item_colour' => array('redbasic_comment_item_colour', t('Set the background colour of comments'), $arr['comment_item_colour']),
 		'$item_opacity' => array('redbasic_item_opacity', t('Set the opacity of items'), $arr['item_opacity']),
 		'$toolicon_colour' => array('redbasic_toolicon_colour',t('Set the basic colour for item icons'),$arr['toolicon_colour']),
 		'$toolicon_activecolour' => array('redbasic_toolicon_activecolour',t('Set the hover colour for item icons'),$arr['toolicon_activecolour']),
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 87e0b12bb..95ca5a4fe 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -24,7 +24,8 @@ if(! $a->install) {
 		$background_image = get_pconfig($uid, "redbasic", "background_image");	
 		$toolicon_colour = get_pconfig($uid,'redbasic','toolicon_colour');
 		$toolicon_activecolour = get_pconfig($uid,'redbasic','toolicon_activecolour');
-		$item_colour = get_pconfig($uid, "redbasic", "item_colour");	
+		$item_colour = get_pconfig($uid, "redbasic", "item_colour");
+		$comment_item_colour = get_pconfig($uid, "redbasic", "comment_item_colour");
 		$item_opacity = get_pconfig($uid, "redbasic", "item_opacity");	
 		$body_font_size = get_pconfig($uid, "redbasic", "body_font_size");	
 		$font_size = get_pconfig($uid, "redbasic", "font_size");	
@@ -106,7 +107,7 @@ if(! $a->install) {
 	if (! $navtabs_bgchover)
 		$navtabs_bgchover = "#eee";
 	if (! $link_colour)
-		$link_colour = "#0080ff";
+		$link_colour = "#428BCA";
 	if (! $banner_colour)
 		$banner_colour = "#fff";
 	if (! $search_background)
@@ -116,7 +117,9 @@ if(! $a->install) {
 	if (! $background_image)
 		$background_image ='';
 	if (! $item_colour)
-		$item_colour = "#fdfdfd";
+		$item_colour = "rgba(238,238,238,0.8)";
+	if (! $comment_item_colour)
+		$comment_item_colour = "rgba(254,254,254,0.4)";
 	if (! $toolicon_colour)
 		$toolicon_colour = '#777';
 	if (! $toolicon_activecolour)
@@ -124,7 +127,7 @@ if(! $a->install) {
 	if (! $item_opacity)
 		$item_opacity = "1";
 	if (! $item_bordercolour)
-		$item_bordercolour = "#f4f4f4";
+		$item_bordercolour = $item_colour;
 	if (! $font_size)
 		$font_size = "1.0em";
 	if (! $body_font_size)
@@ -152,7 +155,7 @@ if(! $a->install) {
 	if (! $notif_itemhovercolour)
 		$notif_itemhovercolour = "#000";
 	if (! $editbuttons_bgcolour)
-		$editbuttons_bgcolour = "#fff";
+		$editbuttons_bgcolour = "transparent";
 	if (! $editbuttons_bordercolour)
 		$editbuttons_bordercolour = "#ccc";
 	if (! $editbuttons_bghover)
@@ -194,7 +197,7 @@ if(! $a->install) {
 	if (! $input_decohover)
 		$input_decohover = "none";
 	if (! $radius)
-		$radius = "0";
+		$radius = "4";
 	if (! $shadow)
 		$shadow = "0";
 	if(! $active_colour)
@@ -212,14 +215,10 @@ if(! $a->install) {
 		$abookself_bgcolour = "#ffdddd";
 	if(! $top_photo)
 		$top_photo = '48px';
-	$pmenu_top = intval($top_photo) - 16 . 'px';
-	$wwtop = intval($top_photo) - 15 . 'px';
-	$comment_indent = intval($top_photo) + 10 . 'px';
-
+	if(! $comment_indent)
+		$comment_indent = '0px';
 	if(! $reply_photo)
 		$reply_photo = '32px';
-	$pmenu_reply = intval($reply_photo) - 16 . 'px';
-	
 	if($nav_min_opacity === false || $nav_min_opacity === '') {
 		$nav_float_min_opacity = 1.0;
 		$nav_percent_min_opacity = 100;
@@ -259,6 +258,7 @@ $options = array (
 '$bgcolour' => $bgcolour,
 '$background_image' => $background_image,
 '$item_colour' => $item_colour,
+'$comment_item_colour' => $comment_item_colour,
 '$item_opacity' => $item_opacity,
 '$item_bordercolour' => $item_bordercolour,
 '$toolicon_colour' => $toolicon_colour,
diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl
index b20d17804..f48e178db 100644
--- a/view/theme/redbasic/tpl/theme_settings.tpl
+++ b/view/theme/redbasic/tpl/theme_settings.tpl
@@ -19,6 +19,7 @@
 {{include file="field_colorinput.tpl" field=$bgcolour}}
 {{include file="field_colorinput.tpl" field=$background_image}}
 {{include file="field_colorinput.tpl" field=$item_colour}}
+{{include file="field_colorinput.tpl" field=$comment_item_colour}}
 {{include file="field_input.tpl" field=$item_opacity}}
 {{include file="field_colorinput.tpl" field=$toolicon_colour}}
 {{include file="field_colorinput.tpl" field=$toolicon_activecolour}}
@@ -37,7 +38,7 @@
     $(function(){
         $('#id_redbasic_nav_bg,#id_redbasic_nav_gradient_top,#id_redbasic_nav_gradient_bottom,#id_redbasic_nav_active_gradient_top,#id_redbasic_nav_active_gradient_bottom').colorpicker();
         $('#id_redbasic_nav_bd,#id_redbasic_nav_icon_colour ,#id_redbasic_nav_active_icon_colour,#id_redbasic_banner_colour,#id_redbasic_link_colour,#id_redbasic_background_colour').colorpicker();
-        $('#id_redbasic_item_colour,#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
+        $('#id_redbasic_item_colour,#id_redbasic_comment_item_colour,#id_redbasic_toolicon_colour,#id_redbasic_toolicon_activecolour,#id_redbasic_font_colour').colorpicker();
     });
 </script>
 
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index de4df7dc2..dc4148d84 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -1,170 +1,134 @@
 {{if $item.comment_firstcollapsed}}
-	<div class="hide-comments-outer">
+<div class="hide-comments-outer">
 	<span id="hide-comments-total-{{$item.id}}" class="hide-comments-total">{{$item.num_comments}}</span> <span id="hide-comments-{{$item.id}}" class="hide-comments fakelink" onclick="showHideComments({{$item.id}});">{{$item.hide_text}}</span>
-	</div>
-	<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
+</div>
+<div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
-<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper {{$item.toplevel}}">
-<a name="{{$item.id}}" ></a>
-<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
-	<div class="wall-item-content-wrapper {{$item.indent}}" id="wall-item-content-wrapper-{{$item.id}}" >
-		<div class="wall-item-info{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-info-{{$item.id}}">
-			{{* comment out for now. let's see if somebody is missing it. if yes we need a better visual concept.
-			{{if $item.owner_url}}
-			<div class="wall-item-photo-wrapper wwto" id="wall-item-ownerphoto-wrapper-{{$item.id}}" >
-				<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-photo-link" id="wall-item-ownerphoto-link-{{$item.id}}">
-				<img src="{{$item.owner_photo}}" class="wall-item-photo{{$item.osparkle}}" id="wall-item-ownerphoto-{{$item.id}}" alt="{{$item.owner_name}}" /></a>
-			</div>
-			<div class="wall-item-arrowphoto-wrapper" ><img src="images/larrow.gif" alt="{{$item.wall}}" /></div>
-			{{/if}}
-			*}}
-			<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}" 
-				onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')"
-                onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">
-				<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}">
-				<img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" /></a>
-				<span onclick="openClose('wall-item-photo-menu-{{$item.id}}');" class="fakelink wall-item-photo-menu-button" id="wall-item-photo-menu-button-{{$item.id}}">menu</span>
-                <div class="wall-item-photo-menu" id="wall-item-photo-menu-{{$item.id}}">
-                    <ul>
-                        {{$item.item_photo_menu}}
-                    </ul>
-                </div>
-
-			</div>
-			<div class="wall-item-photo-end"></div>
-
-		</div>
-		<div class="wall-item-author dropdown">
-				{{if $item.lock}}<i class="icon-lock lockview dropdown-toggle" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;{{/if}}<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" >{{$item.name}}</span></a>{{if $item.owner_url}} {{$item.via}} <a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}<br />
-				<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">{{if $item.verified}}<i class="icon-ok" title="{{$item.verified}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}">{{$item.localtime}}{{if $item.editedtime}} {{$item.editedtime}}{{/if}}{{if $item.expiretime}} {{$item.expiretime}}{{/if}}</span>{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}</div>
-		</div>			
-		<div class="wall-item-content" id="wall-item-content-{{$item.id}}">
-			<div class="wall-item-title" id="wall-item-title-{{$item.id}}">{{$item.title}}</div>
-			<div class="wall-item-title-end"></div>
-			<div class="wall-item-body" id="wall-item-body-{{$item.id}}" >{{$item.body}}
-					<div class="body-tag">
+	<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper {{$item.toplevel}}">
+		<a name="{{$item.id}}" ></a>
+		<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
+			<div class="wall-item-content-wrapper {{$item.indent}}" id="wall-item-content-wrapper-{{$item.id}}" style="clear:both;">
+				<div class="wall-item-info{{if $item.owner_url}} wallwall{{/if}}" id="wall-item-info-{{$item.id}}" >
+					<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">
+						<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}"><img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" /></a>
+					</div>
+					<div class="wall-item-photo-end" style="clear:both"></div>
+				</div>
+				{{if $item.title}}
+				<div class="wall-item-title" id="wall-item-title-{{$item.id}}"><h3>{{$item.title}}</h3></div>
+				{{/if}}
+				{{if $item.lock}}
+				<div class="wall-item-lock dropdown">
+					<i class="icon-lock lockview dropdown-toggle" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;
+				</div>
+				{{/if}}
+				<div class="wall-item-author">
+					<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}" id="wall-item-name-{{$item.id}}" >{{$item.name}}</span></a>{{if $item.owner_url}}&nbsp;{{$item.via}}&nbsp;<a href="{{$item.owner_url}}" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a>{{/if}}
+				</div>
+				<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">
+					{{if $item.verified}}<i class="icon-ok" title="{{$item.verified}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}">{{$item.localtime}}{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</span>{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
+				</div>
+				<div class="wall-item-content" id="wall-item-content-{{$item.id}}">
+					<div class="wall-item-title-end"></div>
+					<div class="wall-item-body" id="wall-item-body-{{$item.id}}" >
+						{{$item.body}}
+						{{if $item.tags}}
+						<div class="body-tag">
 						{{foreach $item.tags as $tag}}
 							<span class='tag'>{{$tag}}</span>
 						{{/foreach}}
+						</div>
+						{{/if}}
+						{{if $item.has_cats}}
+						<div class="categorytags">
+							<span>{{$item.txt_cats}} {{foreach $item.categories as $cat}}{{$cat.name}} <a href="{{$cat.removeurl}}" title="{{$remove}}">[{{$remove}}]</a> {{if $cat.last}}{{else}}, {{/if}}{{/foreach}}
+						</div>
+						{{/if}}
+							{{if $item.has_folders}}
+						<div class="filesavetags">
+							<span>{{$item.txt_folders}} {{foreach $item.folders as $cat}}{{$cat.name}} <a href="{{$cat.removeurl}}" title="{{$remove}}">[{{$remove}}]</a> {{if $cat.last}}{{else}}, {{/if}}{{/foreach}}
+						</div>
+						{{/if}}
 					</div>
-			{{if $item.has_cats}}
-			<div class="categorytags"><span>{{$item.txt_cats}} {{foreach $item.categories as $cat}}{{$cat.name}} <a href="{{$cat.removeurl}}" title="{{$remove}}">[{{$remove}}]</a> {{if $cat.last}}{{else}}, {{/if}}{{/foreach}}
-			</div>
-			{{/if}}
-
-			{{if $item.has_folders}}
-			<div class="filesavetags"><span>{{$item.txt_folders}} {{foreach $item.folders as $cat}}{{$cat.name}} <a href="{{$cat.removeurl}}" title="{{$remove}}">[{{$remove}}]</a> {{if $cat.last}}{{else}}, {{/if}}{{/foreach}}
-			</div>
-			{{/if}}
+				</div>
+					<div class="wall-item-tools">
+					<div class="wall-item-tools-right btn-group pull-right">
+						{{if $item.like}}
+						<button type="button" class="btn btn-default btn-sm" onclick="dolike({{$item.id}},'like'); return false">
+							<i class="icon-thumbs-up-alt" title="{{$item.like.0}}"></i>
+						</button>
+						{{/if}}
+						{{if $item.dislike}}
+						<button type="button" class="btn btn-default btn-sm" onclick="dolike({{$item.id}},'dislike'); return false">
+							<i class="icon-thumbs-down-alt" title="{{$item.dislike.0}}"></i>
+						</button>
+						{{/if}}
+						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+							<i class="icon-caret-down"></i>
+						</button>
+						<ul class="dropdown-menu">
+							{{if $item.share}}
+							<li><a href="#" onclick="jotShare({{$item.id}}); return false"><i class="icon-retweet" title="{{$item.share.0}}"></i> {{$item.share.0}}</a></li>
+							{{/if}}
+							{{if $item.plink}}
+							<li><a href="{{$item.plink.href}}" title="{{$item.plink.title}}" ><i class="icon-external-link"></i> {{$item.plink.title}}</a></li>
+							{{/if}}
+							{{if $item.edpost}}
+							<li><a href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="editpost icon-pencil"></i> {{$item.edpost.1}}</a></li>
+							{{/if}}
+							{{if $item.tagger}}
+							<li><a href="#"  onclick="itemTag({{$item.id}}); return false;"><i id="tagger-{{$item.id}}" class="icon-tag" title="{{$item.tagger.tagit}}"></i> {{$item.tagger.tagit}}</a></li>
+							{{/if}}
+							{{if $item.filer}}
+							<li><a href="#" onclick="itemFiler({{$item.id}}); return false;"><i id="filer-{{$item.id}}" class="icon-folder-open" title="{{$item.filer}}"></i> {{$item.filer}}</a></li>
+							{{/if}}
+							{{if $item.bookmark}}
+							<li><a href="#" onclick="itemBookmark({{$item.id}}); return false;"><i id="bookmarker-{{$item.id}}" class="icon-bookmark" title="{{$item.bookmark}}"></i> {{$item.bookmark}}</a></li>
+							{{/if}}
+							{{if $item.star}}
+							<li><a href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="icon-star {{$item.star.isstarred}}" title="{{$item.star.toggle}}"></i> {{$item.star.toggle}}</a></li>
+							{{/if}}
+							{{if $item.item_photo_menu}}
+							<li role="presentation" class="divider"></li>
+							{{$item.item_photo_menu}}
+							{{/if}}
+							{{if $item.drop.dropping}}
+							<li role="presentation" class="divider"></li>
+							<li><a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}" ><i class="icon-remove"></i> {{$item.drop.delete}}</a></li>
+							{{/if}}
+						</ul>
+					</div>
+					<div id="like-rotator-{{$item.id}}" class="like-rotator"></div>
+					<div class="wall-item-tools-left btn-group pull-left">
+						{{if $item.showlike}}
+						<div class="btn btn-default btn-sm wall-item-like pull-left" id="wall-item-like-{{$item.id}}">{{$item.showlike}}</div>
+						{{/if}}
+						{{if $item.showdislike}}
+						<div class="btn btn-default btn-sm wall-item-dislike pull-left" id="wall-item-dislike-{{$item.id}}">{{$item.showdislike}}</div>
+						{{/if}}
+					</div>
+				</div>
+				{{* we dont' use this do we?
+				{{if $item.drop.pagedrop}}
+				<input type="checkbox" onclick="checkboxhighlight(this);" title="{{$item.drop.select}}" class="item-select" name="itemselected[]" value="{{$item.id}}" />
+				{{/if}}
+				*}}
+				<div class="clear"></div>
 			</div>
+			<div class="wall-item-wrapper-end"></div>
+			<div class="wall-item-outside-wrapper-end {{$item.indent}}" ></div>
 		</div>
-
-<!-- 		<div class="wall-item-tools" id="wall-item-tools-{{$item.id}}">
-			{{if $item.like}}
-				<i class="icon-thumbs-up-alt item-tool" title="{{$item.like.0}}" onclick="dolike({{$item.id}},'like'); return false"></i>
-			{{/if}}
-			{{if $item.dislike}}
-				<i class="icon-thumbs-down-alt item-tool" title="{{$item.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"></i>
-			{{/if}}
-			{{if $item.share}}
-				<i class="icon-retweet item-tool" title="{{$item.share.0}}" onclick="jotShare({{$item.id}}); return false"></i>
-			{{/if}}
-			{{if $item.plink}}
-				<a href="{{$item.plink.href}}" title="{{$item.plink.title}}" ><i class="icon-external-link item-tool"></i></a>
-			{{/if}}
-			{{if $item.edpost}}
-				<a href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="editpost icon-pencil item-tool"></i></a>
-			{{/if}}			 
-			{{if $item.star}}
-			<i id="starred-{{$item.id}}" onclick="dostar({{$item.id}}); return false;" class="star-item item-tool {{$item.star.isstarred}}" title="{{$item.star.toggle}}"></i>
-			{{/if}}
-			{{if $item.tagger}}
-			<i id="tagger-{{$item.id}}" onclick="itemTag({{$item.id}}); return false;" class="tag-item icon-tag item-tool" title="{{$item.tagger.tagit}}"></i>
-			{{/if}}
-			{{if $item.filer}}
-			<i id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item icon-folder-open item-tool" title="{{$item.filer}}"></i>
-			{{/if}}
-			{{if $item.bookmark}}
-			<i id="bookmarker-{{$item.id}}" onclick="itemBookmark({{$item.id}}); return false;" class="bookmark-item icon-bookmark item-tool" title="{{$item.bookmark}}"></i>
-			{{/if}}		
- -->
-		<div class="wall-item-tools-bs btn-group">
-		{{if $item.like}}
-  <button type="button" class="btn btn-default btn-sm" onclick="dolike({{$item.id}},'like'); return false">			
-				<i class="icon-thumbs-up-alt item-tool" title="{{$item.like.0}}"></i>
-			
-	</button>{{/if}}
-  {{if $item.dislike}}<button type="button" class="btn btn-default btn-sm" onclick="dolike({{$item.id}},'dislike'); return false">		
-				<i class="icon-thumbs-down-alt item-tool" title="{{$item.dislike.0}}"></i>
-			
-		</button>{{/if}}
-<!-- 		{{if $item.drop.dropping}}<button type="button" class="btn btn-default btn-sm" onclick="return confirmDelete();" type="submit"><a href="item/drop/{{$item.id}}"  title="{{$item.drop.delete}}" ><i class="icon-remove drop-icons"></i></a></button>{{/if}}
-
-		{{if $item.star}}
-		<button type="button" class="btn btn-default btn-sm">
-
-				<i id="starred-{{$item.id}}" onclick="dostar({{$item.id}}); return false;" class="icon-star {{$item.star.isstarred}} item-tool" title="{{$item.star.toggle}}"></i>
-			</button>{{/if}}
- -->
-  <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
-      <i class="icon-caret-down item-tool"></i>
-    </button>
-    <ul class="dropdown-menu">
-      <li>	{{if $item.share}}
-				<a href="#" onclick="jotShare({{$item.id}}); return false"><i class="icon-retweet item-tool" title="{{$item.share.0}}"></i> {{$item.share.0}}</a>
-			{{/if}}</li>
-      <li>	{{if $item.plink}}
-				<a href="{{$item.plink.href}}" title="{{$item.plink.title}}" ><i class="icon-external-link item-tool"></i> {{$item.plink.title}}</a>
-			{{/if}}</li>
-      <li>	{{if $item.edpost}}
-				<a href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="editpost icon-pencil item-tool"></i> {{$item.edpost.1}}</a>
-			{{/if}}</li>
-      <li>	{{if $item.tagger}}
-				<a href="#"  onclick="itemTag({{$item.id}}); return false;"><i id="tagger-{{$item.id}}" class="icon-tag item-tool" title="{{$item.tagger.tagit}}"></i> {{$item.tagger.tagit}}</a>
-			{{/if}}</li>
-	  <li>	{{if $item.filer}}
-			<a href="#" onclick="itemFiler({{$item.id}}); return false;"><i id="filer-{{$item.id}}" class="icon-folder-open item-tool" title="{{$item.filer}}"></i> {{$item.filer}}</a>
-			{{/if}}</li>
-	  <li>	{{if $item.bookmark}}
-			<a href="#" onclick="itemBookmark({{$item.id}}); return false;"><i id="bookmarker-{{$item.id}}" class="icon-bookmark item-tool" title="{{$item.bookmark}}"></i> {{$item.bookmark}}</a>
-			{{/if}}	</li>	
-	  <li>	{{if $item.star}}
-			<a href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="icon-star {{$item.star.isstarred}} item-tool" title="{{$item.star.toggle}}"></i> {{$item.star.toggle}}</a>
-			{{/if}}
-	  			</li>
-		
-													
-    </ul>
-  </div>
-</div>
-			<div id="like-rotator-{{$item.id}}" class="like-rotator"></div>
-			<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-{{$item.id}}" >
- 				{{if $item.drop.dropping}}<a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}" ><i class="icon-remove drop-icons item-tool"></i></a>{{/if}}
-			</div>
-				{{if $item.drop.pagedrop}}<input type="checkbox" onclick="checkboxhighlight(this);" title="{{$item.drop.select}}" class="item-select" name="itemselected[]" value="{{$item.id}}" />{{/if}}
-			<div class="wall-item-delete-end"></div>
-			<div class="wall-item-like {{$item.indent}}" id="wall-item-like-{{$item.id}}">{{$item.showlike}}</div>
-			<div class="wall-item-dislike {{$item.indent}}" id="wall-item-dislike-{{$item.id}}">{{$item.showdislike}}</div>
-
-
+		{{if $item.toplevel}}
+		{{foreach $item.children as $child}}
+			{{include file="{{$child.template}}" item=$child}}
+		{{/foreach}}
+		{{/if}}
+		{{if $item.comment}}
+		<div class="wall-item-comment-wrapper" >
+			{{$item.comment}}
+		</div>
+		{{/if}}
 	</div>
-
-	<div class="wall-item-wrapper-end"></div>
-
-<div class="wall-item-outside-wrapper-end {{$item.indent}}" ></div>
-</div>
-{{if $item.toplevel}}
-{{foreach $item.children as $child}}
-	{{include file="{{$child.template}}" item=$child}}
-{{/foreach}}
-{{/if}}
-
-{{if $item.comment}}
-<div class="wall-item-comment-wrapper" >
-	{{$item.comment}}
+{{if $item.comment_lastcollapsed}}
 </div>
 {{/if}}
-
-</div>
-{{if $item.comment_lastcollapsed}}</div>{{/if}}
diff --git a/view/tpl/item_attach.tpl b/view/tpl/item_attach.tpl
index 7dc8dfd59..eeea25967 100644
--- a/view/tpl/item_attach.tpl
+++ b/view/tpl/item_attach.tpl
@@ -1,6 +1,8 @@
 <div class="clear"></div>
+{{if $attaches}}
 <div class="body-attach">
-{{foreach $attaches as $a}} 
-<a href="{{$a.url}}" title="{{$a.title}}" class="attachlink" ><i class="icon-paper-clip attach-icons attach-clip"></i><i class="{{$a.icon}} attach-icons"></i></a>
-{{/foreach}}
+	{{foreach $attaches as $a}}
+	<a href="{{$a.url}}" title="{{$a.title}}" class="attachlink" ><i class="icon-paper-clip attach-icons attach-clip"></i><i class="{{$a.icon}} attach-icons"></i></a>
+	{{/foreach}}
 </div>
+{{/if}}