replace sticky_kit with a simpler homwgrown solution (still a bit raw) and slightly change the way we load new content so that people with a long aside column do not have to scroll all the way to the bottom for loading the next page

6 files changed, 12 insertions, 9 deletions

diff --git a/view/tpl/directory_header.tpl b/view/tpl/directory_header.tpl
index 3ee9ee326..568e03cd0 100644
--- a/view/tpl/directory_header.tpl
+++ b/view/tpl/directory_header.tpl
@@ -16,7 +16,8 @@
 	{{foreach $entries as $entry}}
 		{{include file="direntry.tpl"}}
 	{{/foreach}}
-	<div id="page-end"></div>
+	{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+	<div id="page-end" class="float-left w-100"></div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>
 <div id="page-spinner" class="spinner-wrapper">
diff --git a/view/tpl/notes.tpl b/view/tpl/notes.tpl
index 67da5ff37..4bee02aa0 100644
--- a/view/tpl/notes.tpl
+++ b/view/tpl/notes.tpl
@@ -16,7 +16,6 @@
 		$(document).ready(function(e){
 			noteText.on('change keyup keydown paste cut', function () {
 				noteText.height(0).height(noteText[0].scrollHeight);
-				$(document.body).trigger("sticky_kit:recalc");
 			}).change();
 		});
 
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 1a24ca7c4..1092bc155 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -137,7 +137,7 @@
 	}
 </script>
 
-<div id="notifications_wrapper">
+<div id="notifications_wrapper" class="mb-4">
 	<div id="no_notifications" class="d-xl-none">
 		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
 	</div>
@@ -154,7 +154,7 @@
 			<span class="float-right badge badge-secondary">{10}</span>
 			<img class="menu-img-1" data-src="{1}" loading="lazy">
 			<span class="">{2}</span>
-			<i class="fa fa-{11} text-muted"></i> 
+			<i class="fa fa-{11} text-muted"></i>
 		</a>
 	</div>
 	<div id="notifications" class="border border-bottom-0 rounded navbar-nav collapse">
diff --git a/view/tpl/photo_album.tpl b/view/tpl/photo_album.tpl
index eb16bcc98..ad4e2a38c 100644
--- a/view/tpl/photo_album.tpl
+++ b/view/tpl/photo_album.tpl
@@ -18,12 +18,13 @@
 	</div>
 	{{$upload_form}}
 	{{$album_edit.1}}
-	<div class="section-content-wrapper-np">
+	<div class="section-content-wrapper-np clearfix">
 		<div id="photo-album-contents-{{$album_id}}" style="display: none">
 			{{foreach $photos as $photo}}
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
-			<span id="page-end"></span>
+			{{** make sure this element is at the bottom - we rely on that for endless scroll **}}
+			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/photos_recent.tpl b/view/tpl/photos_recent.tpl
index 1e2f22e33..63c8b3515 100644
--- a/view/tpl/photos_recent.tpl
+++ b/view/tpl/photos_recent.tpl
@@ -9,12 +9,13 @@
 		<div class="clear"></div>
 	</div>
 	{{$upload_form}}
-	<div class="section-content-wrapper-np">
+	<div class="section-content-wrapper-np clearfix">
 		<div id="photo-album-contents-{{$album_id}}" style="display: none">
 			{{foreach $photos as $photo}}
 				{{include file="photo_top.tpl"}}
 			{{/foreach}}
-			<span id="page-end"></span>
+			{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+			<span id="page-end" class="d-block float-left w-100" style="position: absolute; bottom: 0px"></span>
 		</div>
 	</div>
 </div>
diff --git a/view/tpl/viewcontact_template.tpl b/view/tpl/viewcontact_template.tpl
index 005fe17ce..cbbf3a97c 100644
--- a/view/tpl/viewcontact_template.tpl
+++ b/view/tpl/viewcontact_template.tpl
@@ -6,7 +6,8 @@
 		{{foreach $contacts as $contact}}
 		{{include file="contact_template.tpl"}}
 		{{/foreach}}
-		<div id="page-end"></div>
+		{{** make sure this element is at the bottom - we rely on that in endless scroll **}}
+		<div id="page-end" class="float-left w-100"></div>
 	</div>
 </div>
 <script>$(document).ready(function() { loadingPage = false;});</script>