instead of not displaying the cover-photo at all after first page load, load the page with the cover slided up. change pointer to n-resize if cover is not slid.

3 files changed, 29 insertions, 8 deletions

diff --git a/Zotlabs/Widget/Cover_photo.php b/Zotlabs/Widget/Cover_photo.php
index af1ae5c7f..965566523 100644
--- a/Zotlabs/Widget/Cover_photo.php
+++ b/Zotlabs/Widget/Cover_photo.php
@@ -21,9 +21,9 @@ class Cover_photo {
 			return '';
 
 		// only show cover photos once per login session
-
+		$hide_cover = false;
 		if(array_key_exists('channels_visited',$_SESSION) && is_array($_SESSION['channels_visited']) && in_array($channel_id,$_SESSION['channels_visited'])) {
-			return EMPTY_STR;
+			$hide_cover = true;
 		}
 		if(! array_key_exists('channels_visited',$_SESSION)) {
 			$_SESSION['channels_visited'] = [];
@@ -53,6 +53,7 @@ class Cover_photo {
 			$subtitle = str_replace('@','@',$channel['xchan_addr']);
 
 		$c = get_cover_photo($channel_id,'html');
+		$c = str_replace('src=', 'data-src=', $c);
 
 		if($c) {
 			$photo_html = (($style) ? str_replace('alt=',' style="' . $style . '" alt=',$c) : $c);
@@ -62,6 +63,7 @@ class Cover_photo {
 				'$title'	=> $title,
 				'$subtitle'	=> $subtitle,
 				'$hovertitle' => t('Click to show more'),
+				'$hide_cover' => $hide_cover
 			));
 		}
 		return $o;
diff --git a/view/css/widgets.css b/view/css/widgets.css
index e330c38e1..995647d1c 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -142,7 +142,6 @@ li:hover .group-edit-icon {
 	position: relative;
 	width: 100%;
 	height: auto;
-	cursor: pointer;
 }
 
 #cover-photo-caption {
diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index 3aaad5ae5..ed708ffb5 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -2,16 +2,27 @@
 	var aside_padding_top;
 	var section_padding_top;
 	var coverSlid = false;
+	var hide_cover = Boolean({{$hide_cover}});
 
 	$(document).ready(function() {
+		if(! $('#cover-photo').length)
+			return;
 
 		aside_padding_top = parseInt($('aside').css('padding-top'));
 		section_padding_top = parseInt($('section').css('padding-top'));
 
 		$(document).on('click mouseup keyup', slideUpCover);
 
-		if($('#cover-photo').length && $(window).width() > 755) {
+		if($(window).width() > 755) {
+			datasrc2src('#cover-photo > img');
+
+			if(hide_cover) {
+				hideCover();
+				coverSlid = true;
+			}
+
 			if($(window).scrollTop() < $('#cover-photo').height()) {
+				$('body').css('cursor', 'n-resize');
 				$('.navbar').removeClass('fixed-top');
 				$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
 				$('main').css('opacity', 0);
@@ -24,32 +35,34 @@
 	});
 
 	$(window).scroll(function () {
-		if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
+		if($(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
+			$('body').css('cursor', '');
 			$('.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()){
+		else if ($(window).width() > 755 && $(window).scrollTop() < $('#cover-photo').height()){
 			if(coverSlid) {
 				$(window).scrollTop(Math.ceil($('#cover-photo').height()));
 				setTimeout(function(){ coverSlid = false; }, 1000);
 			}
 			else {
 				if($(window).scrollTop() < $('#cover-photo').height()) {
+					$('body').css('cursor', 'n-resize');
 					$('.navbar').removeClass('fixed-top');
 					$('main').css('margin-top', - $('nav').outerHeight(true) + 'px');
 					$('main').css('opacity', 0);
 				}
 			}
 		}
-		if($('#cover-photo').length && $('main').css('opacity') < 1) {
+		if($('main').css('opacity') < 1) {
 			$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
 		}
 	});
 
 	$(window).resize(function () {
-		if($('#cover-photo').length && $(window).width() < 755) {
+		if($(window).width() < 755) {
 			$('#cover-photo').remove();
 			$('.navbar').addClass('fixed-top');
 			$('main').css('opacity', 1);
@@ -65,6 +78,13 @@
 		$('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' }, 'fast');
 		return;
 	}
+
+	function hideCover() {
+		if(coverSlid) {
+			return;
+		}
+		window.scrollTo(0, Math.ceil($('#cover-photo').height()));
+	}
 </script>
 
 <div id="cover-photo" title="{{$hovertitle}}">