From 6562adeb7b3ead1e199272b450a61ad07faf48f4 Mon Sep 17 00:00:00 2001 From: matcornic Date: Thu, 23 Nov 2017 19:46:56 +0100 Subject: [PATCH] fix #83 no Title and Edit this page text when on mobile + fixed top bar width pbm on resize by switching to sticky.js instead of sticky-kit --- layouts/partials/footer.html | 2 +- layouts/partials/header.html | 8 +- static/css/hugo-theme.css | 18 +- static/css/theme.css | 1 - static/js/hugo-learn.js | 5 +- static/js/jquery.sticky-kit.min.js | 9 - static/js/jquery.sticky.js | 288 +++++++++++++++++++++++++++++ 7 files changed, 305 insertions(+), 26 deletions(-) delete mode 100644 static/js/jquery.sticky-kit.min.js create mode 100755 static/js/jquery.sticky.js diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d570b4533c..4fd380dcf0 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -56,7 +56,7 @@ - + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0b7dd4ebc0..de16c932e8 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -39,18 +39,18 @@ {{ partial "menu.html" . }}
-
+
{{if not .IsHome}} -
+
{{ if and (or .IsPage .IsSection) .Site.Params.editURL }} {{ $File := .File }} {{ $Site := .Site }} {{with $File.Path }} {{ end }} diff --git a/static/css/hugo-theme.css b/static/css/hugo-theme.css index 2b46685d7a..741cab196a 100644 --- a/static/css/hugo-theme.css +++ b/static/css/hugo-theme.css @@ -82,14 +82,6 @@ body { margin-right: 1rem !important; } -#top-bar { - z-index: 1000; -} - -#top-bar.is_stuck { - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); -} - .btn { display: inline-block !important; padding: 6px 12px !important; @@ -249,4 +241,14 @@ figcaption h4 { .select-style :hover { cursor: pointer; +} + +@media only all and (max-width: 47.938em) { + #breadcrumbs .links, #top-github-link-text { + display: none; + } +} + +.is-sticky #top-bar { + box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.1); } \ No newline at end of file diff --git a/static/css/theme.css b/static/css/theme.css index 511b17fe28..d449cd9c36 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -985,7 +985,6 @@ td { #top-bar { background: #F6F6F6; border-radius: 2px; - margin: 0rem -1rem 2rem; padding: 0 1rem; height: 0; min-height: 3rem; diff --git a/static/js/hugo-learn.js b/static/js/hugo-learn.js index a90f35a772..b20313a2cc 100644 --- a/static/js/hugo-learn.js +++ b/static/js/hugo-learn.js @@ -56,9 +56,8 @@ images.each(function(index){ }); // Stick the top to the top of the screen when scrolling -$("#top-bar").stick_in_parent( { - parent: ".sticky-parent", - spacer: ".sticky-spacer", +$(document).ready(function(){ + $("#top-bar").sticky({topSpacing:0, zIndex: 1000}); }); diff --git a/static/js/jquery.sticky-kit.min.js b/static/js/jquery.sticky-kit.min.js deleted file mode 100644 index e2a3c6de9e..0000000000 --- a/static/js/jquery.sticky-kit.min.js +++ /dev/null @@ -1,9 +0,0 @@ -/* - Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net -*/ -(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k)); -if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("
"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q, -u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),eb&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}), -a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize", -y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n dwh) ? dwh - scrollTop : 0; + + for (var i = 0, l = sticked.length; i < l; i++) { + var s = sticked[i], + elementTop = s.stickyWrapper.offset().top, + etse = elementTop - s.topSpacing - extra; + + //update height in case of dynamic content + s.stickyWrapper.css('height', s.stickyElement.outerHeight()); + + if (scrollTop <= etse) { + if (s.currentTop !== null) { + s.stickyElement + .css({ + 'width': '', + 'position': '', + 'top': '', + 'z-index': '' + }); + s.stickyElement.parent().removeClass(s.className); + s.stickyElement.trigger('sticky-end', [s]); + s.currentTop = null; + } + } + else { + var newTop = documentHeight - s.stickyElement.outerHeight() + - s.topSpacing - s.bottomSpacing - scrollTop - extra; + if (newTop < 0) { + newTop = newTop + s.topSpacing; + } else { + newTop = s.topSpacing; + } + if (s.currentTop !== newTop) { + var newWidth; + if (s.getWidthFrom) { + padding = s.stickyElement.innerWidth() - s.stickyElement.width(); + newWidth = $(s.getWidthFrom).width() - padding || null; + } else if (s.widthFromWrapper) { + newWidth = s.stickyWrapper.width(); + } + if (newWidth == null) { + newWidth = s.stickyElement.width(); + } + s.stickyElement + .css('width', newWidth) + .css('position', 'fixed') + .css('top', newTop) + .css('z-index', s.zIndex); + + s.stickyElement.parent().addClass(s.className); + + if (s.currentTop === null) { + s.stickyElement.trigger('sticky-start', [s]); + } else { + // sticky is started but it have to be repositioned + s.stickyElement.trigger('sticky-update', [s]); + } + + if (s.currentTop === s.topSpacing && s.currentTop > newTop || s.currentTop === null && newTop < s.topSpacing) { + // just reached bottom || just started to stick but bottom is already reached + s.stickyElement.trigger('sticky-bottom-reached', [s]); + } else if(s.currentTop !== null && newTop === s.topSpacing && s.currentTop < newTop) { + // sticky is started && sticked at topSpacing && overflowing from top just finished + s.stickyElement.trigger('sticky-bottom-unreached', [s]); + } + + s.currentTop = newTop; + } + + // Check if sticky has reached end of container and stop sticking + var stickyWrapperContainer = s.stickyWrapper.parent(); + var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing); + + if( unstick ) { + s.stickyElement + .css('position', 'absolute') + .css('top', '') + .css('bottom', 0) + .css('z-index', ''); + } else { + s.stickyElement + .css('position', 'fixed') + .css('top', newTop) + .css('bottom', '') + .css('z-index', s.zIndex); + } + } + } + }, + resizer = function() { + windowHeight = $window.height(); + + for (var i = 0, l = sticked.length; i < l; i++) { + var s = sticked[i]; + var newWidth = null; + if (s.getWidthFrom) { + if (s.responsiveWidth) { + newWidth = $(s.getWidthFrom).width(); + } + } else if(s.widthFromWrapper) { + newWidth = s.stickyWrapper.width(); + } + if (newWidth != null) { + s.stickyElement.css('width', newWidth); + } + } + }, + methods = { + init: function(options) { + return this.each(function() { + var o = $.extend({}, defaults, options); + var stickyElement = $(this); + + var stickyId = stickyElement.attr('id'); + var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName; + var wrapper = $('
') + .attr('id', wrapperId) + .addClass(o.wrapperClassName); + + stickyElement.wrapAll(function() { + if ($(this).parent("#" + wrapperId).length == 0) { + return wrapper; + } +}); + + var stickyWrapper = stickyElement.parent(); + + if (o.center) { + stickyWrapper.css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"}); + } + + if (stickyElement.css("float") === "right") { + stickyElement.css({"float":"none"}).parent().css({"float":"right"}); + } + + o.stickyElement = stickyElement; + o.stickyWrapper = stickyWrapper; + o.currentTop = null; + + sticked.push(o); + + methods.setWrapperHeight(this); + methods.setupChangeListeners(this); + }); + }, + + setWrapperHeight: function(stickyElement) { + var element = $(stickyElement); + var stickyWrapper = element.parent(); + if (stickyWrapper) { + stickyWrapper.css('height', element.outerHeight()); + } + }, + + setupChangeListeners: function(stickyElement) { + if (window.MutationObserver) { + var mutationObserver = new window.MutationObserver(function(mutations) { + if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) { + methods.setWrapperHeight(stickyElement); + } + }); + mutationObserver.observe(stickyElement, {subtree: true, childList: true}); + } else { + if (window.addEventListener) { + stickyElement.addEventListener('DOMNodeInserted', function() { + methods.setWrapperHeight(stickyElement); + }, false); + stickyElement.addEventListener('DOMNodeRemoved', function() { + methods.setWrapperHeight(stickyElement); + }, false); + } else if (window.attachEvent) { + stickyElement.attachEvent('onDOMNodeInserted', function() { + methods.setWrapperHeight(stickyElement); + }); + stickyElement.attachEvent('onDOMNodeRemoved', function() { + methods.setWrapperHeight(stickyElement); + }); + } + } + }, + update: scroller, + unstick: function(options) { + return this.each(function() { + var that = this; + var unstickyElement = $(that); + + var removeIdx = -1; + var i = sticked.length; + while (i-- > 0) { + if (sticked[i].stickyElement.get(0) === that) { + splice.call(sticked,i,1); + removeIdx = i; + } + } + if(removeIdx !== -1) { + unstickyElement.unwrap(); + unstickyElement + .css({ + 'width': '', + 'position': '', + 'top': '', + 'float': '', + 'z-index': '' + }) + ; + } + }); + } + }; + + // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): + if (window.addEventListener) { + window.addEventListener('scroll', scroller, false); + window.addEventListener('resize', resizer, false); + } else if (window.attachEvent) { + window.attachEvent('onscroll', scroller); + window.attachEvent('onresize', resizer); + } + + $.fn.sticky = function(method) { + if (methods[method]) { + return methods[method].apply(this, slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method ) { + return methods.init.apply( this, arguments ); + } else { + $.error('Method ' + method + ' does not exist on jQuery.sticky'); + } + }; + + $.fn.unstick = function(method) { + if (methods[method]) { + return methods[method].apply(this, slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method ) { + return methods.unstick.apply( this, arguments ); + } else { + $.error('Method ' + method + ' does not exist on jQuery.sticky'); + } + }; + $(function() { + setTimeout(scroller, 0); + }); +}));