Show borders on 2 sides of the frame header when expanded too

the trick was: do it by having this border at the bottom of the framedetails.
and: to be able to collapse the border too: make div-in-div.

This gets rid of the remove-flex-when-collapsing code too
This commit is contained in:
Klaas van Schelven
2023-11-19 21:20:20 +01:00
parent 1c8b03828a
commit 1e342dbd18
2 changed files with 5 additions and 5 deletions

View File

@@ -49,8 +49,10 @@
</div>
</div>
<div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %} {% if forloop.parentloop.last and forloop.last %}xl:flex{% endif %} overflow-hidden transition-all"
<div class="js-frame-details {% if frame.in_app %}js-in-app{% endif %}{% if frame.in_app %}bg-slate-300{% else %}border-slate-300{% endif %} overflow-hidden transition-all"
{% if not forloop.parentloop.last or not forloop.last %}data-collapsed="true" style="height: 0px"{% endif %}>
<div class="border-b-2 xl:flex border-slate-300">
<div class="xl:w-1/2">
<ol class="list-decimal ml-16 mt-6 mb-6" start="100">
{% for line in frame.pre_context %}<li><div class="whitespace-pre w-full">{{ line }} {# leave space to avoid collapse #}</div></li>{% endfor %}
@@ -71,6 +73,8 @@
</div>
{% endfor %}
</div>
</div>
</div>
</div>

View File

@@ -34,8 +34,6 @@ function collapseSection(element) {
setBodyMinHeight();
element.classList.remove("xl:flex"); // this appears to be necessary, not sure why
// temporarily disable all css transitions
const elementTransition = element.style.transition;
element.style.transition = '';
@@ -65,8 +63,6 @@ function expandSection(element) {
setBodyMinHeight();
element.classList.add("xl:flex"); // add back
// get the height of the element's inner content, regardless of its actual size
const sectionHeight = element.scrollHeight;