From 08663d3375f45705de4de577f6be2ef8353cc17e Mon Sep 17 00:00:00 2001
From: Mikael Lenander <mikael.lenander1@gmail.com>
Date: Wed, 16 Aug 2023 13:14:49 +0300
Subject: [PATCH] Fix sticky alerts that hide information when using anchor
 links

Course pages may show a sticky alert that the course instance has
ended. The alert may hide information when anchor links are used
since the alert goes on top of the anchor target like a heading.
This commit adds padding to the target so that only empty space
is really covered by the sticky alert at the start before
the user starts to scroll the page.

Fixes #1207
---
 course/templates/course/course_base.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/course/templates/course/course_base.html b/course/templates/course/course_base.html
index 799dbc0a7..556c2884b 100644
--- a/course/templates/course/course_base.html
+++ b/course/templates/course/course_base.html
@@ -202,6 +202,19 @@ <h4 class="modal-title" id="unenroll-modal-title">
 	</div>
 </div>
 {% endcomment %}
+
+<script>
+$(function() {
+	const hash = window.location.hash;
+	const target = $(hash);
+	const stickyAlert = $('.sticky-alert');
+	if (target.length > 0 && stickyAlert.length > 0) {
+		const alertHeight = stickyAlert[0].offsetHeight;
+		target.css('padding-top', alertHeight + 'px');
+	}
+});
+</script>
+
 {% endblock %}
 
 {% block mobilemenu %}