many dropdown and class fixes. still a long way to go...

11 files changed, 97 insertions, 93 deletions

diff --git a/view/tpl/common_tabs.tpl b/view/tpl/common_tabs.tpl
index fa6bfbdfa..43c66b042 100755
--- a/view/tpl/common_tabs.tpl
+++ b/view/tpl/common_tabs.tpl
@@ -1,8 +1,17 @@
-<div id="tabs-collapse-1" class="navbar-collapse collapse">
-	<ul class="nav nav-tabs nav-justified">
+<div id="tabs-collapse-1" class="hidden-sm-down">
+	<ul class="nav nav-tabs nav-fill">
 		{{foreach $tabs as $tab}}
-			<li class="{{$tab.sel}}" {{if $tab.id}}id="{{$tab.id}}"{{/if}}><a href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
+		<li class="nav-item"{{if $tab.id}} id="{{$tab.id}}"{{/if}}><a class="nav-link{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
-<div class="tabs-end"></div>
+<div class="hidden-md-up dropdown clearfix" style="position:fixed; right:7px; top:4rem; z-index:1020">
+	<button type="button" class="btn btn-outline-secondary btn-sm float-right" data-toggle="dropdown">
+		<i class="fa fa-bars"></i>
+	</button>
+	<div class="dropdown-menu dropdown-menu-right">
+		{{foreach $tabs as $tab}}
+		<a class="dropdown-item{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a>
+		{{/foreach}}
+	</div>
+</div>
diff --git a/view/tpl/connections.tpl b/view/tpl/connections.tpl
index 35dff8362..e5f2241e4 100755
--- a/view/tpl/connections.tpl
+++ b/view/tpl/connections.tpl
@@ -1,5 +1,5 @@
 <div class="generic-content-wrapper">
-	<div class="section-title-wrapper">
+	<div class="section-title-wrapper clearfix">
 		<div class="dropdown pull-right">
 			<button type="button" class="btn btn-primary btn-sm" onclick="openClose('contacts-search-form');">
 				<i class="fa fa-search"></i>&nbsp;{{$label}}
@@ -7,11 +7,11 @@
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-sort"></i>
 			</button>
-			<ul class="dropdown-menu">
+			<div class="dropdown-menu dropdown-menu-right">
 				{{foreach $tabs as $menu}}
-				<li><a href="{{$menu.url}}">{{$menu.label}}</a></li>
+				<a class="dropdown-item" href="{{$menu.url}}">{{$menu.label}}</a>
 				{{/foreach}}
-			</ul>
+			</div>
 		</div>
 		{{if $finding}}<h2>{{$finding}}</h2>{{else}}<h2>{{$header}}{{if $total}} ({{$total}}){{/if}}</h2>{{/if}}
 	</div>
@@ -25,11 +25,10 @@
 			</div>
 		</form>
 	</div>
-	<div id="connections-wrapper">
+	<div id="connections-wrapper clearfix">
 		{{foreach $contacts as $contact}}
 			{{include file="connection_template.tpl"}}
 		{{/foreach}}
-		<div id="page-end"></div>
 	</div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index 79317f146..1896ef66e 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -18,11 +18,10 @@
 					{{$item.event}}
 				</div>
 				{{/if}}
-				{{if $item.title}}
-				<div class="p-2 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>
+				{{if $item.title && !$item.event}}
+				<div class="p-2 bg-primary text-white wall-item-title h3{{if !$item.photo}} rounded-top{{/if}}" id="wall-item-title-{{$item.id}}" title="{{$item.title}}">
+					{{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>
-				<hr class="my-0">
 				{{/if}}
 				<div class="p-2 wall-item-head">
 					<div class="wall-item-info" id="wall-item-info-{{$item.id}}" >
@@ -33,7 +32,8 @@
 					</div>
 					{{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">
@@ -85,11 +85,11 @@
 							<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>
-							<ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="wall-item-react-{{$item.id}}">
+							<div class="dropdown-menu dropdown-menu-right">
 							{{foreach $item.reactions as $react}}
-								<li role="presentation"><a role="menuitem" href="#" onclick="jotReact({{$item.id}},'{{$react}}'); return false;"><img class="dropdown-menu-img-sm" src="/images/emoji/{{$react}}.png" alt="{{$react}}" /></a></li>
+								<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>
 							{{/foreach}}
-							</ul>
+							</div>
 						</div>
 						{{/if}}
 						<div class="btn-group dropdown">
@@ -108,17 +108,17 @@
 								<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>
-								<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-attend-menu-{{$item.id}}">
-									<li role="presentation"><a class="menuitem" 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>
-									</li>
-									<li role="presentation"><a class="menuitem" 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>
-									</li>
-									<li role="presentation"><a class="menuitem" 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>
-									</li>
-								</ul>
+								<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.canvote}}
@@ -126,69 +126,69 @@
 								<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>
-								<ul class="dropdown-menu" role="menu" aria-labelledby="wall-item-consensus-menu-{{$item.id}}">
-									<li role="presentation"><a class="menuitem" 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>
-									</li>
-									<li role="presentation"><a class="menuitem" 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> 
-									</li>
-									<li role="presentation"><a class="menuitem" 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>
-									</li>
-								</ul>
+								<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}}
 							<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 dropdown-menu-right" role="menu" aria-labelledby="wall-item-menu-{{$item.id}}">
+							<div class="dropdown-menu dropdown-menu-right" 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="generic-icons-nav fa fa-fw fa-retweet" title="{{$item.share.0}}"></i>{{$item.share.0}}</a></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="generic-icons-nav fa fa-fw fa-pencil"></i>{{$item.edpost.1}}</a></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<li role="presentation"><a role="menuitem" 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></li>
+								<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}}
-								<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="generic-icons-nav fa fa-fw 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="generic-icons-nav fa fa-fw fa-{{$mitem.icon}}"></i>{{$mitem.title}}</a>
 								{{/foreach}}
 								{{/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="generic-icons-nav fa fa-fw fa-trash-o"></i>{{$item.drop.delete}}</a></li>
+								<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}}
-								<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>
 								{{/foreach}}
 								{{/if}}
 
 								{{if $item.edpost && $item.dreport}}
-								<li role="presentation"><a role="menuitem" href="dreport/{{$item.mid}}">{{$item.dreport}}</a></li>
+								<a class="dropdown-item" href="dreport/{{$item.mid}}">{{$item.dreport}}</a>
 								{{/if}}
-							</ul>
+							</div>
 						</div>
 					</div>
 					<div id="like-rotator-{{$item.id}}" class="like-rotator"></div>
@@ -198,7 +198,7 @@
 						{{if $item.attachments}}
 						<div class="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}}
 						{{foreach $item.responses as $verb=>$response}}
@@ -206,9 +206,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}}">
@@ -219,7 +219,7 @@
 											<h4 class="modal-title">{{$response.title}}</h4>
 										</div>
 										<div class="modal-body response-list">
-										<ul class="nav nav-pills nav-stacked">{{foreach $response.list as $liker}}<li role="presentation">{{$liker}}</li>{{/foreach}}</ul>
+											<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>
diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index bc1f421bd..f0c9d916f 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -15,7 +15,7 @@
 				$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
 				$('aside').css('padding-top', aside_padding_top - $('nav').outerHeight() + 'px');
 				$('section').css('padding-top', section_padding_top  - $('nav').outerHeight() + 'px');
-				$('.navbar-fixed-top').css('position', 'relative');
+				$('.navbar').removeClass('fixed-top');
 				$('main').css('opacity', 0);
 				$('header').hide();
 			}
@@ -32,7 +32,7 @@
 			$('main').css('opacity', 1);
 			$('aside').css('padding-top', aside_padding_top + 'px');
 			$('section').css('padding-top', section_padding_top + 'px');
-			$('.navbar-fixed-top').css('position', '');
+			$('.navbar').addClass('fixed-top');
 			$('main').css('margin-top', '');
 			coverSlid = true;
 		}
@@ -47,7 +47,7 @@
 					$('aside').css('padding-top', aside_padding_top - $('nav').outerHeight() + 'px');
 					$('section').css('padding-top', section_padding_top  - $('nav').outerHeight() + 'px');
 
-					$('.navbar-fixed-top').css('position', 'relative');
+					$('.navbar').removeClass('fixed-top');
 					$('main').css('opacity', 0);
 					$('header').hide();
 				}
@@ -64,7 +64,7 @@
 			$('main').css('opacity', 1);
 			$('aside').css('padding-top', aside_padding_top + 'px');
 			$('section').css('padding-top', section_padding_top + 'px');
-			$('.navbar-fixed-top').css('position', '');
+			$('.navbar').addClass('fixed-top');
 			coverSlid = true;
 		}
 
diff --git a/view/tpl/directory_header.tpl b/view/tpl/directory_header.tpl
index 3b439684d..71e991f3a 100755
--- a/view/tpl/directory_header.tpl
+++ b/view/tpl/directory_header.tpl
@@ -1,24 +1,22 @@
 <div class="generic-content-wrapper">
-	<div class="section-title-wrapper">
+	<div class="section-title-wrapper clearfix">
 		<div class="btn-group pull-right">
 			<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{$sort}}">
 				<i class="fa fa-sort"></i>
 			</button>
-			<ul class="dropdown-menu">
-				<li><a href="directory?f=&order=date{{$suggest}}">{{$date}}</a></li>
-				<li><a href="directory?f=&order=normal{{$suggest}}">{{$normal}}</a></li>
-				<li><a href="directory?f=&order=reversedate{{$suggest}}">{{$reversedate}}</a></li>
-				<li><a href="directory?f=&order=reverse{{$suggest}}">{{$reverse}}</a></li>
-			</ul>
+			<div class="dropdown-menu dropdown-menu-right">
+				<a class="dropdown-item" href="directory?f=&order=date{{$suggest}}">{{$date}}</a>
+				<a class="dropdown-item" href="directory?f=&order=normal{{$suggest}}">{{$normal}}</a>
+				<a class="dropdown-item" href="directory?f=&order=reversedate{{$suggest}}">{{$reversedate}}</a>
+				<a class="dropdown-item" href="directory?f=&order=reverse{{$suggest}}">{{$reverse}}</a>
+			</div>
 		</div>
 		<h2>{{$dirlbl}}{{if $search}}:&nbsp;{{$safetxt}}{{/if}}</h2>
-		<div class="clear"></div>
 	</div>
 	{{foreach $entries as $entry}}
 		{{include file="direntry.tpl"}}
 	{{/foreach}}
 	<div id="page-end"></div>
-	<div class="clear"></div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
 <div id="page-spinner"></div>
diff --git a/view/tpl/direntry.tpl b/view/tpl/direntry.tpl
index a4a632845..f7ec7db23 100755
--- a/view/tpl/direntry.tpl
+++ b/view/tpl/direntry.tpl
@@ -1,5 +1,5 @@
 <div class="directory-item{{if $entry.safe}} safe{{/if}}" id="directory-item-{{$entry.hash}}" >
-	<div class="section-subtitle-wrapper">
+	<div class="section-subtitle-wrapper clearfix">
 		<div class="pull-right">
 			{{if $entry.viewrate}}
 				{{if $entry.total_ratings}}<a href="ratings/{{$entry.hash}}" id="dir-rating-{{$entry.hash}}" class="btn btn-outline-secondary btn-sm">{{$entry.total_ratings}}</a>{{/if}}
diff --git a/view/tpl/follow.tpl b/view/tpl/follow.tpl
index a211a65b6..240cc7b55 100755
--- a/view/tpl/follow.tpl
+++ b/view/tpl/follow.tpl
@@ -2,9 +2,9 @@
 	<h3>{{$connect}}</h3>
 	<form action="follow" method="post" />
 		<div class="input-group">
-			<input class="form-control input-sm" type="text" name="url" title="{{$hint}}" placeholder="{{$desc}}" />
+			<input class="form-control" type="text" name="url" title="{{$hint}}" placeholder="{{$desc}}" />
 			<div class="input-group-btn">
-				<button class="btn btn-success btn-sm" type="submit" name="submit" value="{{$follow}}" title="{{$follow}}"><i class="fa fa-fw fa-plus"></i></button>
+				<button class="btn btn-success" type="submit" name="submit" value="{{$follow}}" title="{{$follow}}"><i class="fa fa-fw fa-plus"></i></button>
 			</div>
 		</div>
 	</form>
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index ae12271b9..42f331fee 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -12,18 +12,18 @@
 {{/if}}
 <div class="navbar-toggler-right">
 	{{if $nav.help.6}}
-	<button id="context-help-btn" class="navbar-toggler" type="button" onclick="contextualHelp(); return false;">
+	<button id="context-help-btn" class="navbar-toggler border-0" type="button" onclick="contextualHelp(); return false;">
 		<i class="fa fa-question-circle"></i>
 	</button>
 	{{/if}}
-	<button id="expand-aside" type="button" class="navbar-toggler" data-toggle="offcanvas" data-target="#region_1">
+	<button id="expand-aside" type="button" class="navbar-toggler border-0" data-toggle="offcanvas" data-target="#region_1">
 		<i class="fa fa-arrow-circle-right" id="expand-aside-icon"></i>
 	</button>
-	<button id="expand-tabs" type="button" class="navbar-toggler" data-toggle="collapse" data-target="#tabs-collapse-1">
+	<!--button id="expand-tabs" type="button" class="navbar-toggler border-0" data-toggle="collapse" data-target="#tabs-collapse-1">
 		<i class="fa fa-arrow-circle-down" id="expand-tabs-icon"></i>
-	</button>
+	</button-->
 	{{if $localuser}}
-	<button id="notifications-btn" type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-1" style="color: grey;">
+	<button id="notifications-btn" type="button" class="navbar-toggler border-0" data-toggle="collapse" data-target="#navbar-collapse-1" style="color: grey;">
 		<i class="fa fa-exclamation-circle"></i>
 	</button>
 	{{/if}}
@@ -37,7 +37,7 @@
 		<img id="avatar" src="{{$userinfo.icon}}" alt="{{$userinfo.name}}">
 	</div>
 	{{if $localuser}}
-	<div class="dropdown-menu" role="menu" aria-labelledby="avatar">
+	<div class="dropdown-menu">
 		{{foreach $nav.usermenu as $usermenu}}
 		<a class="dropdown-item"  href="{{$usermenu.0}}" title="{{$usermenu.3}}" role="menuitem" id="{{$usermenu.4}}">{{$usermenu.1}}</a>
 		{{/foreach}}
diff --git a/view/tpl/peoplefind.tpl b/view/tpl/peoplefind.tpl
index f412533b5..82da8b9c9 100755
--- a/view/tpl/peoplefind.tpl
+++ b/view/tpl/peoplefind.tpl
@@ -2,9 +2,9 @@
 	<h3>{{$findpeople}}</h3>
 	<form action="directory" method="post" />
 		<div class="input-group form-group">
-			<input class="form-control input-sm" type="text" name="search" title="{{$hint}}{{if $advanced_search}}{{$advanced_hint}}{{/if}}" placeholder="{{$desc}}" />
+			<input class="form-control" type="text" name="search" title="{{$hint}}{{if $advanced_search}}{{$advanced_hint}}{{/if}}" placeholder="{{$desc}}" />
 			<div class="input-group-btn">
-				<button class="btn btn-outline-secondary btn-sm" type="submit" name="submit"><i class="fa fa-fw fa-search"></i></button>
+				<button class="btn btn-outline-secondary" type="submit" name="submit"><i class="fa fa-fw fa-search"></i></button>
 			</div>
 		</div>
 	</form>
diff --git a/view/tpl/saved_searches.tpl b/view/tpl/saved_searches.tpl
index 2065cd714..b62404fcc 100644
--- a/view/tpl/saved_searches.tpl
+++ b/view/tpl/saved_searches.tpl
@@ -1,14 +1,12 @@
-<div class="widget saved-search-widget">
+<div class="widget saved-search-widget clearfix">
 	<h3 id="search">{{$title}}</h3>
 	{{$searchbox}}
-	
-	<ul id="saved-search-list" class="nav nav-pills nav-stacked">
+	<ul id="saved-search-list" class="nav nav-pills flex-column">
 		{{foreach $saved as $search}}
-		<li id="search-term-{{$search.id}}">
-			<a class="pull-right group-edit-tool" title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" href="{{$search.dellink}}"><i id="dropfa-floppy-od-search-term-{{$search.id}}" class="group-edit-icon fa fa-trash-o" ></i></a>
-			<a id="saved-search-term-{{$search.id}}"{{if $search.selected}} class="search-selected"{{/if}} href="{{$search.srchlink}}">{{$search.displayterm}}</a>
+		<li class="nav-item nav-item-hack" id="search-term-{{$search.id}}">
+			<a class="nav-link widget-nav-pills-icons" title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" href="{{$search.dellink}}"><i id="dropfa-floppy-od-search-term-{{$search.id}}" class="fa fa-trash-o drop-icons" ></i></a>
+			<a id="saved-search-term-{{$search.id}}" class="nav-link{{if $search.selected}}  search-selected{{/if}}" href="{{$search.srchlink}}">{{$search.displayterm}}</a>
 		</li>
 		{{/foreach}}
 	</ul>
-	<div class="clear"></div>
 </div>
diff --git a/view/tpl/searchbox.tpl b/view/tpl/searchbox.tpl
index 99abd8745..eafade405 100644
--- a/view/tpl/searchbox.tpl
+++ b/view/tpl/searchbox.tpl
@@ -1,11 +1,11 @@
 <form action="{{$action_url}}" method="get" >
 	<input type="hidden" name="f" value="" />
 	<div id="{{$id}}" class="input-group">
-		<input class="widget-input" type="text" name="search" id="search-text" value="{{$s}}" onclick="this.submit();" />
+		<input class="form-control" type="text" name="search" id="search-text" value="{{$s}}" onclick="this.submit();" />
 		<div class="input-group-btn">
-			<button type="submit" name="submit" class="btn btn-outline-secondary btn-sm" id="search-submit" value="{{$search_label}}"><i class="fa fa-search"></i></button>
+			<button type="submit" name="submit" class="btn btn-outline-secondary" id="search-submit" value="{{$search_label}}"><i class="fa fa-search"></i></button>
 			{{if $savedsearch}}
-			<button type="submit" name="searchsave" class="btn btn-outline-secondary btn-sm" id="search-save" value="{{$save_label}}"><i class="fa fa-floppy-o"></i></button>
+			<button type="submit" name="searchsave" class="btn btn-outline-secondary" id="search-save" value="{{$save_label}}"><i class="fa fa-floppy-o"></i></button>
 			{{/if}}
 		</div>
 	</div>