ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(viewer): Enhance sidebar functionality with adjustable width and responsive behavior

Browse Source
This commit is contained in:
Ross
2026-05-15 20:28:05 +01:00
parent 4f61e43b8c
commit f4d990676a
1 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/collection_case_view_take.html
+43
View File
@@ -530,6 +530,8 @@
top: 0;
right: 0;
width: min(850px, 95vw);
min-width: 360px;
max-width: 95vw;
height: 100vh;
background: var(--bs-body-bg);
border-left: 1px solid var(--bs-border-color);
@@ -539,6 +541,8 @@
transition: transform 0.2s ease-in-out;
display: flex;
flex-direction: column;
resize: horizontal;
overflow: auto;
}
.viewer-sidebar.open {
@@ -577,6 +581,17 @@
.viewer-sidebar-body .viewer-resize-handle {
display: none;
}
body.viewer-sidebar-open {
margin-right: var(--viewer-sidebar-width, min(850px, 95vw));
transition: margin-right 0.2s ease-in-out;
}
@media (max-width: 991.98px) {
body.viewer-sidebar-open {
margin-right: 0;
}
}
</style>
{% endblock %}
@@ -964,6 +979,7 @@
var HEIGHT_KEY = 'rad_viewer_h_' + COLL_PK;
var MODE_KEY = 'rad_viewer_mode_' + COLL_PK;
var POPOUT_STATE_KEY = 'rad_local_viewer_popout_state';
var SIDEBAR_W_KEY = 'rad_viewer_w_' + COLL_PK;
var panel = document.getElementById('viewer-panel');
var moveableHome = document.getElementById('viewer-moveable-home');
@@ -976,6 +992,7 @@
var sidebarCloseBtn = document.getElementById('viewer-sidebar-close-btn');
var popoutBtn = document.getElementById('viewer-popout-btn');
var mainViewerEl = document.getElementById('main_viewer');
var rootStyle = document.documentElement.style;
if (!panel || !moveableHome || !moveable || !container || !mainViewerEl) {
return;
@@ -991,6 +1008,29 @@
container.style.height = parseInt(savedH, 10) + 'px';
}
function applySidebarWidth(px) {
if (!sidebarEl || !px || isNaN(px)) return;
var clamped = Math.max(360, Math.min(window.innerWidth * 0.95, Math.round(px)));
sidebarEl.style.width = clamped + 'px';
rootStyle.setProperty('--viewer-sidebar-width', clamped + 'px');
}
var savedW = localStorage.getItem(SIDEBAR_W_KEY);
if (savedW && !isNaN(parseInt(savedW, 10))) {
applySidebarWidth(parseInt(savedW, 10));
} else if (sidebarEl) {
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
}
if (sidebarEl && 'ResizeObserver' in window) {
var sidebarResizeObserver = new ResizeObserver(function () {
var width = Math.round(sidebarEl.getBoundingClientRect().width);
rootStyle.setProperty('--viewer-sidebar-width', width + 'px');
localStorage.setItem(SIDEBAR_W_KEY, width);
});
sidebarResizeObserver.observe(sidebarEl);
}
var persistHeight = function () {
localStorage.setItem(HEIGHT_KEY, Math.round(container.getBoundingClientRect().height));
};
@@ -1014,6 +1054,8 @@
if (!sidebarEl || !sidebarBody) return;
sidebarBody.appendChild(moveable);
sidebarEl.classList.add('open');
document.body.classList.add('viewer-sidebar-open');
rootStyle.setProperty('--viewer-sidebar-width', Math.round(sidebarEl.getBoundingClientRect().width) + 'px');
if (sidebarBtn) {
sidebarBtn.innerHTML = '<i class="bi bi-x-lg"></i> <span class="d-none d-sm-inline">Close sidebar</span>';
sidebarBtn.classList.replace('btn-outline-secondary', 'btn-secondary');
@@ -1025,6 +1067,7 @@
if (!sidebarEl) return;
moveableHome.appendChild(moveable);
sidebarEl.classList.remove('open');
document.body.classList.remove('viewer-sidebar-open');
if (sidebarBtn) {
sidebarBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i> <span class="d-none d-sm-inline">Sidebar</span>';
sidebarBtn.classList.replace('btn-secondary', 'btn-outline-secondary');