Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-01-24 21:46:31 +01:00
Code Issues Activity

refactor: enhance sidebar height and visibility logic

Browse Source 
- Dynamically calculate the maximum height of the sidebar to prevent it from extending below the segment bottom.
- Implement logic to hide the sidebar when the available height is insufficient, improving user experience.
- Ensure the sidebar's top position does not exceed the segment's top during scrolling.
This commit is contained in:
hamki 2026-01-16 04:07:29 +08:00
parent b92be9c334
commit 1aa08e2b5a
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web_src/js/features/file-view.ts
View File

@ -66,17 +66,27 @@ function updateSidebarPosition(elFileView: HTMLElement, sidebar: HTMLElement): v
const headerRect = fileHeader.getBoundingClientRect();
const segmentRect = segment.getBoundingClientRect();
const sidebarHeight = sidebar.offsetHeight;
// Calculate top position:
// - When file header is visible: align with file header top
// - When file header scrolls above viewport: stick to top (12px)
// - Limit so sidebar bottom doesn't go below segment bottom
// - Ensure sidebar top doesn't go above segment top (when scrolling up)
const minTop = 12;
const maxTop = Math.max(minTop, segmentRect.bottom - sidebarHeight);
let topPos = Math.max(minTop, headerRect.top);
topPos = Math.min(topPos, maxTop);
topPos = Math.max(topPos, segmentRect.top); // Don't go above segment top
// Dynamically calculate max-height so sidebar doesn't extend below segment bottom
const availableHeight = Math.max(0, segmentRect.bottom - topPos);
const cssMaxHeight = window.innerHeight - 140; // Match CSS calc(100vh - 140px)
const maxHeight = Math.min(availableHeight, cssMaxHeight);
// Hide sidebar if available height is too small
if (maxHeight < 50) {
sidebar.style.opacity = '0';
return;
}
sidebar.style.maxHeight = `${maxHeight}px`;
sidebar.style.opacity = '';
sidebar.style.top = `${topPos}px`;