mirror of
https://github.com/PeWu/topola-viewer.git
synced 2026-07-18 09:41:47 +00:00
3effe501b7
Aligns the "Data source" list items in the side panel by resolving a browser-specific layout discrepancy where icons with different intrinsic widths (e.g., "edit" vs "calendar") caused uneven text indentation and vertical misalignment. - Refactored `SourceHead` in `head.tsx` to wrap all list icons in a `list-icon-wrapper` container instead of using `<List.Icon>` directly. - Added CSS rules in `index.css` to format `.list-icon-wrapper` and its sibling `.content` as table cells aligned at the top, with a fixed width of `20px` for the icon column. - Converted relative sizing (`em`) to absolute pixels (`px`) for pixel-perfect cross-browser precision. - Updated Playwright visual regression snapshots to match the newly aligned and corrected UI layout.
Side Panel Directory
This directory contains components and logic for the side panel of the Topola Viewer application. The side panel is used to display detailed information about a selected individual and to configure chart settings.
Purpose
The purpose of this directory is to provide a collapsible side panel that offers:
- Detailed Information: Displays comprehensive data about a selected person, including their name, images, events, facts, notes, and sources, extracted from the loaded GEDCOM file.
- Chart Configuration: Provides controls for users to customize the appearance of the genealogical chart (e.g., color schemes, showing/hiding IDs, and sex indicators).
This directory acts as a container for these features, organizing them into specific subdirectories:
- config: Contains the UI and logic for managing chart display settings.
- details: Contains components for rendering the detailed view of an individual's data.
- head: Contains components to display metadata from the GEDCOM file header.
Files in this Directory
- side-panel.tsx: The main React component that implements the side panel. It manages the layout, switching between expanded and collapsed states. When expanded, it displays a tabbed interface with "Info" (details) and "Settings" (configuration) panes. When collapsed in a mobile view, it shows a minimal view of the selected person's name. It also includes the button to toggle the panel's expanded state.