bs4 fixes

9 files changed, 85 insertions, 290 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index e2adf8658..a956f762b 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -60,25 +60,11 @@
 }
 
 #profile-jot-text-loading {
-	float: left;
 	padding: 30px 0px 0px 12px;
 }
 
 #profile-jot-submit-wrapper {
 	border-top: 1px solid #ccc;
-	padding: 10px;
-}
-
-#profile-jot-perms-end {
-	height: 30px;
-}
-
-#profile-jot-plugin-wrapper {
-	margin-top: 10px;
-}
-
-#profile-rotator-wrapper {
-	float: left;
 }
 
 #profile-rotator {
@@ -121,6 +107,7 @@ a.wall-item-name-link {
 .wall-item-ago,
 .wall-item-ago i {
 	font-size: 0.75rem;
+	line-height: 1;
 }
 
 .wall-item-ago .fa-check {
diff --git a/view/js/acl.js b/view/js/acl.js
index 4dd60d303..e016158e9 100644
--- a/view/js/acl.js
+++ b/view/js/acl.js
@@ -333,20 +333,20 @@ ACL.prototype.update_view = function(value) {
 		type = itemid[0];
 		id   = itemid.substr(1);
 
-		btshow = $(this).children(".acl-button-show").removeClass("btn-success").addClass("btn-default");
-		bthide = $(this).children(".acl-button-hide").removeClass("btn-danger").addClass("btn-default");
+		btshow = $(this).children(".acl-button-show").removeClass("btn-success").addClass("btn-outline-success");
+		bthide = $(this).children(".acl-button-hide").removeClass("btn-danger").addClass("btn-outline-danger");
 
 		switch(type) {
 			case "g":
 				var uclass = "";
 				if (that.allow_gid.indexOf(id)>=0) {
-					btshow.removeClass("btn-default").addClass("btn-success");
-					bthide.removeClass("btn-danger").addClass("btn-default");
+					btshow.removeClass("btn-outline-success").addClass("btn-success");
+					bthide.removeClass("btn-danger").addClass("btn-outline-danger");
 					uclass="groupshow";
 				}
 				if (that.deny_gid.indexOf(id)>=0) {
-					btshow.removeClass("btn-success").addClass("btn-default");
-					bthide.removeClass("btn-default").addClass("btn-danger");
+					btshow.removeClass("btn-success").addClass("btn-outline-success");
+					bthide.removeClass("btn-outline-danger").addClass("btn-danger");
 					uclass = "grouphide";
 				}
 				$(that.group_uids[id]).each(function(i, v) {
@@ -366,13 +366,13 @@ ACL.prototype.update_view = function(value) {
 			case "c":
 				if (that.allow_cid.indexOf(id)>=0){
 					if(!$(this).hasClass("grouphide") ) {
-						btshow.removeClass("btn-default").addClass("btn-success");
-						bthide.removeClass("btn-danger").addClass("btn-default");
+						btshow.removeClass("btn-outline-success").addClass("btn-success");
+						bthide.removeClass("btn-danger").addClass("btn-outline-danger");
 					}
 				}
 				if (that.deny_cid.indexOf(id)>=0){
-					btshow.removeClass("btn-success").addClass("btn-default");
-					bthide.removeClass("btn-default").addClass("btn-danger");
+					btshow.removeClass("btn-success").addClass("btn-outline-success");
+					bthide.removeClass("btn-outline-danger").addClass("btn-danger");
 					$(this).removeClass("groupshow");
 				}
 		}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index f7833a2bc..e7d70d35c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -77,6 +77,11 @@ h6, .h6 {
 	font-size: 0.75rem;
 }
 
+#banner {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 
 .jslider {
 	font-family: sans-serif, arial, freesans;
@@ -109,6 +114,7 @@ a:focus,
 }
 
 input, optgroup, select, textarea {
+	color: $font_colour;
 	resize: vertical;
 }
 
@@ -145,8 +151,7 @@ pre {
 	color: #FF0000;
 }
 
-nav,
-header {
+nav {
 	opacity: $nav_float_min_opacity;
 	filter:alpha(opacity=$nav_percent_min_opacity);
 }
@@ -172,49 +177,8 @@ header {
 	padding: 10px;
 }
 
-nav #banner #logo-text a {
-	font-size: 40px;
-	font-weight: bold;
-	margin-left: 3px;
- 	color: #000000;
-
-}
-nav #banner #logo-text a:hover { text-decoration: none; }
-
 .nav-channel-select { margin-left: 8px; }
 
-header #banner {
-	z-index: 1040;
-	margin-top: 10px;
-	text-align: center;
-	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
-	font-size: 14px;
-	font-family: tahoma, "Lucida Sans", sans;
-	color: $banner_colour;
-	font-weight: bold;
-	whitespace: nowrap;
-}
-
-header #banner a,
-header #banner a:active,
-header #banner a:visited,
-header #banner a:link,
-header #banner a:hover {
-	color: $banner_colour;
-	text-decoration: none;
-	outline: none;
-	vertical-align: bottom;
-}
-
-header #banner #logo-img {
-  height: 22px;
-  margin-top: 5px;
-}
-
-header #banner #logo-text {
-  font-size: 22px;
-}
-
 /* contextual help */
 .contextual-help-content {
 	display: none;
@@ -244,18 +208,18 @@ header #banner #logo-text {
 .contextual-help-tool {
 	padding: 7px;
 	filter: alpha(opacity=20);
-	opacity: .2;
+	opacity: .5;
 }
 
 .contextual-help-tool:hover {
 	filter: alpha(opacity=50);
-	opacity: .5;
+	opacity: 1;
 	text-decoration: none;
 }
 
 .contextual-help-tool i {
-	color: #000;
-	font-size: 16px;
+	color: $font_colour;
+	font-size: 1.05rem;
 }
 
 /* contextual help end */
@@ -847,22 +811,6 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	margin: 24px;
 }
 
-.modal-header .contextual-help-tool {
-	/* Mostly duplicating ".modal-header .close" and ".close" layout settings from bootstrap */
-	float: right;
-	font-size: 21px;
-	padding: 0;
-	margin-top: -4px;
-	margin-right: 15px;
-	line-height: 1;
-}
-
-#acl-search {
-	padding: 4px;
-	border: 1px solid #ccc;
-	width: 100%;
-}
-
 #acl-search::-webkit-input-placeholder {
 	/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
 	font-family: FontAwesome, sans-serif, arial, freesans;
@@ -873,59 +821,17 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	font-family: FontAwesome, sans-serif, arial, freesans;
 }
 
-#aclModal .modal-body {
-	padding-top: 10px;
-}
-
-#acl-showlimited-description {
-	font-size: 90%;
-	color: #888;
-	margin-left: 10px;
-	margin-bottom: 4px;
-}
-
-#acl-list {
-	border: 1px solid #ccc;
-	-webkit-border-radius: $radiuspx ;
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
-}
-
-#acl-search-wrapper {
-	padding: 7px 10px;
-	background-color: $item_colour;
-	border-top-left-radius: $radiuspx;
-	border-top-right-radius: $radiuspx;
-	border-bottom: 1px solid #ccc;
-}
-
-#acl-list-content-wrapper {
-	display: block;
-	overflow: auto;
-	clear: both;
-	min-height: 62px;
-	padding: 10px 10px 0px 0px;
-
-}
-
-#jotnets-wrapper, #jotnets-collapse {
-	margin-bottom: 18px;
-}
-
-#jot-preview-content {
-	margin-top: 10px;
-}
 .acl-list-item {
-	width: 48%; /* fallback if browser does not support calc() */
-	width: calc(50% - 10px);
+	width: 100%;
+	padding: 0.5rem;
+	margin-bottom: 0.5rem;
 	border: 1px solid #ccc;
-	margin: 0px 0px 10px 10px;
-	padding: 5px;
 	float: left;
-	-webkit-border-radius: $radiuspx ;
-	-moz-border-radius: $radiuspx;
 	border-radius: $radiuspx;
-	background-color: white;
+}
+
+.acl-item-header {
+	width: 100%;
 }
 
 .acl-list-item.grouphide {
@@ -936,62 +842,16 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	border: 1px solid green;
 }
 
-.acl-list-item img {
-	width: 40px;
-	height: 40px;
-	float: left;
-	margin-right: 5px;
-	-webkit-border-radius: $radiuspx ;
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
-}
-
 .acl-list-item.taggable {
 	background-color: #ddddff;
 }
 
-.acl-list-item p {
-	font-size: $font_size;
-	margin: 0px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
 .acl-button-show,
 .acl-button-hide {
 	float: right;
 	margin-left: 5px;
 }
 
-#acl-showlimited-caption,
-#acl-showall-caption {
-	font-size: 115%;
-}
-
-#acl-radiowrapper-showall {
-	margin-top: 20px;
-	margin-bottom: 20px;
-}
-#acl-radiowrapper-showlimited {
-	margin-bottom: 0;
-}
-
-#acl-showall + i {
-	font-size: 140%;
-}
-
-#acl-info-icon,
-#acl-info-icon:active {
-	font-size: 110%;
-	color: $link_colour;
-	text-decoration: none;
-}
-
-#acl-showall-caption {
-	margin-left: 0.35em;
-}
-
 .contact-block-content {
 	margin-top: 10px;
 }
@@ -1208,7 +1068,7 @@ img.mail-conv-sender-photo {
 }
 
 .jot-icons {
-	color: $toolicon_colour;
+	//color: $toolicon_colour;
 }
 
 .jot-icons.jot-lock-warn {
@@ -1321,11 +1181,6 @@ img.mail-conv-sender-photo {
 	color: $toolicon_colour;
 }
 
-.comment-icon {
-	font-size: 0.833em;
-	color: $toolicon_colour;
-}
-
 .comment-edit-text-empty,
 .comment-edit-text-full {
 	border: 1px solid #ccc;
@@ -1334,11 +1189,6 @@ img.mail-conv-sender-photo {
 
 .comment-edit-text-empty {
 	color: gray;
-	font-size: 12px;
-}
-
-.comment-edit-text-full {
-	color: black;
 }
 
 .divgrow-showmore {
@@ -1447,9 +1297,9 @@ img.mail-conv-sender-photo {
 	height: 2.2rem;
 }
 
-.usermenu img {
-	width: 100%;
-	height: 100%;
+#avatar {
+	width: 2.2rem;
+	height: 2.2rem;
 	border-radius: $radiuspx;
 }
 
@@ -1607,22 +1457,6 @@ main.fullscreen .section-content-wrapper-np {
 }
 /* bootstrap overrides */
 
-.btn {
-	font-size: $body_font_size;
-}
-
-.panel {
-  background-color: transparent;
-  border: 0px solid transparent;
-  border-radius: 0px;
-  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .0);
-          box-shadow: 0 0px 0px rgba(0, 0, 0, .0);
-}
-
-.panel-group .panel + .panel {
-	margin-top: 0px;
-}
-
 blockquote {
 	font-size: $font_size;
 	font-style: italic;
@@ -1696,27 +1530,6 @@ blockquote {
 }
 */
 
-/*
-.nav-tabs.nav-justified {
-	background-color: rgba(254,254,254,.5);
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-}
-
-.nav-tabs.nav-justified > .active > a,
-.nav-tabs.nav-justified > .active > a:hover,
-.nav-tabs.nav-justified > .active > a:focus {
-	border-bottom-color: transparent;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-	background-color: transparent;
-}
-*/
-
-
 @media screen and (max-width: 767px) {
 
 	aside#region_1 {
diff --git a/view/tpl/acl_selector.tpl b/view/tpl/acl_selector.tpl
index 19a2a5257..e0b31162a 100755
--- a/view/tpl/acl_selector.tpl
+++ b/view/tpl/acl_selector.tpl
@@ -3,11 +3,13 @@
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
+				<h4 class="modal-title">
+					<i id="dialog-perms-icon" class="fa fa-fw"></i> {{$aclModalTitle}}
+					{{if $helpUrl}}
+					<a target="hubzilla-help" href="{{$helpUrl}}" class="contextual-help-tool" title="Help and documentation"><i class="fa fa-fw fa-question"></i></a>
+					{{/if}}
+				</h4>
 				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-				{{if $helpUrl}}
-				<a type="button" target="hubzilla-help" href="{{$helpUrl}}" class="contextual-help-tool" title="Help and documentation"><i class="fa fa-question"></i></a>
-				{{/if}}
-				<h4 class="modal-title"><i id="dialog-perms-icon" class="fa fa-fw"></i> {{$aclModalTitle}}</h4>
 			</div>
 			<div class="section-content-wrapper">
 				{{if $aclModalDesc}}
@@ -29,22 +31,19 @@
 
 				<div id="acl-wrapper">
 					<div id="acl-list">
-						<div id="acl-search-wrapper">
-							<input type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
-						</div>
-						<div id="acl-list-content-wrapper">
-							<div id=acl-showlimited-description>{{$showlimitedDesc}}</div>
-							<div id="acl-list-content"></div>
-						</div>
+						<input class="form-control" type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
+						<div class="p-2 dropdown-sub-text">{{$showlimitedDesc}}</div>
+						<div id="acl-list-content"></div>
 					</div>
 				</div>
 
 				<div class="acl-list-item" rel="acl-template" style="display:none">
-					<img data-src="{0}"><p>{1}</p>
-					<button class="acl-button-hide btn btn-sm btn-outline-secondary"><i class="fa fa-times"></i> {{$hide}}</button>
-					<button class="acl-button-show btn btn-sm btn-outline-secondary"><i class="fa fa-check"></i> {{$show}}</button>
+					<div class="acl-item-header">
+						<img class="menu-img-1" data-src="{0}"> {1}
+					</div>
+					<button class="acl-button-hide btn btn-sm btn-outline-danger"><i class="fa fa-times"></i> {{$hide}}</button>
+					<button class="acl-button-show btn btn-sm btn-outline-success"><i class="fa fa-check"></i> {{$show}}</button>
 				</div>
-
 			</div>
 			<div class="modal-footer clear">
 				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{$aclModalDismiss}}</button>
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 8b011dcac..80bef9ef6 100755
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -22,7 +22,7 @@
 				<div class="clear"></div>
 				<div id="comment-tools-{{$id}}" class="comment-tools">
 					<div id="comment-edit-bb-{{$id}}" class="btn-toolbar pull-left">
-						<div class='btn-group'>
+						<div class="btn-group mr-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
 								<i class="fa fa-bold comment-icon"></i>
 							</button>
@@ -39,19 +39,13 @@
 								<i class="fa fa-terminal comment-icon"></i>
 							</button>
 						</div>
-						<div class='btn-group'>
-							<!--button class="btn btn-outline-secondary btn-sm" title="{{$edimg}}" onclick="insertbbcomment('{{$comment}}','img', {{$id}}); return false;">
-								<i class="fa fa-camera comment-icon"></i>
-							</button-->
+						<div class="btn-group mr-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$edurl}}" onclick="insertCommentURL('{{$comment}}',{{$id}}); return false;">
 								<i class="fa fa-link comment-icon"></i>
 							</button>
-							<!--button class="btn btn-outline-secondary btn-sm" title="{{$edvideo}}" onclick="insertbbcomment('{{$comment}}','video', {{$id}}); return false;">
-								<i class="fa fa-video-camera comment-icon"></i>
-							</button-->
 						</div>
 						{{if $feature_encrypt}}
-						<div class='btn-group'>
+						<div class="btn-group mr-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$encrypt}}" onclick="red_encrypt('{{$cipher}}','#comment-edit-text-' + '{{$id}}',''); return false;">
 								<i class="fa fa-key comment-icon"></i>
 							</button>
@@ -59,7 +53,7 @@
 						{{/if}}
 						{{$comment_buttons}}
 					</div>
-					<div class="btn-group pull-right" id="comment-edit-submit-wrapper-{{$id}}">
+					<div class="btn-group float-right" id="comment-edit-submit-wrapper-{{$id}}">
 						{{if $preview}}
 						<button id="comment-edit-presubmit-{{$id}}" class="btn btn-outline-secondary btn-sm" onclick="preview_comment({{$id}}); return false;" title="{{$preview}}">
 							<i class="fa fa-eye comment-icon" ></i>
diff --git a/view/tpl/connections.tpl b/view/tpl/connections.tpl
index e5f2241e4..a40e1fef9 100755
--- a/view/tpl/connections.tpl
+++ b/view/tpl/connections.tpl
@@ -18,9 +18,9 @@
 	<div id="contacts-search-form" class="section-content-tools-wrapper">
 		<form action="{{$cmd}}" method="get" >
 			<div class="input-group form-group">
-				<input type="text" name="search" id="contacts-search" class="form-control input-sm" onfocus="this.select();" value="{{$search}}" placeholder="{{$desc}}" />
+				<input type="text" name="search" id="contacts-search" class="form-control" onfocus="this.select();" value="{{$search}}" placeholder="{{$desc}}" />
 				<div class="input-group-btn">
-					<button id="contacts-search-submit" class="btn btn-outline-secondary btn-sm" type="submit" name="submit" value="{{$submit}}"><i class="fa fa-fw fa-search"></i></button>
+					<button id="contacts-search-submit" class="btn btn-outline-secondary" type="submit" name="submit" value="{{$submit}}"><i class="fa fa-fw fa-search"></i></button>
 				</div>
 			</div>
 		</form>
@@ -29,6 +29,7 @@
 		{{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/jot-header.tpl b/view/tpl/jot-header.tpl
index 535e6c66c..66c813f1f 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -10,7 +10,7 @@ function initEditor(cb){
 		{{$geotag}}
 		if(plaintext == 'none') {
 			$("#profile-jot-text-loading").spin(false).hide();
-			$("#profile-jot-text").css({ 'height': 200, 'color': '#000', 'line-height': 'inherit' });
+			$("#profile-jot-text").css({ 'height': 200 });
 			{{if $bbco_autocomplete}}
 			$("#profile-jot-text").bbco_autocomplete('{{$bbco_autocomplete}}'); // autocomplete bbcode
 			{{/if}}
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index b9afbd98e..e9e66a83b 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -31,7 +31,7 @@
 		</div>
 		{{/if}}
 		<div id="jot-title-wrap" class="jothidden">
-			<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" tabindex=1 value="{{$title}}">
+			<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" tabindex="1" value="{{$title}}">
 		</div>
 		{{if $catsenabled}}
 		<div id="jot-category-wrap" class="jothidden">
@@ -39,17 +39,17 @@
 		</div>
 		{{/if}}
 		<div id="jot-text-wrap">
-			<textarea class="profile-jot-text" id="profile-jot-text" name="body" tabindex=2 placeholder="{{$share}}" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >{{$content}}</textarea>
+			<textarea class="profile-jot-text" id="profile-jot-text" name="body" tabindex="2" placeholder="{{$share}}" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >{{$content}}</textarea>
 		</div>
 		{{if $attachment}}
 		<div id="jot-attachment-wrap">
 			<input class="jot-attachment" name="attachment" id="jot-attachment" type="text" value="{{$attachment}}" readonly="readonly" onclick="this.select();">
 		</div>
 		{{/if}}
-		<div id="profile-jot-submit-wrapper" class="jothidden">
-			<div id="profile-jot-submit-left" class="btn-toolbar pull-left">
+		<div id="profile-jot-submit-wrapper" class="clearfix p-2 jothidden">
+			<div id="profile-jot-submit-left" class="btn-toolbar float-left">
 				{{if $bbcode}}
-				<div class="btn-group">
+				<div class="btn-group mr-2">
 					<button id="main-editor-bold" class="btn btn-outline-secondary btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'profile-jot-text'); return false;">
 						<i class="fa fa-bold jot-icons"></i>
 					</button>
@@ -68,7 +68,7 @@
 				</div>
 				{{/if}}
 				{{if $visitor}}
-				<div class="btn-group hidden-xs hidden-sm">
+				<div class="btn-group mr-2 hidden-md-down">
 					{{if $writefiles}}
 					<button id="wall-file-upload" class="btn btn-outline-secondary btn-sm" title="{{$attach}}" >
 						<i id="wall-file-upload-icon" class="fa fa-paperclip jot-icons"></i>
@@ -85,7 +85,7 @@
 					</button>
 					{{/if}}
 				</div>
-				<div class="btn-group hidden-xs hidden-sm">
+				<div class="btn-group mr-2 hidden-md-down">
 					{{if $setloc}}
 					<button id="profile-location-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$setloc}}" onclick="jotGetLocation();return false;">
 						<i id="profile-location" class="fa fa-globe jot-icons"></i>
@@ -97,7 +97,7 @@
 					</button>
 					{{/if}}
 				{{else}}
-				<div class="btn-group hidden-xs hidden-sm">
+				<div class="btn-group hidden-md-down">
 				{{/if}}
 				{{if $feature_expire}}
 					<button id="profile-expire-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$expires}}" onclick="jotGetExpiry();return false;">
@@ -126,48 +126,51 @@
 				{{/if}}
 				</div>
 				{{if $writefiles || $weblink || $setloc || $clearloc || $feature_expire || $feature_encrypt || $feature_voting}}
-				<div class="btn-group visible-xs visible-sm">
+				<div class="btn-group hidden-lg-up">
 					<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-cog jot-icons"></i>
 					</button>
-					<ul class="dropdown-menu" role="menu">
+					<div class="dropdown-menu">
 						{{if $visitor}}
 						{{if $writefiles}}
-						<li><a id="wall-file-upload-sub" href="#" ><i class="fa fa-paperclip"></i>&nbsp;{{$attach}}</a></li>
+						<a class="dropdown-item" id="wall-file-upload-sub" href="#" ><i class="fa fa-paperclip"></i>&nbsp;{{$attach}}</a>
 						{{/if}}
 						{{if $weblink}}
-						<li><a href="#" onclick="jotGetLink(); return false;"><i class="fa fa-link"></i>&nbsp;{{$weblink}}</a></li>
+						<a class="dropdown-item" href="#" onclick="jotGetLink(); return false;"><i class="fa fa-link"></i>&nbsp;{{$weblink}}</a>
+						{{/if}}
+						{{if $embedPhotos}}
+						<a class="dropdown-item" href="#" onclick="initializeEmbedPhotoDialog(); return false;"><i class="fa fa-file-image-o jot-icons"></i>&nbsp;{{$embedPhotos}}</a>
 						{{/if}}
 						{{if $setloc}}
-						<li><a href="#" onclick="jotGetLocation(); return false;"><i class="fa fa-globe"></i>&nbsp;{{$setloc}}</a></li>
+						<a class="dropdown-item" href="#" onclick="jotGetLocation(); return false;"><i class="fa fa-globe"></i>&nbsp;{{$setloc}}</a>
 						{{/if}}
 						{{if $clearloc}}
-						<li><a href="#" onclick="jotClearLocation(); return false;"><i class="fa fa-circle-o"></i>&nbsp;{{$clearloc}}</a></li>
+						<a class="dropdown-item" href="#" onclick="jotClearLocation(); return false;"><i class="fa fa-circle-o"></i>&nbsp;{{$clearloc}}</a>
 						{{/if}}
 						{{/if}}
 						{{if $feature_expire}}
-						<li><a href="#" onclick="jotGetExpiry(); return false;"><i class="fa fa-eraser"></i>&nbsp;{{$expires}}</a></li>
+						<a class="dropdown-item" href="#" onclick="jotGetExpiry(); return false;"><i class="fa fa-eraser"></i>&nbsp;{{$expires}}</a>
 						{{/if}}
 						{{if $feature_future}}
-						<li><a href="#" onclick="jotGetPubDate();return false;"><i class="fa fa-clock-o"></i>&nbsp;{{$future_txt}}</a></li>
+						<a class="dropdown-item" href="#" onclick="jotGetPubDate();return false;"><i class="fa fa-clock-o"></i>&nbsp;{{$future_txt}}</a>
 						{{/if}}
 						{{if $feature_encrypt}}
-						<li><a href="#" onclick="red_encrypt('{{$cipher}}','#profile-jot-text',$('#profile-jot-text').val());return false;"><i class="fa fa-key"></i>&nbsp;{{$encrypt}}</a></li>
+						<a class="dropdown-item" href="#" onclick="red_encrypt('{{$cipher}}','#profile-jot-text',$('#profile-jot-text').val());return false;"><i class="fa fa-key"></i>&nbsp;{{$encrypt}}</a>
 						{{/if}}
 						{{if $feature_voting}}
-						<li><a href="#" onclick="toggleVoting(); return false;"><i id="profile-voting-sub" class="fa fa-square-o"></i>&nbsp;{{$voting}}</a></li>
+						<a class="dropdown-item" href="#" onclick="toggleVoting(); return false;"><i id="profile-voting-sub" class="fa fa-square-o"></i>&nbsp;{{$voting}}</a>
 						{{/if}}
 						{{if $feature_nocomment}}
-						<li><a href="#" onclick="toggleNoComment(); return false;"><i id="profile-nocomment-sub" class="fa fa-comments"></i>&nbsp;{{$nocommenttitlesub}}</a></li>
+						<a class="dropdown-item" href="#" onclick="toggleNoComment(); return false;"><i id="profile-nocomment-sub" class="fa fa-comments"></i>&nbsp;{{$nocommenttitlesub}}</a>
 						{{/if}}
-					</ul>
+					</div>
 				</div>
 				{{/if}}
 			</div>
-			<div id="profile-rotator-wrapper">
+			<div id="profile-rotator-wrapper" class="float-left">
 				<div id="profile-rotator"></div>
 			</div>
-			<div id="profile-jot-submit-right" class="btn-group pull-right">
+			<div id="profile-jot-submit-right" class="btn-group float-right">
 				{{if $preview}}
 				<button class="btn btn-outline-secondary btn-sm" onclick="preview_post();return false;" title="{{$preview}}">
 					<i class="fa fa-eye jot-icons" ></i>
@@ -187,7 +190,7 @@
 			</div>
 			<div class="clear"></div>
 			{{if $jotplugins}}
-			<div id="profile-jot-plugin-wrapper">
+			<div id="profile-jot-plugin-wrapper" class="mt-2">
 				{{$jotplugins}}
 			</div>
 			{{/if}}
@@ -210,8 +213,6 @@
 			</div><!-- /.modal -->
 			{{/if}}
 		</div>
-		<div id="profile-jot-text-loading"></div>
-		<div id="profile-jot-end" class="clear"></div>
 	</div>
 </form>
 
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 5903df689..41c199f2b 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -168,7 +168,7 @@
 		{{/if}}
 	</ul>
 
-	<div class="navbar-text text-white font-weight-bold hidden-sm-down">{{$banner}}</div>
+	<div id="banner" class="navbar-text text-white font-weight-bold hidden-sm-down">{{$banner}}</div>
 
 	<ul id="nav-right" class="navbar-nav hidden-sm-down ml-auto">
 		<li class="nav-item collapse clearfix" id="nav-search">
@@ -212,9 +212,9 @@
 {{if $nav.help.6}}
 <div id="contextual-help-content" class="contextual-help-content">
 	{{$nav.help.5}}
-	<div class="pull-right">
-		<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-fw fa-question"></i>&nbsp;{{$fulldocs}}</a>
-		<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-fw fa-times"></i></a>
+	<div class="float-right">
+		<a class="btn btn-primary btn-sm" target="hubzilla-help" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i class="fa fa-question"></i>&nbsp;{{$fulldocs}}</a>
+		<a class="contextual-help-tool" href="#" onclick="contextualHelp(); return false;"><i class="fa fa-times"></i></a>
 	</div>
 </div>
 {{/if}}