bs4 fixes

7 files changed, 93 insertions, 144 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index a956f762b..289e389fa 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -3,7 +3,7 @@
 .jothidden input[type="text"] {
 	border: 0px;
 	margin: 0px;
-	height: 39px;
+	height: 2.5rem;
 	width: 100%;
 }
 
@@ -23,15 +23,15 @@
 
 #jot-title-wrap input,
 #jot-pagetitle-wrap input {
-	padding: 10px;
+	padding: 0.5rem;
 }
 
 #profile-jot-text {
 	resize: none;
 	border-width: 0px;
-	height: 39px;
-	line-height: 19px;
-	padding: 10px;
+	height: 2.5rem;
+	line-height: 1.5rem;
+	padding: 0.5rem;
 	width: 100%;
 	display: inherit;
 }
@@ -77,7 +77,7 @@
 /* conv_item */
 
 .wall-item-head-new {
-	border-top: 3px solid #0275d8;
+	border-top: 0.2rem solid #0275d8;
 }
 
 .wall-item-info {
@@ -125,6 +125,7 @@ a.wall-item-name-link {
 .wall-item-title.h3 {
 	font-weight: bold;
 	margin: 0px;
+	word-wrap: break-word;
 }
 
 .wall-item-body {
@@ -167,75 +168,44 @@ a.wall-item-name-link {
 }
 
 .item-highlight {
-	border-left: 3px solid #0275d8;
+	border-left: 0.2rem solid #0275d8;
 }
 
 .item-highlight .wall-item-head,
 .item-highlight .wall-item-content,
 .item-highlight .wall-item-tools {
-	padding-left: 7px;
+	padding-left: 0.3rem;
 }
 
 /* comment_item */
 
 .comment-edit-text-empty,
 .comment-edit-text-full {
+	padding: 0.5rem;
+	line-height: 1.25;
 	width: 100%;
 	display: inherit;
 }
 
 .comment-edit-text-empty {
-	padding: 0px 8px;
-	line-height: 28px;
-	height: 30px;
+	height: 2.25rem;
 	overflow: hidden;
 	resize: none;
-
 }
 
 .comment-edit-text-full {
-	padding: 8px;
-	height: 150px;
+	height: 7rem;
 	overflow: auto;
 	resize: vertical;
 }
 
-.qcomment {
-	border: 1px solid #EEE;
-	padding: 3px;
-	margin-top: 15px;
-	margin-left: 25px;
-	width: 125px;
-	overflow-y: auto;
-}
-
-.qcomment option {
-	width: 125px;
-	overflow-x: hidden;
-}
-
-.qcomment {
-	opacity: 0.3;
-	filter:alpha(opacity=30);
-}
-
-.qcomment:hover {
-	opacity: 1.0;
-	filter:alpha(opacity=100);
-}
-
-.comment-tools {
-	display: none;
-	margin-top: 7px;
-}
-
+.comment-tools,
 .comment-edit-preview {
 	display: none;
-	margin-top: 7px;
 }
 
 /* disable link handling for unknown entries */
-.dropdown-menu > li > a.disabled {
+.dropdown-menu a.disabled {
 	pointer-events: none;
 	cursor: default;
 }
diff --git a/view/css/widgets.css b/view/css/widgets.css
index 8fb4ab377..8900b858c 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -1,19 +1,12 @@
 .widget {
-	margin-bottom: 10px;
-	padding: 10px;
+	margin-bottom: 1rem;
+	padding: 0.5rem;
 }
 
 .widget h3 {
 	margin-top: 0px;
 }
 
-.widget-input {
-	width: 100%;
-	border-top-right-radius: 0px;
-	border-bottom-right-radius: 0px;
-	border-right: 0px;
-}
-
 .tags {
 	word-wrap: break-word;
 }
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index 9673312a7..e33f6192b 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -66,6 +66,10 @@ function contact_format(item) {
 		return "<div>" + item.text + "</div>";
 }
 
+function smiley_format(item) {
+	return "<div class='dropdown-item'>" + item.icon + ' ' + item.text + "</div>";
+}
+
 function editor_replace(item) {
 	if(typeof item.replace !== 'undefined') {
 		return '$1$2' + item.replace;
@@ -181,15 +185,16 @@ function string2bb(element) {
 			index: 3,
 			search: function(term, callback) { contact_search(term, callback, backend_url, 'c', extra_channels, spinelement=false); },
 			replace: editor_replace,
-			template: contact_format,
+			template: contact_format
 		};
 
 		smilies = {
 			match: /(^|\s)(:[a-z_:]{2,})$/,
 			index: 2,
 			search: function(term, callback) { $.getJSON('/smilies/json').done(function(data) { callback($.map(data, function(entry) { return entry.text.indexOf(term) === 0 ? entry : null; })); }); },
-			template: function(item) { return item.icon + item.text; },
+			//template: function(item) { return item.icon + item.text; },
 			replace: function(item) { return "$1" + item.text + ' '; },
+			template: smiley_format
 		};
 		this.attr('autocomplete','off');
 		this.textcomplete([contacts,smilies], {className:'acpopup', zIndex:1020});
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index cd5178688..decaf0d4e 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -293,9 +293,9 @@ footer {
 	padding: 0px 10px 10px 10px;
 	background-color: rgba(254,254,254,0.5);
 	border: 1px solid rgba(254,254,254,0.5);
-	-moz-border-radius: $radiuspx;
-	-webkit-border-radius: $radiuspx;
-	border-radius: $radiuspx;
+	-moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+	border-radius: $radius;
 	word-wrap: break-word;
 }
 
@@ -333,7 +333,7 @@ footer {
 	width: 251px;
 	height: 251px;
 	margin-bottom: 10px;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 #hide-friends-yes-label,
@@ -387,8 +387,8 @@ footer {
 
 .photo,
 .contact-block-img {
-	border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
+	border-radius: $radius;
+	-moz-border-radius: $radius;
 	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
@@ -402,8 +402,8 @@ footer {
 
 .profile-match-photo img,
 .directory-photo-img {
-	border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
+	border-radius: $radius;
+	-moz-border-radius: $radius;
 	box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
@@ -549,7 +549,7 @@ nav .acpopup {
 #cboxContent {
 	padding: 3px;
 	border: 0px solid #fff;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	background-color: #fff;
 	z-index: 1052;
 }
@@ -721,8 +721,8 @@ div.jGrowl div.jGrowl-notification {
 #id-name-ac .autocomplete,
 #contact-search-ac .autocomplete {
 	margin-top: 2px;
-	margin-left: $radiuspx;
-	margin-right: $radiuspx;
+	margin-left: $radius;
+	margin-right: $radius;
 	border: 1px solid #666;
 	border-top: none;
 
@@ -734,8 +734,8 @@ div.jGrowl div.jGrowl-notification {
 	text-align: left;
 	max-height: 350px;
 	overflow: auto;
-	border-bottom-left-radius: $radiuspx;
-	border-bottom-right-radius: $radiuspx;
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
 }
 
 .autocomplete .selected {
@@ -829,7 +829,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 	margin-bottom: 0.5rem;
 	border: 1px solid #ccc;
 	float: left;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .acl-item-header {
@@ -867,7 +867,7 @@ a.rconnect:hover, a.rateme:hover, div.rateme:hover {
 
 .reshared-content { margin-left: 20px; }
 .shared_header img {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	margin-right: 10px;
 }
 
@@ -1008,8 +1008,8 @@ th,td {
 /* mail */
 
 img.mail-conv-sender-photo {
-	-moz-border-radius: $radiuspx;
-	border-radius: $radiuspx;
+	-moz-border-radius: $radius;
+	border-radius: $radius;
 }
 
 /* jot */
@@ -1026,25 +1026,23 @@ img.mail-conv-sender-photo {
 	font-weight: bold;
 }
 
-
-
 #profile-jot-wrapper {
 	background-color: rgba(254,254,254,1);
 	border: 1px solid #ccc;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 
 }
 
 #profile-jot-text {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 #profile-jot-text::-webkit-input-placeholder {
-	font-size: 16px;
+	font-size: 1.2rem;
 }
 
 #profile-jot-text::-moz-placeholder {
-	font-size: 16px;
+	font-size: 1.2rem;
 }
 
 #profile-jot-text:focus::-webkit-input-placeholder {
@@ -1064,10 +1062,6 @@ img.mail-conv-sender-photo {
 	color: #777;
 }
 
-.jot-icons {
-	//color: $toolicon_colour;
-}
-
 .jot-icons.jot-lock-warn {
 	color: darkorange;
 }
@@ -1076,22 +1070,22 @@ img.mail-conv-sender-photo {
 /* conversation */
 
 .top-radius {
-	border-top-right-radius: $radiuspx;
-	border-top-left-radius: $radiuspx;
+	border-top-right-radius: $radius;
+	border-top-left-radius: $radius;
 }
 
 .wall-event-item {
 	padding: 10px;
 	color: #fff;
 	background-color: #3A87AD; /* should reflect calendar color */
-	border-top-left-radius: $radiuspx;
-	border-top-right-radius: $radiuspx;
+	border-top-left-radius: $radius;
+	border-top-right-radius: $radius;
 }
 
 .wall-photo-item img {
 	max-width: 100% !important;
-	border-top-right-radius: $radiuspx;
-	border-top-left-radius: $radiuspx;
+	border-top-right-radius: $radius;
+	border-top-left-radius: $radius;
 }
 
 .wall-item-footer {
@@ -1101,8 +1095,8 @@ img.mail-conv-sender-photo {
 
 .wall-item-content-wrapper {
 	background-color: $item_colour;
-	border-top-right-radius: $radiuspx;
-	border-top-left-radius: $radiuspx;
+	border-top-right-radius: $radius;
+	border-top-left-radius: $radius;
 }
 
 .wall-item-content-wrapper.comment {
@@ -1129,8 +1123,8 @@ img.mail-conv-sender-photo {
 	padding: 7px 10px;
 	background-color: $item_colour;
 	border-radius: 0px;
-	border-bottom-right-radius: $radiuspx;
-	border-bottom-left-radius: $radiuspx;
+	border-bottom-right-radius: $radius;
+	border-bottom-left-radius: $radius;
 	border-top: 3px solid $comment_item_colour;
 }
 
@@ -1151,8 +1145,8 @@ img.mail-conv-sender-photo {
 }
 
 .wall-item-photo {
-    border-radius: $radiuspx;
-    -moz-border-radius: $radiuspx;
+    border-radius: $radius;
+    -moz-border-radius: $radius;
     box-shadow: $shadowpx $shadowpx $shadowpx 0 #444444;
 }
 
@@ -1181,7 +1175,7 @@ img.mail-conv-sender-photo {
 .comment-edit-text-empty,
 .comment-edit-text-full {
 	border: 1px solid #ccc;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .comment-edit-text-empty {
@@ -1207,9 +1201,9 @@ img.mail-conv-sender-photo {
 .widget {
 	background-color: rgba(254,254,254,.5);
 	border: 1px solid rgba(254,254,254,.5);
-	-moz-border-radius: $radiuspx;
-	-webkit-border-radius: $radiuspx;
-	border-radius: $radiuspx;
+	-moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+	border-radius: $radius;
 }
 
 .widget h3 {
@@ -1218,8 +1212,8 @@ img.mail-conv-sender-photo {
 
 #note-text {
 	border: 1px solid #ccc;
-	border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
+	border-radius: $radius;
+	-moz-border-radius: $radius;
 }
 
 .fileas-ul {
@@ -1228,8 +1222,8 @@ img.mail-conv-sender-photo {
 
 #datebrowse-sidebar select {
 	border: 1px solid #ccc;
-	border-radius: $radiuspx;
-	-moz-border-radius: $radiuspx;
+	border-radius: $radius;
+	-moz-border-radius: $radius;
 }
 
 .thing-show img {
@@ -1251,24 +1245,24 @@ img.mail-conv-sender-photo {
 
 .chat-item-photo,
 .chat-item-photo-self {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .chat-item-title,
 .chat-item-title-self {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	background-color: $item_colour;
 }
 
 #chatMembers img {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .menu-img-3 {
 	width: 3.3em;
 	height: 3.3em;
 	margin-right: 5px;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	float: left;
 }
 
@@ -1276,7 +1270,7 @@ img.mail-conv-sender-photo {
 	height: 2.2em;
 	width: 2.2em;
 	margin-right: 5px;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	float: left;
 }
 
@@ -1284,7 +1278,7 @@ img.mail-conv-sender-photo {
 	height: 1.5em;
 	width: 1.5em;
 	margin-right: 5px;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .usermenu {
@@ -1294,7 +1288,7 @@ img.mail-conv-sender-photo {
 #avatar {
 	width: 2.2rem;
 	height: 2.2rem;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .page-title {
@@ -1304,20 +1298,20 @@ img.mail-conv-sender-photo {
 .generic-content-wrapper-styled {
 	background-color: $bgcolour;
 	padding: 10px;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .generic-content-wrapper {
 	border: 1px solid #ccc;
 	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
-	border-radius:  $radiuspx;
+	border-radius:  $radius;
 }
 
 .section-title-wrapper {
 	padding: 7px 10px;
 	background-color: $item_colour;
-	border-top-left-radius: $radiuspx;
-	border-top-right-radius: $radiuspx;
+	border-top-left-radius: $radius;
+	border-top-right-radius: $radius;
 	border-bottom: 3px solid $comment_item_colour;
 }
 
@@ -1378,22 +1372,22 @@ img.mail-conv-sender-photo {
 .section-content-wrapper .section-content-danger-wrapper {
 	margin-bottom: 10px;
 	border-bottom: none;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 
 .section-content-wrapper {
 	padding: 7px 10px;
 	background-color: $comment_item_colour;
-	border-bottom-left-radius: $radiuspx;
-	border-bottom-right-radius: $radiuspx;
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
 	word-wrap: break-word;
 }
 
 .section-content-wrapper-np {
 	background-color: $comment_item_colour;
-	border-bottom-left-radius: $radiuspx;
-	border-bottom-right-radius: $radiuspx;
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
 	word-wrap: break-word;
 }
 
@@ -1461,11 +1455,11 @@ blockquote {
 
 .dropdown-menu {
 	font-size: $body_font_size;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 .dropdown-menu img {
-	border-radius: $radiuspx;
+	border-radius: $radius;
 }
 
 /*
@@ -1606,7 +1600,7 @@ dl.bb-dl > dd > li {
 	margin-bottom: 0px;
 	box-shadow: none;
 	display: inline-block;
-	border-radius: $radiuspx;
+	border-radius: $radius;
 	cursor: text;
 	padding: 0px 10px;
 	width: 100%;
@@ -1716,8 +1710,8 @@ dl.bb-dl > dd > li {
 
 #ace-editor,
 #editor {
-	border-bottom-left-radius: $radiuspx;
-	border-bottom-right-radius: $radiuspx;
+	border-bottom-left-radius: $radius;
+	border-bottom-right-radius: $radius;
 }
 
 .sub-menu {
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 08efcda4c..f4e6d8046 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -128,7 +128,7 @@ if (! $body_font_size)
 if (! $font_colour)
 	$font_colour = '#4d4d4d';
 if (! $radius)
-	$radius = '4';
+	$radius = '0.25rem';
 if (! $shadow)
 	$shadow = '0';
 if (! $converse_width)
diff --git a/view/tpl/comment_item.tpl b/view/tpl/comment_item.tpl
index 80bef9ef6..f490483b8 100755
--- a/view/tpl/comment_item.tpl
+++ b/view/tpl/comment_item.tpl
@@ -19,8 +19,7 @@
 				{{/foreach}}
 					</select>
 				{{/if}}
-				<div class="clear"></div>
-				<div id="comment-tools-{{$id}}" class="comment-tools">
+				<div id="comment-tools-{{$id}}" class="pt-2 comment-tools">
 					<div id="comment-edit-bb-{{$id}}" class="btn-toolbar pull-left">
 						<div class="btn-group mr-2">
 							<button class="btn btn-outline-secondary btn-sm" title="{{$edbold}}" onclick="insertbbcomment('{{$comment}}','b', {{$id}}); return false;">
diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index f0c9d916f..93debf442 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -12,12 +12,9 @@
 
 		if($('#cover-photo').length && $(window).width() > 755) {
 			if($(window).scrollTop() < $('#cover-photo').height()) {
-				$('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').removeClass('fixed-top');
+				$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
 				$('main').css('opacity', 0);
-				$('header').hide();
 			}
 		}
 		else {
@@ -28,12 +25,9 @@
 
 	$(window).scroll(function () {
 		if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
-			$('header').fadeIn();
-			$('main').css('opacity', 1);
-			$('aside').css('padding-top', aside_padding_top + 'px');
-			$('section').css('padding-top', section_padding_top + 'px');
 			$('.navbar').addClass('fixed-top');
 			$('main').css('margin-top', '');
+			$('main').css('opacity', 1);
 			coverSlid = true;
 		}
 		else if ($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() < $('#cover-photo').height()){
@@ -43,13 +37,9 @@
 			}
 			else {
 				if($(window).scrollTop() < $('#cover-photo').height()) {
-					$('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').removeClass('fixed-top');
+					$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
 					$('main').css('opacity', 0);
-					$('header').hide();
 				}
 			}
 		}
@@ -61,10 +51,8 @@
 	$(window).resize(function () {
 		if($('#cover-photo').length && $(window).width() < 755) {
 			$('#cover-photo').remove();
-			$('main').css('opacity', 1);
-			$('aside').css('padding-top', aside_padding_top + 'px');
-			$('section').css('padding-top', section_padding_top + 'px');
 			$('.navbar').addClass('fixed-top');
+			$('main').css('opacity', 1);
 			coverSlid = true;
 		}
 
@@ -75,7 +63,7 @@
 			return;
 		}
 		$('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' });
-		return;
+		return false;
 	}
 </script>