Fix mobile lightbox sidebar overlap and add collapse setting (#141)
- Fix sidebar width calculation for mobile/tablet devices to prevent image overlap - Add 'Collapse Sidebar by Default' setting in Display Settings - Fix arrow direction to be intuitive (right when open, left when closed) - Make sidebar fully slide off-screen when collapsed instead of partial visibility
This commit is contained in:
develop1st
@@ -253,6 +253,10 @@
|
||||
<label class="text-xs text-pm-secondary">Show Media Info</label>
|
||||
<input type="checkbox" id="showImageInfoToggle" checked class="w-4 h-4 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent">
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-xs text-pm-secondary">Collapse Sidebar by Default</label>
|
||||
<input type="checkbox" id="sidebarCollapsedByDefaultToggle" class="w-4 h-4 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Settings -->
|
||||
|
||||
+22
-1
@@ -425,6 +425,11 @@
|
||||
|
||||
document.body.appendChild(sidebar);
|
||||
|
||||
// Apply default collapsed state from settings
|
||||
if (this.getSettings().sidebarCollapsedByDefault) {
|
||||
sidebar.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Load metadata for the current image (ALWAYS use original for metadata)
|
||||
const originalImageUrl = originalImage.dataset.original || originalImage.src;
|
||||
console.log('Loading metadata from original image:', originalImageUrl);
|
||||
@@ -509,9 +514,10 @@
|
||||
// Create a modal that matches the screenshot design
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'fixed inset-0 bg-black z-50 flex';
|
||||
modal.id = 'image-viewer-modal';
|
||||
modal.innerHTML = `
|
||||
<!-- Image area with navigation -->
|
||||
<div class="flex-1 flex items-center justify-center relative">
|
||||
<div class="flex-1 flex items-center justify-center relative image-viewer-area">
|
||||
<!-- Navigation arrows -->
|
||||
<button class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-pm text-xl z-10" id="prevImageBtn">
|
||||
‹
|
||||
@@ -580,6 +586,12 @@
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Apply default collapsed state from settings
|
||||
const sidebarInModal = modal.querySelector('.metadata-sidebar');
|
||||
if (sidebarInModal && this.getSettings().sidebarCollapsedByDefault) {
|
||||
sidebarInModal.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Add navigation functionality
|
||||
this.setupImageNavigation(modal, imageUrl);
|
||||
|
||||
@@ -678,6 +690,12 @@
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Apply default collapsed state from settings
|
||||
const sidebarInVideoModal = modal.querySelector('.metadata-sidebar');
|
||||
if (sidebarInVideoModal && this.getSettings().sidebarCollapsedByDefault) {
|
||||
sidebarInVideoModal.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Set up video controls
|
||||
this.setupVideoControls(modal, settings);
|
||||
|
||||
@@ -1658,6 +1676,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
|
||||
document.getElementById('autoLoadMetadataToggle').checked = settings.autoLoadMetadata;
|
||||
document.getElementById('cacheMetadataToggle').checked = settings.cacheMetadata;
|
||||
document.getElementById('showFilePathsToggle').checked = settings.showFilePaths;
|
||||
document.getElementById('sidebarCollapsedByDefaultToggle').checked = settings.sidebarCollapsedByDefault;
|
||||
document.getElementById('showImageInfoToggle').checked = settings.showImageInfo;
|
||||
document.getElementById('debugModeToggle').checked = settings.debugMode;
|
||||
document.getElementById('checkThumbnailsAtStartup').checked = settings.checkThumbnailsAtStartup;
|
||||
@@ -1691,6 +1710,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
|
||||
autoLoadMetadata: true,
|
||||
cacheMetadata: true,
|
||||
showFilePaths: true,
|
||||
sidebarCollapsedByDefault: false,
|
||||
debugMode: false,
|
||||
apiTimeout: 30,
|
||||
thumbnailsGenerated: false,
|
||||
@@ -1724,6 +1744,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
|
||||
autoLoadMetadata: document.getElementById('autoLoadMetadataToggle').checked,
|
||||
cacheMetadata: document.getElementById('cacheMetadataToggle').checked,
|
||||
showFilePaths: document.getElementById('showFilePathsToggle').checked,
|
||||
sidebarCollapsedByDefault: document.getElementById('sidebarCollapsedByDefaultToggle').checked,
|
||||
debugMode: document.getElementById('debugModeToggle').checked,
|
||||
apiTimeout: parseInt(document.getElementById('apiTimeoutInput').value),
|
||||
thumbnailsGenerated: this.getSettings().thumbnailsGenerated, // Preserve this
|
||||
|
||||
@@ -143,10 +143,36 @@
|
||||
flex-direction: column !important;
|
||||
z-index: 10000 !important;
|
||||
transition: transform 0.3s ease-in-out !important;
|
||||
/* Ensure sidebar doesn't exceed viewport width on mobile */
|
||||
max-width: 100vw !important;
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
.metadata-sidebar.collapsed {
|
||||
transform: translateX(340px) !important;
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments - adjust all related elements */
|
||||
@media (max-width: 1024px) {
|
||||
.metadata-sidebar {
|
||||
width: min(70vw, 320px) !important;
|
||||
}
|
||||
|
||||
.metadata-sidebar.collapsed {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metadata-sidebar {
|
||||
width: min(75vw, 300px) !important;
|
||||
background: var(--pm-bg-surface) !important;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.metadata-sidebar.collapsed {
|
||||
transform: translateX(100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-collapse-btn {
|
||||
@@ -160,7 +186,7 @@
|
||||
border: 1px solid var(--pm-border);
|
||||
border-right: none;
|
||||
border-radius: var(--pm-radius-sm) 0 0 var(--pm-radius-sm);
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
@@ -169,8 +195,22 @@
|
||||
}
|
||||
|
||||
.metadata-collapse-btn:hover { background: var(--pm-bg-hover); }
|
||||
.metadata-collapse-btn svg { transition: transform 0.3s ease; }
|
||||
.metadata-sidebar.collapsed .metadata-collapse-btn svg { transform: rotate(180deg); }
|
||||
.metadata-collapse-btn svg {
|
||||
transition: transform 0.3s ease;
|
||||
transform: rotate(180deg); /* Point right when sidebar is open */
|
||||
}
|
||||
.metadata-sidebar.collapsed .metadata-collapse-btn svg {
|
||||
transform: rotate(0deg); /* Point left when sidebar is collapsed */
|
||||
}
|
||||
|
||||
/* Mobile: adjust button on smaller screens but keep visible */
|
||||
@media (max-width: 480px) {
|
||||
.metadata-collapse-btn {
|
||||
width: 24px;
|
||||
height: 60px;
|
||||
left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Tag Chips ───────────────────────────────────── */
|
||||
.tag-chip {
|
||||
|
||||
Reference in New Issue
Block a user