Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-15 17:25:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cookbook fold: smooth max-height + opacity transition

Browse Source 
display:none toggle was instant and felt jarring during auto-fold/
auto-expand. Swapped to a CSS class `.is-folded` that transitions
max-height (0 ↔ 1200px) and opacity (0 ↔ 1) over ~280ms with ease,
so both manual chevron clicks and the scroll-driven toggles slide
in/out smoothly.
This commit is contained in:
pewdiepie-archdaemon
2026-06-13 20:14:34 +09:00
parent e6349c016e
commit f09f606bec
2 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/cookbook.js
+7 -5
View File
@@ -1404,7 +1404,9 @@ function _wireTabEvents(body) {
const dlFoldChevron = document.getElementById('cookbook-dl-tab-chevron');
if (dlFold && dlFoldBody && dlFoldChevron) {
const _setFolded = (folded, persist = true) => {
dlFoldBody.style.display = folded ? 'none' : '';
// Toggle via class so CSS transition animates the height/opacity
// — display:none was an instant on/off and felt jarring.
dlFoldBody.classList.toggle('is-folded', folded);
dlFoldChevron.textContent = folded ? '▸' : '▾';
dlFold.classList.toggle('is-folded', folded);
if (persist) {
@@ -1412,7 +1414,7 @@ function _wireTabEvents(body) {
}
};
dlFold.addEventListener('click', () => {
const folded = dlFoldBody.style.display === 'none';
const folded = dlFoldBody.classList.contains('is-folded');
_setFolded(!folded);
});
// Auto-fold on any downward scroll inside the cookbook modal,
@@ -1420,11 +1422,11 @@ function _wireTabEvents(body) {
// top of whichever scroller they're in. The chevron ▸ still
// toggles manually.
const _maybeFold = () => {
if (dlFoldBody.style.display === 'none') return;
if (dlFoldBody.classList.contains('is-folded')) return;
_setFolded(true, /* persist */ false);
};
const _maybeExpand = () => {
if (dlFoldBody.style.display !== 'none') return;
if (!dlFoldBody.classList.contains('is-folded')) return;
_setFolded(false, /* persist */ false);
};
// Capture phase so scrolls on nested scrollers (.hwfit-list,
@@ -1816,7 +1818,7 @@ function _renderRecipes() {
html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:2px;">';
html += `<h2 id="cookbook-dl-tab-fold" class="${_dlTabFolded ? 'is-folded' : ''}" style="margin:0;padding:0;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;flex:1;">Direct Download<span id="cookbook-dl-tab-chevron" style="display:inline-block;transition:transform 0.15s;font-size:1.1em;margin-left:8px;opacity:0.85;">${_dlTabFolded ? '▸' : '▾'}</span></h2>`;
html += '</div>';
html += `<div id="cookbook-dl-tab-fold-body" style="${_dlTabFolded ? 'display:none;' : ''}">`;
html += `<div id="cookbook-dl-tab-fold-body" class="${_dlTabFolded ? 'is-folded' : ''}">`;
html += '<p class="memory-desc doclib-desc" style="margin-top:6px;">Download from <a href="https://huggingface.co/models" target="_blank" rel="noopener" style="color:var(--accent,var(--red));text-decoration:none;"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:1px;"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>HuggingFace</a> by pasting model link, or download directly in the Scan section below.</p>';
html += '<div class="hwfit-container" id="hwfit-container">';
static/style.css
+19 -1
View File
@@ -10946,7 +10946,7 @@ textarea.memory-add-input {
border-radius: 4px;
font-family: inherit;
font-size: 9px;
padding: 2px 3px;
padding: 2px 8px;
cursor: pointer;
flex-shrink: 0;
}
@@ -19498,6 +19498,24 @@ body.gallery-selecting .gallery-dl-btn,
border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
padding-bottom: 6px !important;
}
/* Smooth open/close for the Direct Download body — replaces the
instant display:none toggle with a max-height + opacity slide so
auto-fold and auto-expand don't feel jarring. 1200px is a safe
upper bound for the body height; the slide only fires up to the
actual content height because content stops there. */
#cookbook-dl-tab-fold-body {
overflow: hidden;
max-height: 1200px;
opacity: 1;
transition: max-height 0.28s ease, opacity 0.18s ease, margin 0.28s ease;
}
#cookbook-dl-tab-fold-body.is-folded {
max-height: 0;
opacity: 0;
margin-top: 0;
margin-bottom: 0;
pointer-events: none;
}
/* Center the "?" glyph inside the help chip. Without text-align it sits 0.5px
left of true center because of the character's natural baseline offset. */
.hwfit-help-chip {