several cover photo widget enhancements:

- allow a click anywhere on the page to cause the photo to autoscroll
- provide a logic flag to autoscroll only once
- allow manual scroll back to see the cover photo afterward (tricky to handle the nav menu here)
- on scroll back, the nav remains fixed at the top and the top pixels of the cover photo are covered (this was an acceptable tradeoff to gain the ability to see the photo again without causing unpredictable behaviour of the nav)
- some positioning details in small screen width mode caused jot to be off screen due to insufficient top padding; a manual padding was also added as something still wasn't right even after adding the nav height
- very minor nit: if screen size is reduced below 755 and then upsized again, the cover photo will not be redisplayed

1 files changed, 19 insertions, 8 deletions

diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
index 4e210a300..4dfaf415b 100755
--- a/view/tpl/cover_photo_widget.tpl
+++ b/view/tpl/cover_photo_widget.tpl
@@ -1,9 +1,12 @@
 <script>
 	var aside_padding_top;
 	var section_padding_top;
+	var coverSlid = false;
 
 	$(document).ready(function() {
 
+		$('body').on('click',slideUpCover);
+
 		aside_padding_top = parseInt($('aside').css('padding-top'));
 		section_padding_top = parseInt($('section').css('padding-top'));
 
@@ -12,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');
-			$('main').css('opacity', 0);
+			$('main').css('opacity', 0.5);
 			$('header').hide();
 		}
 		else {
@@ -21,15 +24,15 @@
 	});
 
 	$(window).scroll(function () {
-		if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
+		if((! coverSlid) && $('#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');
 			$(window).scrollTop($(window).scrollTop() - $('#cover-photo').height())
-			$('.navbar-fixed-top').css('position', 'fixed');
+			$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0});
 			$('main').css('margin-top', '');
-			$('#cover-photo').remove();
+			coverSlid = true;
 		}
 		if($('#cover-photo').length) {
 			$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
@@ -39,20 +42,28 @@
 	$(window).resize(function () {
 		if($('#cover-photo').length && $(window).width() < 755) {
 			$('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', 'fixed');
+			$('aside').css('padding-top', aside_padding_top + $('nav').outerHeight() + 20 + 'px');
+			$('section').css('padding-top', section_padding_top  + $('nav').outerHeight() + 20 + 'px');
+			$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0 });
 			$('#cover-photo').remove();
 		}
 
 	});
 
 	function slideUpCover() {
+		if(coverSlid)
+			return;
 		$('html, body').animate({scrollTop: Math.ceil($('#cover-photo').height()) + 'px' });
+		$('#cover-photo').css({ 'position' : 'relative' , 'top' : 0 });
+		$('.navbar-fixed-top').css({ 'position' : 'fixed', 'top' : 0});
+		$('aside').css('padding-top', aside_padding_top + 'px');
+		$('section').css('padding-top', section_padding_top + 'px');
+		$('main').css('margin-top', '');
+		coverSlid = true;
 	}
 </script>
 
-<div id="cover-photo" onclick="slideUpCover();" title="{{$hovertitle}}">
+<div id="cover-photo" title="{{$hovertitle}}">
 	{{$photo_html}}
 	<div id="cover-photo-caption">
 		<div class="cover-photo-title">