diff --git a/apps/client/src/features/viewers/timeline/Timeline.module.scss b/apps/client/src/features/viewers/timeline/Timeline.module.scss index 430bb9ee47..74ca8a3b00 100644 --- a/apps/client/src/features/viewers/timeline/Timeline.module.scss +++ b/apps/client/src/features/viewers/timeline/Timeline.module.scss @@ -1,7 +1,5 @@ @use '../../../theme/viewerDefs' as *; -$timeline-entry-height: 20px; -$lane-height: 120px; $timeline-height: 1rem; .timeline { @@ -9,11 +7,9 @@ $timeline-height: 1rem; font-weight: 600; color: $ui-white; background-color: $ui-black; -} - -.timelineEvents { + box-sizing: content-box; + box-shadow: inset 0 1rem 0 0 $gray-1100; position: relative; - height: 100%; } .column { @@ -23,17 +19,24 @@ $timeline-height: 1rem; border-left: 1px solid $ui-black; // avoiding content being larger than the view height: calc(100% - 3rem); +} - // decorate timeline element - &::before { - content: ''; - position: absolute; - box-sizing: content-box; - top: -$timeline-height; - left: 0; - right: 0; - height: $timeline-height; - background-color: $white-40; +// generate combined timeline +.timelineBlock { + height: $timeline-height; + background-color: $white-40; + width: 100%; + + &[data-status='done'] { + &::before { + background-color: $active-red; + } + } + + &[data-status='live'] { + &::before { + background-color: red; + } } } @@ -69,6 +72,8 @@ $timeline-height: 1rem; border-bottom: 2px solid $ui-black; box-shadow: 0 0.25rem 0 0 var(--color, $gray-300); + // TODO: can I use has to avoid having this in multiple places? + &[data-status='done'] { opacity: $opacity-disabled; } diff --git a/apps/client/src/features/viewers/timeline/Timeline.tsx b/apps/client/src/features/viewers/timeline/Timeline.tsx index a8463f36d1..6cfeb8ab69 100644 --- a/apps/client/src/features/viewers/timeline/Timeline.tsx +++ b/apps/client/src/features/viewers/timeline/Timeline.tsx @@ -4,7 +4,6 @@ import { isOntimeEvent, isPlayableEvent, MaybeNumber, OntimeRundown } from 'onti import { checkIsNextDay, dayInMs, getLastEvent, MILLIS_PER_HOUR } from 'ontime-utils'; import TimelineMarkers from './timeline-markers/TimelineMarkers'; -import TimelineProgressBar from './timeline-progress-bar/TimelineProgressBar'; import { getElementPosition, getEndHour, getStartHour } from './timeline.utils'; import { ProgressStatus, TimelineEntry } from './TimelineEntry'; @@ -39,57 +38,54 @@ function Timeline(props: TimelineProps) { return (