diff --git a/static/css/main.css b/static/css/main.css index 5202aab..2a54ee0 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -2655,7 +2655,7 @@ pre code { } .objects-table-container { - max-height: none; + max-height: 60vh; } .preview-card { diff --git a/static/js/bucket-detail-main.js b/static/js/bucket-detail-main.js index 90517fe..2648ec3 100644 --- a/static/js/bucket-detail-main.js +++ b/static/js/bucket-detail-main.js @@ -98,6 +98,7 @@ const previewMetadata = document.getElementById('preview-metadata'); const previewMetadataList = document.getElementById('preview-metadata-list'); const previewPlaceholder = document.getElementById('preview-placeholder'); + const previewPlaceholderDefault = previewPlaceholder ? previewPlaceholder.innerHTML : ''; const previewImage = document.getElementById('preview-image'); const previewVideo = document.getElementById('preview-video'); const previewAudio = document.getElementById('preview-audio'); @@ -1957,6 +1958,10 @@ [previewImage, previewVideo, previewAudio, previewIframe].forEach((el) => { if (!el) return; el.classList.add('d-none'); + if (el.tagName === 'IMG') { + el.removeAttribute('src'); + el.onload = null; + } if (el.tagName === 'VIDEO' || el.tagName === 'AUDIO') { el.pause(); el.removeAttribute('src'); @@ -1969,6 +1974,7 @@ previewText.classList.add('d-none'); previewText.textContent = ''; } + previewPlaceholder.innerHTML = previewPlaceholderDefault; previewPlaceholder.classList.remove('d-none'); }; @@ -2016,9 +2022,18 @@ const previewUrl = row.dataset.previewUrl; const lower = row.dataset.key.toLowerCase(); if (previewUrl && lower.match(/\.(png|jpg|jpeg|gif|webp|svg|ico|bmp)$/)) { + previewPlaceholder.innerHTML = '