matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: experimental timeline: fix connector positioning

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-02 23:32:22 +01:00
parent 4c6132205c
commit 03f24291d8
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/nicolium/src/columns/timeline.tsx
View File

@ -43,9 +43,9 @@ const TimelineStatus: React.FC<ITimelineStatus> = (props): React.JSX.Element =>
return (
<div
className={clsx(
'absolute left-10 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 dark:bg-primary-800 rtl:left-auto rtl:right-5',
'absolute left-5 z-[1] hidden w-0.5 bg-gray-200 black:bg-gray-800 dark:bg-primary-800 rtl:left-auto rtl:right-5',
{
'top-20 !block h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
'top-[calc(28px+42px)] !block h-[calc(100%-42px-8px-1rem)]': isConnectedBottom,
},
)}
/>
@ -54,16 +54,17 @@ const TimelineStatus: React.FC<ITimelineStatus> = (props): React.JSX.Element =>
return (
<div
className={clsx('relative', {
'timeline-status-connected': isConnectedBottom,
className={clsx('⁂-timeline-status relative', {
'⁂-timeline-status--connected-bottom': isConnectedBottom,
'border-b border-solid border-gray-200 dark:border-gray-800': !isConnectedBottom,
'⁂-timeline-status--connected-top': isConnectedTop,
})}
>
{renderConnector()}
{statusQuery.isPending ? (
<PlaceholderStatus variant='default' />
<PlaceholderStatus variant='slim' />
) : statusQuery.data ? (
<Status status={statusQuery.data!} {...props} />
<Status status={statusQuery.data!} variant='slim' {...props} />
) : null}
</div>
);

4
packages/nicolium/src/styles/new/statuses.scss
View File

@ -306,3 +306,7 @@
transform: rotate(180deg);
}
}
.⁂-timeline-status--connected-bottom .status__content-wrapper {
padding-left: 54px;
}