jlengrand/bugsink
1
0
Fork 0
mirror of https://github.com/jlengrand/bugsink.git synced 2026-03-10 08:01:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

PoC page/scroll-stability when collapsing

Browse Source
This commit is contained in:
Klaas van Schelven
2023-11-17 18:56:01 +01:00
parent 73764a11d4
commit ab72931bf0
2 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/js/issue.js
View File

@@ -1,15 +1,35 @@
"use strict";
function distanceToWindowBottom() {
// https://stackoverflow.com/a/2800676/339144
let scrollPosition = window.pageYOffset;
let windowSize = window.innerHeight;
let bodyHeight = document.body.offsetHeight;
return Math.max(bodyHeight - (scrollPosition + windowSize), 0);
}
onscroll = (event) => {
console.log(distanceToWindowBottom());
};
// This is the important part!
function collapseSection(element) {
if (element.getAttribute("data-collapsed") === "true") {
return;
}
element.classList.remove("xl:flex"); // this appears to be necessary, not sure why
// get the height of the element's inner content, regardless of its actual size
var sectionHeight = element.scrollHeight;
let bodyHeightPreCollapse = document.body.offsetHeight;
console.log("?", sectionHeight, distanceToWindowBottom());
if (sectionHeight > distanceToWindowBottom()) {
let body = document.querySelector("body");
console.log((bodyHeightPreCollapse - distanceToWindowBottom()) + "px");
body.style.minHeight = (bodyHeightPreCollapse - distanceToWindowBottom()) + "px";
}
element.classList.remove("xl:flex"); // this appears to be necessary, not sure why
// temporarily disable all css transitions
var elementTransition = element.style.transition;

17
theme/templates/base.html
View File

@@ -9,15 +9,16 @@
</head>
<body>
<div class="flex pl-4 bg-slate-200">
<a href="/issues/1/"><div class="p-4 hover:bg-slate-400">My first project</div></a> {# or, if you're single-org, or single-project, just show that #}
{# <div class="p-4 hover:bg-slate-400">Settings</div>#}
<a href="/admin/"><div class="p-4 hover:bg-slate-400">Admin</div></a>
<div id="content">
<div class="flex pl-4 bg-slate-200">
<a href="/issues/1/"><div class="p-4 hover:bg-slate-400">My first project</div></a> {# or, if you're single-org, or single-project, just show that #}
{# <div class="p-4 hover:bg-slate-400">Settings</div>#}
<a href="/admin/"><div class="p-4 hover:bg-slate-400">Admin</div></a>
</div>
<div>
{% block content %}{% endblock %}
</div>
</div>
<div>
{% block content %}{% endblock %}
</div>
{% block extra_js %}{% endblock %}
</body>
</html>