aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl
diff options
context:
space:
mode:
authorredmatrix <git@macgirvin.com>2016-08-23 19:13:46 -0700
committerredmatrix <git@macgirvin.com>2016-08-23 19:13:46 -0700
commita5035dee74da87a529b2de938ce10bb8bb8d8346 (patch)
tree80a4a92972928b1d911c05b45a94f0158368ac67 /view/tpl
parentd3369384d15e13dba937fa89dabc273e3ca672e8 (diff)
downloadvolse-hubzilla-a5035dee74da87a529b2de938ce10bb8bb8d8346.tar.gz
volse-hubzilla-a5035dee74da87a529b2de938ce10bb8bb8d8346.tar.bz2
volse-hubzilla-a5035dee74da87a529b2de938ce10bb8bb8d8346.zip
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
Diffstat (limited to 'view/tpl')
-rwxr-xr-xview/tpl/cover_photo_widget.tpl27
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">