Compare commits

...
2 Commits
Author SHA1 Message Date
Will Miao 4bf9a4b640 refactor(download): rename locationStep id to downloadLocationStep
The download modal's step shared the 'locationStep' id with the import
modal, so getElementById('locationStep') could resolve to the wrong
element depending on template include order. The import flow relied on
an injected display:block !important rule to work around it.

Rename the download modal's step id and update all references so each
modal owns a unique step id.
2026-08-08 08:50:36 +08:00
Will Miao c5088772e8 fix(ui): pin import modal action buttons with sticky footer
Make the import modal a flex column with a scrollable step area so the
Back/Import buttons stay visible on short viewports (1080p / 150% zoom)
instead of being cut off at the bottom of the scroll flow.

Also reset step scroll positions via class since 'locationStep' has a
duplicate id in the download modal template.
2026-08-08 08:49:20 +08:00
5 changed files with 38 additions and 10 deletions
+31
View File
@@ -1,4 +1,35 @@
/* Import Modal Styles */
/* Sticky footer layout: fixed header, scrollable step content, pinned action buttons.
Ensures Back/Import buttons stay visible on short viewports (e.g. 1080p or 150% zoom). */
#importModal .modal-content {
display: flex;
flex-direction: column;
overflow: hidden; /* The active step scrolls instead of the whole modal */
}
#importModal .modal-header {
flex-shrink: 0;
}
#importModal .import-step {
flex: 1 1 auto;
min-height: 0; /* Allow the step to shrink and scroll within the flex container */
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
}
#importModal .import-step .modal-actions {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--lora-surface);
border-top: 1px solid var(--lora-border);
padding-top: var(--space-2);
padding-bottom: var(--space-1);
}
.import-step {
margin: var(--space-2) 0;
transition: none !important;
+3 -3
View File
@@ -754,7 +754,7 @@ export class DownloadManager {
this.selectedFile?.id, this.selectedFile?.name, this.selectedFile?.type, this.selectedFile?.metadata);
document.getElementById('fileSelectionStep').style.display = 'none';
document.getElementById('locationStep').style.display = 'block';
document.getElementById('downloadLocationStep').style.display = 'block';
this.proceedToLocationContent();
}
@@ -788,7 +788,7 @@ export class DownloadManager {
}
document.querySelectorAll('.download-step').forEach(step => step.style.display = 'none');
document.getElementById('locationStep').style.display = 'block';
document.getElementById('downloadLocationStep').style.display = 'block';
await this.proceedToLocationContent();
}
@@ -1563,7 +1563,7 @@ export class DownloadManager {
}
backToVersions() {
document.getElementById('locationStep').style.display = 'none';
document.getElementById('downloadLocationStep').style.display = 'none';
if (this.isBatchMode) {
document.getElementById('batchPreviewStep').style.display = 'block';
} else {
@@ -47,11 +47,8 @@ export class ImportStepManager {
targetStep.offsetHeight;
}
// Scroll modal content to top
const modalContent = document.querySelector('#importModal .modal-content');
if (modalContent) {
modalContent.scrollTop = 0;
}
// Scroll the active step back to top (steps scroll independently of the modal shell)
targetStep.scrollTop = 0;
}
}
}
@@ -60,7 +60,7 @@
</div>
<!-- Step 3: Location Selection -->
<div class="download-step" id="locationStep" style="display: none;">
<div class="download-step" id="downloadLocationStep" style="display: none;">
<div class="location-selection">
<!-- Path preview with inline toggle -->
<div class="path-preview">
@@ -118,7 +118,7 @@ function setupDownloadDom() {
<div class="download-step" id="urlStep"></div>
<div class="download-step" id="versionStep"></div>
<div class="download-step" id="fileSelectionStep"></div>
<div class="download-step" id="locationStep"></div>
<div class="download-step" id="downloadLocationStep"></div>
<div id="batchPreviewStep"></div>
<textarea id="modelUrl"></textarea>
<div id="urlError"></div>