diff --git a/apps/client/src/common/components/tag/Tag.tsx b/apps/client/src/common/components/tag/Tag.tsx index de1ce550c..80bf57b7e 100644 --- a/apps/client/src/common/components/tag/Tag.tsx +++ b/apps/client/src/common/components/tag/Tag.tsx @@ -1,7 +1,11 @@ -import { ReactNode } from 'react'; +import { PropsWithChildren } from 'react'; import style from './Tag.module.scss'; -export default function Tag({ children }: { children: ReactNode }) { - return {children}; +interface TagProps { + className?: string; +} + +export default function Tag({ className, children }: PropsWithChildren) { + return {children}; } diff --git a/apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss b/apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss index 6b99d62f6..f82a65f12 100644 --- a/apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss +++ b/apps/client/src/features/rundown/rundown-group/RundownGroup.module.scss @@ -57,29 +57,48 @@ .metaRow { display: flex; - gap: 3rem; + gap: $block-clearance; // same as RundownEvent.eventTimers margin-bottom: 0.25rem; + padding-left: 0.25rem; white-space: nowrap; } .metaEntry { - width: 4.5em; + width: 8rem; // timeInput + button - :first-child { - font-size: calc(1rem - 3px); - color: $label-gray; + &:first-of-type { + width: 4.5rem; // binder + buttons } } + + .metaLabel { + color: $muted-gray; + font-size: calc(1rem - 3px); + } } .strike { - text-decoration: line-through; + text-decoration: wavy underline; + margin-right: 0.25rem; + color: $ui-white; } .over { color: $playback-over; + .strike { + text-decoration-color: $playback-over; + } + .offsetLabel { + background-color: $playback-over; + } } .under { color: $playback-under; + .strike { + text-decoration-color: $playback-under; + } + .offsetLabel { + background-color: $playback-under; + } } .drag { diff --git a/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx b/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx index 8f0eabc93..3cbef6d64 100644 --- a/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx +++ b/apps/client/src/features/rundown/rundown-group/RundownGroup.tsx @@ -13,6 +13,7 @@ import { EntryId, OntimeGroup } from 'ontime-types'; import { MILLIS_PER_MINUTE, millisToString } from 'ontime-utils'; import IconButton from '../../../common/components/buttons/IconButton'; +import Tag from '../../../common/components/tag/Tag'; import { useEntryActionsContext } from '../../../common/context/EntryActionsContext'; import { useContextMenu } from '../../../common/hooks/useContextMenu'; import { useEntryCopy } from '../../../common/stores/entryCopyStore'; @@ -162,30 +163,28 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
-
Start
+
Entries
+
{data.entries.length}
+
+
+
Start
{millisToString(data.timeStart, { fallback: timerPlaceholder })}
-
End
+
End
{millisToString(data.timeEnd, { fallback: timerPlaceholder })}
-
Duration
+
Duration
{planOffset === null ? ( -
- {formatDuration(data.duration)} -
+
{formatDuration(data.duration)}
) : ( -
+
{formatDuration(data.duration)} - {planOffset} + {planOffset}
)}
-
-
Entries
-
{data.entries.length}
-