fix item_list and item_search templates. make item filer use a bootdtrap modal and some css and class fixes

16 files changed, 265 insertions, 280 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index b167e3961..e2adf8658 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -140,10 +140,6 @@ a.wall-item-name-link {
 	margin: 0px;
 }
 
-.wall-item-title-end {
-	clear: both;
-}
-
 .wall-item-body {
 	word-wrap: break-word;
 }
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index 4de9f9c6b..9673312a7 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -60,7 +60,7 @@ function contact_format(item) {
 		var desc = ((item.label) ? item.nick + ' ' + item.label : item.nick);
 		if(typeof desc === 'undefined') desc = '';
 		if(desc) desc = ' ('+desc+')';
-		return "<div class='{0} dropdown-item dropdown-notification clearfix' title='{4}'><img class='dropdown-menu-img-sm' src='{1}'><span class='contactname'>{2}</span><span class='dropdown-sub-text'>{3}</span></div>".format(item.taggable, item.photo, item.name, desc, item.link);
+		return "<div class='{0} dropdown-item dropdown-notification clearfix' title='{4}'><img class='menu-img-2' src='{1}'><span class='contactname'>{2}</span><span class='dropdown-sub-text'>{3}</span></div>".format(item.taggable, item.photo, item.name, desc, item.link);
 	}
 	else
 		return "<div>" + item.text + "</div>";
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index bcf987b2b..f0b08a738 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -358,10 +358,6 @@ footer {
 	filter:alpha(opacity=100);
 }
 
-#view-contact-end {
-	clear: both;
-}
-
 #profile-photo-wrapper img {
 	width: 100%;
 	height: 100%;
@@ -502,10 +498,6 @@ footer {
 	height: 34px;
 }
 
-#contact-block-end {
-	clear: both;
-}
-
 .contact-block-img {
 	width:47px;
 	height:47px;
@@ -529,15 +521,9 @@ footer {
 }
 
 .wall-item-conv {
-	padding: 7px 10px;
 	background-color: $comment_item_colour;
 }
 
-
-#conversation-end {
-	clear: both;
-}
-
 #nav-notifications-template {
 	display: none;
 }
@@ -622,11 +608,6 @@ nav .acpopup {
 	text-align: center;
 }
 
-.profile-match-break,
-.profile-match-end {
-	clear: both;
-}
-
 .profile-match-connect {
 	text-align: center;
 	font-weight: bold;
@@ -645,9 +626,6 @@ nav .acpopup {
 	float: right;
 }
 
-#profile-match-wrapper-end {
-	clear: both;
-}
 .side-link {
 	margin-bottom: 15px;
 }
@@ -660,10 +638,6 @@ nav .acpopup {
 	border: 1px solid #ddd;
 }
 
-#group-members-end {
-	clear: both;
-}
-
 #group-separator {
 	margin-top: 10px;
 	margin-bottom: 10px;
@@ -676,11 +650,6 @@ nav .acpopup {
 	border: 1px solid #ddd;
 }
 
-#group-all-contacts-end {
-	clear: both;
-	margin-bottom: 10px;
-}
-
 #group-edit-desc {
 	margin-top: 15px;
 }
@@ -694,10 +663,6 @@ nav .acpopup {
 	border: 1px solid #ddd;
 }
 
-#prof-members-end {
-	clear: both;
-}
-
 #prof-separator {
 	margin-top: 10px;
 	margin-bottom: 10px;
@@ -710,11 +675,6 @@ nav .acpopup {
 	border: 1px solid #ddd;
 }
 
-#prof-all-contacts-end {
-	clear: both;
-	margin-bottom: 10px;
-}
-
 #prof-edit-desc {
 	margin-top: 15px;
 }
@@ -728,10 +688,6 @@ nav .acpopup {
 	width: 80px;
 	margin-right: 15px;
 }
-.notification-listing-end {
-	clear: both;
-	margin-bottom: 15px;
-}
 
 /**
  * OAuth
@@ -789,13 +745,6 @@ div.jGrowl div.jGrowl-notification {
     min-height: 60px;
 }
 
-#id_term_label {
-	width:75px;
-}
-#id_term {
-	width:100px;
-}
-
 #nav-search-text-ac .autocomplete {
 	position: fixed;
 	top: 51px;
@@ -884,7 +833,8 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	display: block;
 }
 
-.dropdown-notification {
+.dropdown-notification,
+.member-item {
 	line-height: 1.1em;
 	font-size: 0.75rem;
 	overflow: hidden;
@@ -897,10 +847,6 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	margin: 24px;
 }
 
-.tabs-end {
-	clear: both;
-}
-
 .modal-header .contextual-help-tool {
 	/* Mostly duplicating ".modal-header .close" and ".close" layout settings from bootstrap */
 	float: right;
@@ -1335,11 +1281,6 @@ img.mail-conv-sender-photo {
 	border-top: 0px solid $comment_item_colour;
 }
 
-.wall-item-like,
-.wall-item-dislike {
-	font-size: 11px;
-}
-
 .wall-item-photo {
 	border: none;
 	width: $top_photo !important;
@@ -1369,7 +1310,6 @@ img.mail-conv-sender-photo {
 .chat-item-text,
 .chat-item-text-self {
 	font-size: $font_size;
-	clear: both;
 }
 
 .item-tool {
@@ -1483,14 +1423,21 @@ nav img {
 	border-radius: $radiuspx;
 }
 
-.dropdown-menu-img-sm {
+.menu-img-3 {
 	width: 3.3em;
 	height: 3.3em;
 	margin-right: 5px;
 	float: left;
 }
 
-.dropdown-menu-img-xs {
+.menu-img-2 {
+	height: 2.2em;
+	width: 2.2em;
+	margin-right: 5px;
+	float: left;
+}
+
+.menu-img-1 {
 	height: 1.1em;
 	width: 1.1em;
 	margin-right: 5px;
diff --git a/view/tpl/admin_aside.tpl b/view/tpl/admin_aside.tpl
index 70e1677af..99f139e57 100755
--- a/view/tpl/admin_aside.tpl
+++ b/view/tpl/admin_aside.tpl
@@ -12,17 +12,17 @@
 </script>
 <div class="widget">
 <h3>{{$admtxt}}</h3>
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills flex-column">
 	{{foreach $admin as $link}}
-	<li><a href='{{$link.0}}'>{{$link.1}}{{if $link.3}}<span id='{{$link.3}}' title='{{$link.4}}'></span>{{/if}}</a></li>
+	<li class="nav-item"><a class="nav-link" href='{{$link.0}}'>{{$link.1}}{{if $link.3}}<span id='{{$link.3}}' title='{{$link.4}}'></span>{{/if}}</a></li>
 	{{/foreach}}
 </ul>
 </div>
 
 {{if $admin.update}}
-<ul class="nav nav-pills nav-stacked">
-	<li><a href='{{$admin.update.0}}'>{{$admin.update.1}}</a></li>
-	<li><a href=''>Important Changes</a></li>
+<ul class="nav nav-pills flex-column">
+	<li class="nav-item"><a class="nav-link" href='{{$admin.update.0}}'>{{$admin.update.1}}</a></li>
+	<li class="nav-item"><a class="nav-link" href=''>Important Changes</a></li>
 </ul>
 {{/if}}
 
@@ -30,9 +30,9 @@
 {{if $plugins}}
 <div class="widget">
 <h3>{{$plugadmtxt}}</h3>
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills flex-column">
 	{{foreach $plugins as $l}}
-	<li><a href='{{$l.0}}'>{{$l.1}}</a></li>
+	<li class="nav-item"><a class="nav-link" href='{{$l.0}}'>{{$l.1}}</a></li>
 	{{/foreach}}
 </ul>
 </div>
@@ -40,7 +40,7 @@
 	
 <div class="widget">	
 <h3>{{$logtxt}}</h3>
-<ul class="nav nav-pills nav-stacked">
-	<li><a href='{{$logs.0}}'>{{$logs.1}}</a></li>
+<ul class="nav nav-pills flex-column">
+	<li class="nav-item"><a class="nav-link" href='{{$logs.0}}'>{{$logs.1}}</a></li>
 </ul>
 </div>
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index f21f9c1bf..d07adb6b6 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -29,18 +29,18 @@
 					<div id="chat-submit" class="dropup pull-right">
 						<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-caret-up"></i></button>
 						<button class="btn btn-primary btn-sm" type="submit" id="chat-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
-						<ul class="dropdown-menu">
-							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i>&nbsp;{{$online}}</a></li>
-							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="fa fa-circle away"></i>&nbsp;{{$away}}</a></li>
-							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="fa fa-circle leave"></i>&nbsp;{{$leave}}</a></li>
-                            <li class="divider"></li>
-                            <li class="nav-item" id="toggle-notifications"><a class="nav-link" href="" onclick="toggleChatNotifications(); return false;"><i id="toggle-notifications-icon" class="fa fa-bell-slash-o"></i>&nbsp;Toggle notifications</a></li>
-                            <li class="nav-item disabled" id="toggle-notifications-audio"><a class="nav-link" href="" onclick="toggleChatNotificationAudio(); return false;"><i id="toggle-notifications-audio-icon" class="fa fa-volume-off"></i>&nbsp;Toggle sound</a></li>
+						<div class="dropdown-menu">
+							<a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="fa fa-circle online"></i>&nbsp;{{$online}}</a>
+							<a class="dropdown-item" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="fa fa-circle away"></i>&nbsp;{{$away}}</a>
+							<a class="dropdown-item" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="fa fa-circle leave"></i>&nbsp;{{$leave}}</a>
+                       					<div class="dropdown-divider"></div>
+                        				<a id="toggle-notifications" class="dropdown-item" href="" onclick="toggleChatNotifications(); return false;"><i id="toggle-notifications-icon" class="fa fa-bell-slash-o"></i>&nbsp;Toggle notifications</a>
+                        				<a id="toggle-notifications-audio" class="dropdown-item disabled" href="" onclick="toggleChatNotificationAudio(); return false;"><i id="toggle-notifications-audio-icon" class="fa fa-volume-off"></i>&nbsp;Toggle sound</a>
 							{{if $bookmark_link}}
-							<li class="divider"></li>
-							<li class="nav-item"><a class="nav-link" href="{{$bookmark_link}}" target="_blank" ><i class="fa fa-bookmark"></i>&nbsp;{{$bookmark}}</a></li>
+                         				<div class="dropdown-divider"></div>
+							<a class="dropdown-item" href="{{$bookmark_link}}" target="_blank" ><i class="fa fa-bookmark"></i>&nbsp;{{$bookmark}}</a>
 							{{/if}}
-						</ul>
+						</div>
 					</div>
 					<div id="chat-tools" class="btn-toolbar pull-left">
 						<div class="btn-group">
@@ -76,13 +76,13 @@
 							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 								<i id="more-tools-icon" class="fa fa-caret-up jot-icons"></i>
 							</button>
-							<ul class="dropdown-menu dropdown-menu-right" role="menu">
-								<li class="visible-xs"><a href="#" onclick="chatJotGetLink(); return false;" ><i class="fa fa-link"></i>&nbsp;{{$insert}}</a></li>
+							<div class="dropdown-menu dropdown-menu-right">
+								<a class="dropdown-item" href="#" onclick="chatJotGetLink(); return false;" ><i class="fa fa-link"></i>&nbsp;{{$insert}}</a>
 								{{if $feature_encrypt}}
-								<li class="divider"></li>
-								<li class="visible-xs"><a href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="fa fa-key"></i>&nbsp;{{$encrypt}}</a></li>
+								<div class="dropdown-divider"></div>
+								<a class="dropdown-item" href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="fa fa-key"></i>&nbsp;{{$encrypt}}</a>
 								{{/if}}
-							</ul>
+							</div>
 						</div>
 					</div>
 					<div id="chat-rotator-wrapper" class="pull-left">
@@ -150,7 +150,7 @@ function update_inroom(inroom) {
 	$.each( inroom, function(index, item) {
 		var newNode = document.createElement('div');
 		newNode.setAttribute('class', 'member-item');
-		$(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="name">' + item.name + '</span><br /><span class="' + item.status_class + '">' + item.status + '</span>');
+		$(newNode).html('<img class="dropdown-menu-img-xs" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="contactname">' + item.name + '</span><span class="' + item.status_class + '">' + item.status + '</span>');
 		html.appendChild(newNode);
 	});
     memberChange = chatRoomMembersChange(inroom); // get list of arrivals and departures
diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl
index ff4b79a4b..a81b8ec1e 100644
--- a/view/tpl/chatroomlist.tpl
+++ b/view/tpl/chatroomlist.tpl
@@ -1,9 +1,9 @@
 <div id="chatroom_list" class="widget">
 	<h3>{{$header}}</h3>
-	<ul class="nav nav-pills nav-stacked">
-		<li><a href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
+	<ul class="nav nav-pills flex-column">
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
 		{{foreach $items as $item}}
-		<li><a href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 1868f926d..80a249743 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -4,10 +4,10 @@
 </div>
 <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
-	<div id="thread-wrapper-{{$item.id}}" class="clearfix thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} mb-4 generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
+	<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} mb-4 generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
 		<a name="item_{{$item.id}}" ></a>
-		<div class="clearfix wall-item-outside-wrapper{{if $item.is_comment}} comment{{/if}}{{if $item.previewing}} preview{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
-			<div class="clearfix wall-item-content-wrapper{{if $item.is_comment}} comment{{/if}}" id="wall-item-content-wrapper-{{$item.id}}" style="clear:both;">
+		<div class="wall-item-outside-wrapper{{if $item.is_comment}} comment{{/if}}{{if $item.previewing}} preview{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
+			<div class="clearfix wall-item-content-wrapper{{if $item.is_comment}} comment{{/if}}" id="wall-item-content-wrapper-{{$item.id}}">
 				{{if $item.photo}}
 				<div class="wall-photo-item" id="wall-photo-item-{{$item.id}}">
 					{{$item.photo}}
@@ -26,12 +26,11 @@
 				<hr class="m-0">
 				{{/if}}
 				{{/if}}
-				<div class="p-2 wall-item-head{{if $item.is_new && !$item.title && !$item.event && !$item.is_comment}} wall-item-head-new rounded-top{{/if}} clearfix">
+				<div class="p-2 clearfix wall-item-head{{if $item.is_new && !$item.title && !$item.event && !$item.is_comment}} wall-item-head-new rounded-top{{/if}}">
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
 						<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
 							<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-photo-link u-url" id="wall-item-photo-link-{{$item.id}}"><img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}} u-photo p-name" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" /></a>
 						</div>
-						<div class="wall-item-photo-end" style="clear:both"></div>
 					</div>
 					{{if $item.lock}}
 					<div class="wall-item-lock dropdown">
@@ -58,7 +57,7 @@
 				<div class="p-2 wall-item-tools clearfix">
 
 					<div class="body-tags">
-						<span class="tag">{{$item.mentions}} {{$item.tags}} {{$item.categories}}</span>
+						<span class="tag">{{$item.mentions}} {{$item.tags}} {{$item.categories}} {{$item.folders}}</span>
 					</div>
 				{{**
 					{{if $item.mentions}}
@@ -76,12 +75,12 @@
 						<span class="tag p-category">{{$item.categories}}</span>
 					</div>
 					{{/if}}
-				**}}
 					{{if $item.folders}}
 					<div class="body-tags" id="item-folders">
 						<span class="tag">{{$item.folders}}</span>
 					</div>
 					{{/if}}
+				**}}
 				</div>
 				{{/if}}
 				<div class="p-2 clearfix wall-item-tools">
@@ -93,7 +92,7 @@
 							</button>
 							<div class="dropdown-menu dropdown-menu-right">
 							{{foreach $item.reactions as $react}}
-								<a class="dropdown-item" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="dropdown-menu-img-sm" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a>
+								<a class="dropdown-item clearfix" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="menu-img-2" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a>
 							{{/foreach}}
 							</div>
 						</div>
@@ -173,24 +172,20 @@
 								{{if $item.star}}
 								<a class="dropdown-item" href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-star {{$item.star.isstarred}}" title="{{$item.star.toggle}}"></i>{{$item.star.toggle}}</a>
 								{{/if}}
-
 								{{if $item.thread_action_menu}}
 								{{foreach $item.thread_action_menu as $mitem}}
 								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} ><i class="generic-icons-nav fa fa-fw fa-{{$mitem.icon}}"></i>{{$mitem.title}}</a>
 								{{/foreach}}
 								{{/if}}
-
 								{{if $item.drop.dropping}}
 								<a class="dropdown-item" href="#" onclick="dropItem('item/drop/{{$item.id}}', '#thread-wrapper-{{$item.id}}'); return false;" title="{{$item.drop.delete}}" ><i class="generic-icons-nav fa fa-fw fa-trash-o"></i>{{$item.drop.delete}}</a>
 								{{/if}}
-
 								{{if $item.thread_author_menu}}
 								<div class="dropdown-divider"></div>
 								{{foreach $item.thread_author_menu as $mitem}}
 								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
 								{{/foreach}}
 								{{/if}}
-
 								{{if $item.edpost && $item.dreport}}
 								<a class="dropdown-item" href="dreport/{{$item.mid}}">{{$item.dreport}}</a>
 								{{/if}}
diff --git a/view/tpl/conv_list.tpl b/view/tpl/conv_list.tpl
index d7b4a8ff4..e31ffea25 100755
--- a/view/tpl/conv_list.tpl
+++ b/view/tpl/conv_list.tpl
@@ -4,10 +4,10 @@
 </div>
 <div id="collapsed-comments-{{$item.id}}" class="collapsed-comments" style="display: none;">
 {{/if}}
-	<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper conv-list-mode{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper{{/if}}">
-		<a name="{{$item.id}}" ></a>
-		<div class="wall-item-outside-wrapper {{$item.indent}}{{$item.previewing}}" 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 id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} mb-4 generic-content-wrapper h-entry {{else}} u-comment h-cite {{/if}} item_{{$item.submid}}">
+		<a name="item_{{$item.id}}" ></a>
+		<div class="wall-item-outside-wrapper{{if $item.is_comment}} comment{{/if}}{{if $item.previewing}} preview{{/if}}" id="wall-item-outside-wrapper-{{$item.id}}" >
+			<div class="clearfix wall-item-content-wrapper{{if $item.is_comment}} comment{{/if}}" id="wall-item-content-wrapper-{{$item.id}}">
 				{{if $item.photo}}
 				<div class="wall-photo-item" id="wall-photo-item-{{$item.id}}">
 					{{$item.photo}}
@@ -18,39 +18,48 @@
 					{{$item.event}}
 				</div>
 				{{/if}}
-				<div class="wall-item-head">
+				{{if $item.title && !$item.event}}
+				<div class="p-2{{if $item.is_new}} bg-primary text-white{{/if}} wall-item-title h3{{if !$item.photo}} rounded-top{{/if}}" id="wall-item-title-{{$item.id}}">
+					{{if $item.title_tosource}}{{if $item.plink}}<a href="{{$item.plink.href}}" title="{{$item.title}} ({{$item.plink.title}})">{{/if}}{{/if}}{{$item.title}}{{if $item.title_tosource}}{{if $item.plink}}</a>{{/if}}{{/if}}
+				</div>
+				{{if ! $item.is_new}}
+				<hr class="m-0">
+				{{/if}}
+				{{/if}}
+				<div class="p-2 clearfix wall-item-head{{if $item.is_new && !$item.title && !$item.event && !$item.is_comment}} wall-item-head-new rounded-top{{/if}}">
 					<div class="wall-item-info" 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 class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}} h-card p-author" id="wall-item-photo-wrapper-{{$item.id}}">
+							<a href="{{$item.profile_url}}" title="{{$item.linktitle}}" class="wall-item-photo-link u-url" id="wall-item-photo-link-{{$item.id}}"><img src="{{$item.thumb}}" class="wall-item-photo{{$item.sparkle}} u-photo p-name" 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}}" title="{{$item.title}}">
-					<h3>{{if $item.title_tosource}}{{if $item.plink}}<a href="{{$item.plink.href}}" title="{{$item.title}} ({{$item.plink.title}})">{{/if}}{{/if}}{{$item.title}}{{if $item.title_tosource}}{{if $item.plink}}</a>{{/if}}{{/if}}</h3>
 					</div>
-					{{/if}}
 					{{if $item.lock}}
 					<div class="wall-item-lock dropdown">
-						<i class="fa fa-lock lockview dropdown-toggle" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;
+						<i class="fa fa-lock lockview dropdown-toggle" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i>&nbsp;
+						<div id="panel-{{$item.id}}" class="dropdown-menu"></div>
 					</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="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></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.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
+						{{if $item.verified}}<i class="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></i>&nbsp;{{/if}}{{if $item.location}}<span class="wall-item-location p-location" id="wall-item-location-{{$item.id}}">{{$item.location}},&nbsp;</span>{{/if}}<span class="autotime" title="{{$item.isotime}}"><time class="dt-published" datetime="{{$item.isotime}}">{{$item.localtime}}</time>{{if $item.editedtime}}&nbsp;{{$item.editedtime}}{{/if}}{{if $item.expiretime}}&nbsp;{{$item.expiretime}}{{/if}}</span>{{if $item.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
 					</div>
-					<div class="clear"></div>
 				</div>
-				<div class="{{if $item.is_photo}}wall-photo-item{{else}}wall-item-content{{/if}}" id="wall-item-content-{{$item.id}}">
-					<div class="wall-item-body" id="wall-item-body-{{$item.id}}" >
+
+				{{if $item.body}}
+				<div class="p-2 wall-item-content clearfix" id="wall-item-content-{{$item.id}}">
+					<div class="wall-item-body e-content" id="wall-item-body-{{$item.id}}" >
 						{{$item.body}}
 					</div>
-					<div class="clear"></div>
 				</div>
+				{{/if}}
 				{{if $item.has_tags}}
-				<div class="wall-item-tools">
+				<div class="p-2 wall-item-tools clearfix">
+
+					<div class="body-tags">
+						<span class="tag">{{$item.mentions}} {{$item.tags}} {{$item.categories}} {{$item.folders}}</span>
+					</div>
+				{{**
 					{{if $item.mentions}}
 					<div class="body-tags" id="item-mentions">
 						<span class="tag">{{$item.mentions}}</span>
@@ -63,7 +72,7 @@
 					{{/if}}
 					{{if $item.categories}}
 					<div class="body-tags" id="item-categories">
-						<span class="tag">{{$item.categories}}</span>
+						<span class="tag p-category">{{$item.categories}}</span>
 					</div>
 					{{/if}}
 					{{if $item.folders}}
@@ -71,84 +80,117 @@
 						<span class="tag">{{$item.folders}}</span>
 					</div>
 					{{/if}}
-					<div class="clear"></div>
+				**}}
 				</div>
 				{{/if}}
-
-				<div class="wall-item-tools">
-					<div class="wall-item-tools-right btn-group pull-right">
-						{{if $item.like}}
-						<button type="button" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'like'); return false">
-							<i class="fa fa-thumbs-o-up" title="{{$item.like.0}}"></i>
-						</button>
-						{{/if}}
-						{{if $item.dislike}}
-						<button type="button" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'dislike'); return false">
-							<i class="fa fa-thumbs-o-down" title="{{$item.dislike.0}}"></i>
-						</button>
-						{{/if}}
-
-						{{if $item.isevent}}
-						<button type="button" title="{{$item.attend.0}}" class="btn btn-outline-secondary btn-sm" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendyes'); return false;">
-							<i class="fa fa-check" ></i>
-						</button>
-						<button type="button" title="{{$item.attend.1}}" class="btn btn-outline-secondary btn-sm" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendno'); return false;">
-							<i class="fa fa-times" ></i>
-						</button>
-						<button type="button" title="{{$item.attend.2}}" class="btn btn-outline-secondary btn-sm" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendmaybe'); return false;">
-							<i class="fa fa-question" ></i>
-						</button>
-						{{/if}}
-
-						{{if $item.canvote}}
-						<button type="button" title="{{$item.conlabels.0}}" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'agree'); return false;">
-							<i class="fa fa-check" ></i>
-						</button>
-						<button type="button" title="{{$item.conlabels.1}}" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'disagree'); return false;">
-							<i class="fa fa-times" ></i>
-						</button>
-						<button type="button" title="{{$item.conlabels.2}}" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'abstain'); return false;">
-							<i class="fa fa-question" ></i>
-						</button>
+				<div class="p-2 clearfix wall-item-tools">
+					<div class="wall-item-tools-right pull-right">
+						{{if $item.toplevel && $item.emojis && $item.reactions}}
+						<div class="btn-group dropdown">
+							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-react-{{$item.id}}">
+								<i class="fa fa-smile-o"></i>
+							</button>
+							<div class="dropdown-menu dropdown-menu-right">
+							{{foreach $item.reactions as $react}}
+								<a class="dropdown-item clearfix" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="menu-img-2" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a>
+							{{/foreach}}
+							</div>
+						</div>
 						{{/if}}
-
-						<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
-							<i class="fa fa-cog"></i>
-						</button>
-						<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
-							{{if $item.share}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="jotShare({{$item.id}}); return false"><i class="fa fa-retweet" title="{{$item.share.0}}"></i> {{$item.share.0}}</a></li>
-							{{/if}}
-							{{if $item.plink}}
-							<li role="presentation"><a role="menuitem" href="{{$item.plink.href}}" title="{{$item.plink.title}}" ><i class="fa fa-external-link"></i> {{$item.plink.title}}</a></li>
-							{{/if}}
-							{{if $item.edpost}}
-							<li role="presentation"><a role="menuitem" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="editpost fa fa-pencil"></i> {{$item.edpost.1}}</a></li>
-							{{/if}}
-							{{if $item.tagger}}
-							<li role="presentation"><a role="menuitem" href="#"  onclick="itemTag({{$item.id}}); return false;"><i id="tagger-{{$item.id}}" class="fa fa-tag" title="{{$item.tagger.tagit}}"></i> {{$item.tagger.tagit}}</a></li>
-							{{/if}}
-							{{if $item.filer}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="itemFiler({{$item.id}}); return false;"><i id="filer-{{$item.id}}" class="fa fa-folder-open" title="{{$item.filer}}"></i> {{$item.filer}}</a></li>
-							{{/if}}
-							{{if $item.bookmark}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="itemBookmark({{$item.id}}); return false;"><i id="bookmarker-{{$item.id}}" class="fa fa-bookmark" title="{{$item.bookmark}}"></i> {{$item.bookmark}}</a></li>
-							{{/if}}
-							{{if $item.addtocal}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="itemAddToCal({{$item.id}}); return false;"><i id="addtocal-{{$item.id}}" class="fa fa-calendar" title="{{$item.addtocal}}"></i> {{$item.addtocal}}</a></li>
+						<div class="btn-group dropdown">
+							{{if $item.like}}
+							<button type="button" title="{{$item.like.0}}" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'like'); return false;">
+								<i class="fa fa-thumbs-o-up{{if $item.my_responses.like}} ivoted{{/if}}" ></i>
+							</button>
 							{{/if}}
-							{{if $item.star}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="fa fa-star {{$item.star.isstarred}}" title="{{$item.star.toggle}}"></i> {{$item.star.toggle}}</a></li>
+							{{if $item.dislike}}
+							<button type="button" title="{{$item.dislike.0}}" class="btn btn-outline-secondary btn-sm" onclick="dolike({{$item.id}},'dislike'); return false;">
+								<i class="fa fa-thumbs-o-down{{if $item.my_responses.dislike}} ivoted{{/if}}" ></i>
+							</button>
 							{{/if}}
-							{{if $item.drop.dropping}}
-							<li role="presentation"><a role="menuitem" href="#" onclick="dropItem('item/drop/{{$item.id}}', '#thread-wrapper-{{$item.id}}'); return false;" title="{{$item.drop.delete}}" ><i class="fa fa-trash-o"></i> {{$item.drop.delete}}</a></li>
+							{{if $item.isevent}}
+							<div class="btn-group dropdown">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-attend-menu-{{$item.id}}" title="{{$item.attend_title}}">
+									<i class="fa fa-calendar-check-o"></i>
+								</button>
+								<div class="dropdown-menu">
+									<a class="dropdown-item" href="#" title="{{$item.attend.0}}" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendyes'); return false;">
+										<i class="item-act-list fa fa-check{{if $item.my_responses.attend}} ivoted{{/if}}" ></i> {{$item.attend.0}}
+									</a>
+									<a class="dropdown-item" href="#" title="{{$item.attend.1}}" onclick="itemAddToCal({{$item.id}}), dolike({{$item.id}},'attendno'); return false;">
+										<i class="item-act-list fa fa-times{{if $item.my_responses.attendno}} ivoted{{/if}}" ></i> {{$item.attend.1}}
+									</a>
+									<a class="dropdown-item" href="#" title="{{$item.attend.2}}" onclick="itemAddToCal({{$item.id}}); dolike({{$item.id}},'attendmaybe'); return false;">
+										<i class="item-act-list fa fa-question{{if $item.my_responses.attendmaybe}} ivoted{{/if}}" ></i> {{$item.attend.2}}
+									</a>
+								</div>
+							</div>
 							{{/if}}
-							{{if $item.item_photo_menu}}
-							<li role="presentation" class="divider"></li>
-							{{$item.item_photo_menu}}
+							{{if $item.canvote}}
+							<div class="btn-group dropdown">
+								<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-consensus-menu-{{$item.id}}" title="{{$item.vote_title}}">
+									<i class="fa fa-check-square-o"></i>
+								</button>
+								<div class="dropdown-menu" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
+									<a class="dropdown-item" href="#" title="{{$item.conlabels.0}}" onclick="dolike({{$item.id}},'agree'); return false;">
+										<i class="item-act-list fa fa-check{{if $item.my_responses.agree}} ivoted{{/if}}" ></i> {{$item.conlabels.0}}
+									</a>
+									<a class="dropdown-item" href="#" title="{{$item.conlabels.1}}" onclick="dolike({{$item.id}},'disagree'); return false;">
+										 <i class="item-act-list fa fa-times{{if $item.my_responses.disagree}} ivoted{{/if}}" ></i> {{$item.conlabels.1}}
+									</a> 
+									<a class="dropdown-item" href="#" title="{{$item.conlabels.2}}" onclick="dolike({{$item.id}},'abstain'); return false;">
+										<i class="item-act-list fa fa-question{{if $item.my_responses.abstain}} ivoted{{/if}}" ></i> {{$item.conlabels.2}}
+									</a>
+								</div>
+							</div>
 							{{/if}}
-
-						</ul>
+							<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" id="wall-item-menu-{{$item.id}}">
+								<i class="fa fa-cog"></i>
+							</button>
+							<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
+								{{if $item.share}}
+								<a class="dropdown-item" href="#" onclick="jotShare({{$item.id}}); return false"><i class="generic-icons-nav fa fa-fw fa-retweet" title="{{$item.share.0}}"></i>{{$item.share.0}}</a>
+								{{/if}}
+								{{if $item.plink}}
+								<a class="dropdown-item" href="{{$item.plink.href}}" title="{{$item.plink.title}}" class="u-url"><i class="generic-icons-nav fa fa-fw fa-external-link"></i>{{$item.plink.title}}</a>
+								{{/if}}
+								{{if $item.edpost}}
+								<a class="dropdown-item" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="generic-icons-nav fa fa-fw fa-pencil"></i>{{$item.edpost.1}}</a>
+								{{/if}}
+								{{if $item.tagger}}
+								<a class="dropdown-item" href="#"  onclick="itemTag({{$item.id}}); return false;"><i id="tagger-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-tag" title="{{$item.tagger.tagit}}"></i>{{$item.tagger.tagit}}</a>
+								{{/if}}
+								{{if $item.filer}}
+								<a class="dropdown-item" href="#" onclick="itemFiler({{$item.id}}); return false;"><i id="filer-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-folder-open" title="{{$item.filer}}"></i>{{$item.filer}}</a>
+								{{/if}}
+								{{if $item.bookmark}}
+								<a class="dropdown-item" href="#" onclick="itemBookmark({{$item.id}}); return false;"><i id="bookmarker-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-bookmark" title="{{$item.bookmark}}"></i>{{$item.bookmark}}</a>
+								{{/if}}
+								{{if $item.addtocal}}
+								<a class="dropdown-item" href="#" onclick="itemAddToCal({{$item.id}}); return false;"><i id="addtocal-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-calendar" title="{{$item.addtocal}}"></i>{{$item.addtocal}}</a>
+								{{/if}}
+								{{if $item.star}}
+								<a class="dropdown-item" href="#" onclick="dostar({{$item.id}}); return false;"><i id="starred-{{$item.id}}" class="generic-icons-nav fa fa-fw fa-star {{$item.star.isstarred}}" title="{{$item.star.toggle}}"></i>{{$item.star.toggle}}</a>
+								{{/if}}
+								{{if $item.thread_action_menu}}
+								{{foreach $item.thread_action_menu as $mitem}}
+								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} ><i class="generic-icons-nav fa fa-fw fa-{{$mitem.icon}}"></i>{{$mitem.title}}</a>
+								{{/foreach}}
+								{{/if}}
+								{{if $item.drop.dropping}}
+								<a class="dropdown-item" href="#" onclick="dropItem('item/drop/{{$item.id}}', '#thread-wrapper-{{$item.id}}'); return false;" title="{{$item.drop.delete}}" ><i class="generic-icons-nav fa fa-fw fa-trash-o"></i>{{$item.drop.delete}}</a>
+								{{/if}}
+								{{if $item.thread_author_menu}}
+								<div class="dropdown-divider"></div>
+								{{foreach $item.thread_author_menu as $mitem}}
+								<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a>
+								{{/foreach}}
+								{{/if}}
+								{{if $item.edpost && $item.dreport}}
+								<a class="dropdown-item" href="dreport/{{$item.mid}}">{{$item.dreport}}</a>
+								{{/if}}
+							</div>
+						</div>
 					</div>
 					<div id="like-rotator-{{$item.id}}" class="like-rotator"></div>
 					<div class="wall-item-tools-left{{if $item.unseen_comments || $item.like_count || $item.dislike_count || $item.attachments}} btn-group{{/if}}">
@@ -159,9 +201,9 @@
 						</div>
 						{{/if}}
 						<div class="wall-item-list-comments btn-group">
-							<button class="btn btn-outline-secondary btn-sm" onclick="window.location.href='{{$item.viewthread}}'; return false;">
+							<a class="btn btn-outline-secondary btn-sm" href="{{$item.viewthread}}">
 								{{$item.comment_count_txt}}{{if $item.unseen_comments}}<span class="unseen-wall-indicator-{{$item.id}}">, {{$item.list_unseen_txt}}</span>{{/if}}
-							</button>
+							</a>
 						</div>
 						{{if $item.unseen_comments}}
 						<div class="unseen-wall-indicator-{{$item.id}} btn-group">
@@ -176,9 +218,9 @@
 						<div class="btn-group">
 							<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="wall-item-{{$verb}}-{{$item.id}}">{{$response.count}} {{$response.button}}</button>
 							{{if $response.list_part}}
-							<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-{{$verb}}-{{$item.id}}">{{foreach $response.list_part as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
+							<div class="dropdown-menu">{{foreach $response.list_part as $liker}}{{$liker}}{{/foreach}}</div>
 							{{else}}
-							<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-{{$verb}}-{{$item.id}}">{{foreach $response.list as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
+							<div class="dropdown-menu">{{foreach $response.list as $liker}}{{$liker}}{{/foreach}}</div>
 							{{/if}}
 							{{if $response.list_part}}
 							<div class="modal" id="{{$verb}}Modal-{{$item.id}}">
@@ -188,8 +230,8 @@
 											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 											<h4 class="modal-title">{{$response.title}}</h4>
 										</div>
-										<div class="modal-body">
-										<ul>{{foreach $response.list as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
+										<div class="modal-body response-list">
+											<ul class="nav nav-pills flex-column">{{foreach $response.list as $liker}}<li class="nav-item">{{$liker}}</li>{{/foreach}}</ul>
 										</div>
 										<div class="modal-footer clear">
 											<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$item.modal_dismiss}}</button>
@@ -203,11 +245,8 @@
 						{{/foreach}}
 						{{/if}}
 					</div>
-					<div class="clear"></div>
 				</div>
-				<div class="clear"></div>
 			</div>
-			<div class="clear{{if $indent}} {{$indent}}{{/if}}"></div>
 		</div>
 	</div>
 {{if $item.comment_lastcollapsed}}
diff --git a/view/tpl/field_combobox.tpl b/view/tpl/field_combobox.tpl
index 523595c0b..12d00a08d 100755
--- a/view/tpl/field_combobox.tpl
+++ b/view/tpl/field_combobox.tpl
@@ -1,17 +1,18 @@
-	<div class='field combobox input form-group'>
-		<label class="mainlabel" for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label>
-		{{*
-		<input id="id_{{$field.0}}" type="text" list="data_{{$field.0}}" >
-		<datalist id="data_{{$field.0}}" >
-		   {{foreach $field.4 as $opt=>$val}}<option value="{{$val}}">{{/foreach}}
-		</datalist>*}} 
-		
-		<input id="id_{{$field.0}}" class="form-control" type="text" value="{{$field.2}}">
-		<select id="select_{{$field.0}}" class="form-control" onChange="$('#id_{{$field.0}}').val($(this).val())">
-			<option value="">{{$field.5}}</option>
-			{{foreach $field.4 as $opt=>$val}}<option value="{{$val}}">{{$val}}</option>{{/foreach}}
-		</select>
-		
-		<span class='field_help'>{{$field.3}}</span>
-	</div>
+<div class="form-group">
+	<label class="" for='id_{{$field.0}}' id='id_{{$field.0}}_label'>{{$field.1}}</label>
+	<input class="form-control" id="id_{{$field.0}}" type="text" list="data_{{$field.0}}"{{if $field.5}} {{$field.5}}{{/if}}>
+	<datalist id="data_{{$field.0}}" >
+		{{foreach $field.4 as $opt=>$val}}
+		<option value="{{$val}}">
+		{{/foreach}}
+	</datalist>
+	{{**
+	<input id="id_{{$field.0}}" class="form-control" type="text" value="{{$field.2}}">
+	<select id="select_{{$field.0}}" class="form-control" onChange="$('#id_{{$field.0}}').val($(this).val())">
+		<option value="">{{$field.5}}</option>
+		{{foreach $field.4 as $opt=>$val}}<option value="{{$val}}">{{$val}}</option>{{/foreach}}
+	</select>
+	**}} 
+	<span class='field_help'>{{$field.3}}</span>
+</div>
 
diff --git a/view/tpl/fileas_widget.tpl b/view/tpl/fileas_widget.tpl
index a92440cb0..1754a794b 100755
--- a/view/tpl/fileas_widget.tpl
+++ b/view/tpl/fileas_widget.tpl
@@ -2,10 +2,10 @@
 	<h3>{{$title}}</h3>
 	<div id="nets-desc">{{$desc}}</div>
 	
-	<ul class="nav nav-pills nav-stacked">
-		<li><a href="{{$base}}"{{if $sel_all}} class="fileas-selected"{{/if}}>{{$all}}</a></li>
+	<ul class="nav nav-pills flex-column">
+		<li class="nav-item"><a class="nav-link" href="{{$base}}"{{if $sel_all}} class="fileas-selected"{{/if}}>{{$all}}</a></li>
 		{{foreach $terms as $term}}
-		<li><a href="{{$base}}?f=&file={{$term.name}}"{{if $term.selected}} class="fileas-selected"{{/if}}>{{$term.name}}</a></li>
+		<li class="nav-item"><a class="nav-link" href="{{$base}}?f=&file={{$term.name}}"{{if $term.selected}} class="fileas-selected"{{/if}}>{{$term.name}}</a></li>
 		{{/foreach}}
 	</ul>
 	
diff --git a/view/tpl/filer_dialog.tpl b/view/tpl/filer_dialog.tpl
index 71e075958..61860d10f 100755
--- a/view/tpl/filer_dialog.tpl
+++ b/view/tpl/filer_dialog.tpl
@@ -1,6 +1,19 @@
-<div class="item-filer-dialog">
-{{include file="field_combobox.tpl"}}
-<div class="settings-submit-wrapper" >
-	<input id="filer_save" type="button" class="settings-submit" value="{{$submit}}" />
-</div>
+<div class="modal" id="item-filer-dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{$title}}</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {{include file="field_combobox.tpl"}}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{$cancel}}</button>
+        <button id="filer_save" type="button" class="btn btn-primary">{{$submit}}</button>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/view/tpl/hdr.tpl b/view/tpl/hdr.tpl
index 5ab7d68fd..cccee2229 100644
--- a/view/tpl/hdr.tpl
+++ b/view/tpl/hdr.tpl
@@ -1,3 +1,3 @@
 <div id="nav-notifications-template" rel="template">
-	<a class="dropdown-item clearfix dropdown-notification {5}" href="{0}" title="{2} {3}"><img class="dropdown-menu-img-sm" data-src="{1}"><span class="contactname">{2}</span><span class="dropdown-sub-text">{3}<br>{4}</span></a>
+	<a class="dropdown-item clearfix dropdown-notification {5}" href="{0}" title="{2} {3}"><img class="menu-img-3" data-src="{1}"><span class="contactname">{2}</span><span class="dropdown-sub-text">{3}<br>{4}</span></a>
 </div>
diff --git a/view/tpl/item_attach.tpl b/view/tpl/item_attach.tpl
index 83cc9a3cd..711b72e76 100644
--- a/view/tpl/item_attach.tpl
+++ b/view/tpl/item_attach.tpl
@@ -1,5 +1,5 @@
 {{if $attaches}}
 {{foreach $attaches as $a}}
-<li><a href="{{$a.url}}" title="{{$a.title}}"><i class="fa {{$a.icon}} attach-icons"></i>&nbsp;{{$a.label}}</a></li>
+<a class="dropdwn-item" href="{{$a.url}}" title="{{$a.title}}"><i class="fa {{$a.icon}} attach-icons"></i>&nbsp;{{$a.label}}</a>
 {{/foreach}}
 {{/if}}
diff --git a/view/tpl/item_filer.tpl b/view/tpl/item_filer.tpl
index 0cde5caf7..4eb621f93 100644
--- a/view/tpl/item_filer.tpl
+++ b/view/tpl/item_filer.tpl
@@ -1,8 +1,8 @@
 {{if $categories}}
-<div class="filesavetags">
+<!--div class="filesavetags"-->
 {{foreach $categories as $cat}}
-<span class="item-category"><i class="fa fa-folder cat-icons"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="category-remove-link" title="{{$remove}}"><i class="fa fa-trash-o drop-icons"></i></a></span>
+<span class="item-category badge badge-pill badge-danger"><i class="fa fa-folder-o"></i>&nbsp;{{$cat.term}}&nbsp;<a href="{{$cat.removelink}}" class="text-white" title="{{$remove}}"><i class="fa fa-close"></i></a></span>
 {{/foreach}}
-</div>
+<!--/div-->
 {{/if}}
 
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index d846f3e34..535e6c66c 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -340,18 +340,12 @@ function enableOnUser(){
 	}
 
 	function itemFiler(id) {
-
-		var bordercolor = $("input").css("border-color");
+		if($('#item-filer-dialog').length)
+			$('#item-filer-dialog').remove();
 
 		$.get('filer/', function(data){
-			$.colorbox({html:data});
-			$("#id_term").keypress(function(){
-				$(this).css("border-color",bordercolor);
-			})
-			$("#select_term").change(function(){
-				$("#id_term").css("border-color",bordercolor);
-			})
-
+			$('body').append(data);
+			$('#item-filer-dialog').modal('show');
 			$("#filer_save").click(function(e){
 				e.preventDefault();
 				reply = $("#id_term").val();
@@ -362,9 +356,7 @@ function enableOnUser(){
 //					if(timer) clearTimeout(timer);
 //					timer = setTimeout(NavUpdate,3000);
 					liking = 1;
-					$.colorbox.close();
-				} else {
-					$("#id_term").css("border-color","#FF0000");
+					$('#item-filer-dialog').modal('hide');
 				}
 				return false;
 			});
diff --git a/view/tpl/search_item.tpl b/view/tpl/search_item.tpl
index aa7e3aa5d..89ac927aa 100755
--- a/view/tpl/search_item.tpl
+++ b/view/tpl/search_item.tpl
@@ -1,7 +1,7 @@
-<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} generic-content-wrapper{{/if}}">
+<div id="thread-wrapper-{{$item.id}}" class="thread-wrapper{{if $item.toplevel}} {{$item.toplevel}} mb-4 clearfix generic-content-wrapper{{/if}}">
 	<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="clearfix 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}}">
 			{{if $item.photo}}
 			<div class="wall-photo-item" id="wall-photo-item-{{$item.id}}">
 				{{$item.photo}}
@@ -12,18 +12,20 @@
 				{{$item.event}}
 			</div>
 			{{/if}}
-			<div class="wall-item-head">
+			{{if $item.title && !$item.event}}
+			<div class="p-2{{if $item.is_new}} bg-primary text-white{{/if}} wall-item-title h3{{if !$item.photo}} rounded-top{{/if}}" id="wall-item-title-{{$item.id}}">
+				{{if $item.title_tosource}}{{if $item.plink}}<a href="{{$item.plink.href}}" title="{{$item.title}} ({{$item.plink.title}})">{{/if}}{{/if}}{{$item.title}}{{if $item.title_tosource}}{{if $item.plink}}</a>{{/if}}{{/if}}
+			</div>
+			{{if ! $item.is_new}}
+			<hr class="m-0">
+			{{/if}}
+			{{/if}}
+			<div class="p-2 clearfix wall-item-head{{if $item.is_new && !$item.title && !$item.event && !$item.is_comment}} wall-item-head-new rounded-top{{/if}}">
 				<div class="wall-item-info" 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}}" title="{{$item.title}}">
-				<h3>{{if $item.title_tosource}}{{if $item.plink}}<a href="{{$item.plink.href}}" title="{{$item.title}} ({{$item.plink.title}})">{{/if}}{{/if}}{{$item.title}}{{if $item.title_tosource}}{{if $item.plink}}</a>{{/if}}{{/if}}</h3>
 				</div>
-				{{/if}}
 				{{if $item.lock}}
 				<div class="wall-item-lock dropdown">
 					<i class="fa fa-lock lockview dropdown-toggle" data-toggle="dropdown" title="{{$item.lock}}" onclick="lockview('item',{{$item.id}});" ></i><ul id="panel-{{$item.id}}" class="lockview-panel dropdown-menu"></ul>&nbsp;
@@ -35,16 +37,20 @@
 				<div class="wall-item-ago"  id="wall-item-ago-{{$item.id}}">
 					{{if $item.verified}}<i class="fa fa-check item-verified" title="{{$item.verified}}"></i>&nbsp;{{elseif $item.forged}}<i class="fa fa-exclamation item-forged" title="{{$item.forged}}"></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.editedtime}}&nbsp;<i class="fa fa-pencil"></i>{{/if}}&nbsp;{{if $item.app}}<span class="item.app">{{$item.str_app}}</span>{{/if}}
 				</div>
-				<div class="clear"></div>
 			</div>
-			<div class="{{if $item.is_photo}}wall-photo-item{{else}}wall-item-content{{/if}}" id="wall-item-content-{{$item.id}}">
+			{{if $item.body}}
+			<div class="p-2 clrearfix {{if $item.is_photo}} wall-photo-item{{else}} wall-item-content{{/if}}" id="wall-item-content-{{$item.id}}">
 				<div class="wall-item-body" id="wall-item-body-{{$item.id}}" >
 					{{$item.body}}
 				</div>
-				<div class="clear"></div>
 			</div>
+			{{/if}}
 			{{if $item.has_tags}}
-			<div class="wall-item-tools">
+			<div class="p-2 wall-item-tools clearfix">
+				<div class="body-tags">
+					<span class="tag">{{$item.mentions}} {{$item.tags}} {{$item.categories}} {{$item.folders}}</span>
+				</div>
+			{{**
 				{{if $item.mentions}}
 				<div class="body-tags" id="item-mentions">
 					<span class="tag">{{$item.mentions}}</span>
@@ -65,48 +71,44 @@
 					<span class="tag">{{$item.folders}}</span>
 				</div>
 				{{/if}}
-				<div class="clear"></div>
+			**}}
 			</div>
 			{{/if}}
-			<div class="wall-item-tools">
+			<div class="p-2 clearfix wall-item-tools">
 				<div class="wall-item-tools-right btn-group pull-right">
 					<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
 						<i class="fa fa-cog"></i>
 					</button>
-					<ul class="dropdown-menu">
+					<div class="dropdown-menu dropdown-menu-right">
 						{{if $item.thread_action_menu}}
 						{{foreach $item.thread_action_menu as $mitem}}
-						<li role="presentation"><a role="menuitem" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} ><i class="fa fa-{{$mitem.icon}}"></i> {{$mitem.title}}</a></li>
+						<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} ><i class="fa fa-{{$mitem.icon}}"></i> {{$mitem.title}}</a></li>
 						{{/foreach}}
 						{{/if}}
 						{{if $item.drop.dropping}}
-						<li><a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}" ><i class="fa fa-trash-o"></i> {{$item.drop.delete}}</a></li>
+						<a class="dropdown-item" href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}" ><i class="fa fa-trash-o"></i> {{$item.drop.delete}}</a></li>
 						{{/if}}
 						{{if $item.thread_author_menu}}
-						<li role="presentation" class="divider"></li>
+						<div class="dropdown-divider"></div>
 						{{foreach $item.thread_author_menu as $mitem}}
-						<li role="presentation"><a role="menuitem" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a></li>
+						<a class="dropdown-item" {{if $mitem.href}}href="{{$mitem.href}}"{{/if}} {{if $mitem.action}}onclick="{{$mitem.action}}"{{/if}} {{if $mitem.title}}title="{{$mitem.title}}"{{/if}} >{{$mitem.title}}</a></li>
 						{{/foreach}}
 						{{/if}}
-					</ul>
+					</div>
 				</div>
 				{{if $item.attachments}}
 				<div class="wall-item-tools-left btn-group">
 					<button type="button" class="btn btn-outline-secondary btn-sm wall-item-like dropdown-toggle" data-toggle="dropdown" id="attachment-menu-{{$item.id}}"><i class="fa fa-paperclip"></i></button>
-					<ul class="dropdown-menu" role="menu" aria-labelledby="attachment-menu-{{$item.id}}">{{$item.attachments}}</ul>
+					<div class="dropdown-menu">{{$item.attachments}}</div>
 				</div>
 				{{/if}}
-				<div class="clear"></div>
 			</div>
-			<div class="clear"></div>
 		</div>
-		<div class="wall-item-wrapper-end"></div>
 		{{if $item.conv}}
-		<div class="wall-item-conv" id="wall-item-conv-{{$item.id}}" >
+		<div class="p-2 wall-item-conv" id="wall-item-conv-{{$item.id}}" >
 			<a href='{{$item.conv.href}}' id='context-{{$item.id}}' title='{{$item.conv.title}}'>{{$item.conv.title}}</a>
 		</div>
 		{{/if}}
-		<div class="clear{{if $indent}} {{$indent}}{{/if}}"></div>
 	</div>
 </div>