move cover-photo to template, add the ability to define a title and subtitle (defaults to channel name and addres), move js from redbasic.js to template.

1 files changed, 49 insertions, 0 deletions

diff --git a/view/tpl/cover_photo_widget.tpl b/view/tpl/cover_photo_widget.tpl
new file mode 100755
index 000000000..68571d257
--- /dev/null
+++ b/view/tpl/cover_photo_widget.tpl
@@ -0,0 +1,49 @@
+<script>
+	$(document).ready(function() {
+		if($('#cover-photo').length && $(window).width() > 755) {
+			$('.navbar-fixed-top').css('position', 'relative');
+			$('aside, section').css('padding-top', 0 + 'px');
+			$('main').css('opacity', 0);
+			$('header').hide();
+		}
+		else {
+			$('#cover-photo').remove();
+		}
+	});
+
+	$(window).scroll(function () {
+		if($('#cover-photo').length && $(window).width() > 755 && $(window).scrollTop() >= $('#cover-photo').height()) {
+			$('header').fadeIn();
+			$('main').css('opacity', 1);
+			$('aside, section').css('padding-top', 71 + 'px');
+			$(window).scrollTop($(window).scrollTop() - $('#cover-photo').height())
+			$('.navbar-fixed-top').css('position', 'fixed');
+			$('#cover-photo').remove();
+		}
+		if($('#cover-photo').length) {
+			$('main').css('opacity', ($(window).scrollTop()/$('#cover-photo').height()).toFixed(1));
+		}
+	});
+
+	$(window).resize(function () {
+		if($('#cover-photo').length && $(window).width() < 755) {
+			$('main').css('opacity', 1);
+			$('aside, section').css('padding-top', 71 + 'px');
+			$('.navbar-fixed-top').css('position', 'fixed');
+			$('#cover-photo').remove();
+		}
+
+	});
+</script>
+
+<div id="cover-photo">
+	{{$photo_html}}
+	<div id="cover-photo-caption">
+		<div class="cover-photo-title">
+			{{$title}}
+		</div>
+		<div class="cover-photo-subtitle">
+			{{$subtitle}}
+		</div>
+	</div>
+</div>