harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

several cover photo widget enhancements:

Browse Source 
- 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
This commit is contained in:
redmatrix 2016-08-23 19:13:46 -07:00
parent d3369384d1
commit a5035dee74
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
view/tpl/cover_photo_widget.tpl
View File

@ -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">