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

refactor: streamline sidebar positioning logic

Browse Source 
- Simplify the calculation of the sidebar's top position to ensure it aligns with the file header or sticks to the top of the viewport when necessary.
- Remove redundant opacity handling and improve clarity in the sidebar's visibility logic.
- Maintain the sidebar's position next to the content with a consistent gap.
This commit is contained in:
hamki 2026-01-01 09:50:26 +08:00
parent ed9eb57fc7
commit b92be9c334
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,27 +68,22 @@ function updateSidebarPosition(elFileView: HTMLElement, sidebar: HTMLElement): v
const segmentRect = segment.getBoundingClientRect();
const sidebarHeight = sidebar.offsetHeight;
// Calculate the maximum top position so sidebar doesn't exceed file content bottom
const maxTopPos = segmentRect.bottom - sidebarHeight;
// 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
const minTop = 12;
const maxTop = Math.max(minTop, segmentRect.bottom - sidebarHeight);
let topPos = Math.max(minTop, headerRect.top);
topPos = Math.min(topPos, maxTop);
// Align sidebar top with the file header top, with constraints:
// - minimum of 12px from viewport top
// - maximum so sidebar bottom doesn't exceed segment bottom
let topPos = Math.max(12, headerRect.top);
topPos = Math.min(topPos, maxTopPos);
sidebar.style.opacity = '';
sidebar.style.top = `${topPos}px`;
// Hide sidebar if file content is scrolled out of view
if (segmentRect.bottom < 50 || segmentRect.top > window.innerHeight) {
sidebar.style.opacity = '0';
} else {
sidebar.style.opacity = '';
sidebar.style.top = `${topPos}px`;
// Position sidebar right next to the content
const leftPos = segmentRect.right + 8; // 8px gap from content
sidebar.style.left = `${leftPos}px`;
sidebar.style.right = 'auto';
}
// Position sidebar right next to the content
const leftPos = segmentRect.right + 8; // 8px gap from content
sidebar.style.left = `${leftPos}px`;
sidebar.style.right = 'auto';
// Mark as positioned to show the sidebar (prevents flicker)
sidebar.classList.add('sidebar-positioned');