From 68a238fc2d968366d1632c5f43558a664128d455 Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:01:53 +0200 Subject: [PATCH 1/6] add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header --- styles/theme-medium.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 7bb0475473..135048aa16 100644 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -65,6 +65,10 @@ a:focus, outline:0; } +/* add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header */ +[id] { + scroll-margin-top: 60px; +} ul { list-style-type: disc; From f5fe1e3165323adf41d07a2a4a7bd6ab9c80b0da Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:43:39 +0200 Subject: [PATCH 2/6] Update theme-base.css --- styles/theme-base.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/theme-base.css b/styles/theme-base.css index 79423cbee6..4611c928af 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -1528,6 +1528,11 @@ div.soft-deprecation-notice blockquote.sidebar { body { margin:3.25rem 0 0; } + /* add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header */ + [id] { + scroll-margin-top: 3.25rem; + } + #breadcrumbs { display:block; } From 17d0c12cf4a3328cff08058dd2212f4904a6d959 Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:44:07 +0200 Subject: [PATCH 3/6] Update theme-medium.css --- styles/theme-medium.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/styles/theme-medium.css b/styles/theme-medium.css index 135048aa16..dbba329dff 100644 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -65,11 +65,6 @@ a:focus, outline:0; } -/* add a top-margin to all elements which get referenced by anchor-urls, so they are not covered by the fixed header */ -[id] { - scroll-margin-top: 60px; -} - ul { list-style-type: disc; } From 005c029f95144c825d6cc182a38eafd02a95fbe1 Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:44:18 +0200 Subject: [PATCH 4/6] Update theme-medium.css --- styles/theme-medium.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/theme-medium.css b/styles/theme-medium.css index dbba329dff..7bb0475473 100644 --- a/styles/theme-medium.css +++ b/styles/theme-medium.css @@ -65,6 +65,7 @@ a:focus, outline:0; } + ul { list-style-type: disc; } From 22fe776b0f45fe2c08df8888f579d91a1ccf8cc2 Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:46:30 +0200 Subject: [PATCH 5/6] remove javascript scroll magic --- js/common.js | 73 ---------------------------------------------------- 1 file changed, 73 deletions(-) diff --git a/js/common.js b/js/common.js index 90b52f3156..8813243a72 100644 --- a/js/common.js +++ b/js/common.js @@ -23,79 +23,6 @@ var PHP_NET = {}; PHP_NET.HEADER_HEIGHT = 52; -/** - * Scrolls the page so that the given element will be shown into view. - * - * @param HTMLElement element The element to show. - * @param Number animationDuration Animation duration in milliseconds. Defaults to 400ms. - * @param Function callback Function to execute after the animation is complete. - * @return void - */ -PHP_NET.scrollElementIntoView = function (element, animationDuration, callback) { - animationDuration = animationDuration || 400; - var destTop = $(element).offset().top - PHP_NET.HEADER_HEIGHT; - var callbackCalled = false; - // Online sources claim that some browsers scroll body, others scroll html - // so we scroll both for compatibility. However, the callback function is - // called for each element so the callback function will trigger twice, - // once for html and once for body. This is why we track whether the - // callback has been called to prevent multiple executions. - $("html, body").animate( - {scrollTop: destTop}, - animationDuration, - function () { - if (!callbackCalled) { - callbackCalled = true; - callback(); - } - } - ); -}; - -/** - * Enables "smooth scrolling to page anchor" for page links. - */ -document.body.addEventListener("click", function (e) { - if (e.target && e.target.nodeName === "A") { - var href = e.target.getAttribute("href"); - if (href && href[0] === "#") { - var id = href.slice(1); - var target = document.getElementById(id); - // temporarily remove the id="" attribute so that the UA's - // default scrolling is prevented - target.id = ""; - if (target) { - PHP_NET.scrollElementIntoView(target, null, function () { - // restore the id="" attribute - target.id = id; - }); - } - } - } -}); - -/** - * Enables "smooth scrolling to page anchor" when page was just loaded. - */ -document.addEventListener("DOMContentLoaded", function () { - var target = (location.hash - ? document.getElementById(location.hash.slice(1)) - : null - ); - if (target) { - // temporarily remove the id="" attribute so that the UA's default - // scrolling is prevented - var id = target.id; - target.id = ""; - window.addEventListener("load", function () { - PHP_NET.scrollElementIntoView(target, null, function() { - // restore the id="" attribute to the element - target.id = id; - }); - }); - } -}); - Mousetrap.bind('up up down down left right left right b a enter', function() { $(".brand img").attr("src", "/images/php_konami.gif"); }); From 32f8dad744b57e500ec911482a0fa1ce9e0cd4a0 Mon Sep 17 00:00:00 2001 From: Markus Staab Date: Tue, 25 Aug 2020 15:47:13 +0200 Subject: [PATCH 6/6] enable css-native smooth scrolling --- styles/theme-base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/theme-base.css b/styles/theme-base.css index 4611c928af..5a55a0815d 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -54,6 +54,7 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + scroll-behavior: smooth; } a { border-bottom:1px solid;