Skip to content

Commit 5a01c82

Browse files
olzzonolzzon
committed
wip: prepare overall css
1 parent c6910d9 commit 5a01c82

File tree

4 files changed

+88
-48
lines changed

4 files changed

+88
-48
lines changed

‎packages/webui/src/client/lib/Components/CounterComponents.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ interface OverUnderProps {
55
}
66

77
export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
8-
const overUnder = props.value > 0 ? 'Over' : 'Under'
98
return (
10-
<div className="counter-component__over-under-clock">
11-
<span>{overUnder}</span>
12-
<span>
13-
{RundownUtils.formatDiffToTimecode(props.value, true, false, true, true, true, undefined, true, true)}
9+
<div className="counter-component__over-under">
10+
<span className={props.value < 0 ? 'under' : 'over'}>
11+
{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true, false, true)}
1412
</span>
1513
</div>
1614
)
@@ -19,7 +17,7 @@ export const OverUnderClockComponent = (props: OverUnderProps): JSX.Element => {
1917
export const PlannedEndComponent = (props: OverUnderProps): JSX.Element => {
2018
return (
2119
<span className="counter-component__planned-end">
22-
{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true)}
20+
{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, false, false, true)}
2321
</span>
2422
)
2523
}
@@ -31,3 +29,11 @@ export const TimeToPlannedEndComponent = (props: OverUnderProps): JSX.Element =>
3129
</span>
3230
)
3331
}
32+
33+
export const TimesSincePlannedEndComponent = (props: OverUnderProps): JSX.Element => {
34+
return (
35+
<span className="counter-component__time-since-planned-end">
36+
{RundownUtils.formatTimeToTimecode({ frameRate: 25 }, props.value, true, false, true)}
37+
</span>
38+
)
39+
}

‎packages/webui/src/client/styles/countdown/director.scss‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,26 +22,8 @@ $hold-status-color: $liveline-timecode-color;
2222
font-size: 2em;
2323
color: #888;
2424
padding: 0 0.2em;
25+
padding-left: 10px;
2526

26-
.director-screen__header__rundown-name {
27-
overflow: hidden;
28-
white-space: nowrap;
29-
text-overflow: ellipsis;
30-
line-height: 1.44em;
31-
}
32-
33-
.director-screen__header__countdown {
34-
white-space: nowrap;
35-
36-
color: $general-countdown-to-next-color;
37-
38-
font-weight: 600;
39-
font-size: 1.2em;
40-
41-
&.over {
42-
color: $general-late-color;
43-
}
44-
}
4527
}
4628

4729

@@ -65,7 +47,7 @@ $hold-status-color: $liveline-timecode-color;
6547
grid-template:
6648
16em
6749
4fr
68-
6fr / 13vw auto; // allow a fallback for CasparCG
50+
6fr / 13vw auto;
6951
grid-template:
7052
16em
7153
4fr
@@ -74,23 +56,23 @@ $hold-status-color: $liveline-timecode-color;
7456
.director-screen__body__segment-name {
7557
grid-row: 1;
7658
grid-column: 1 / -1;
77-
text-align: center;
59+
text-align: left;
60+
padding-left: 10px;
7861
font-size: 16em;
79-
font-weight: bold;
62+
font-weight: 500;
63+
line-height: 100%;
64+
letter-spacing: 0%;
65+
vertical-align: middle;
8066

8167
&.live {
8268
background: $general-live-color;
8369
color: #fff;
84-
border-top: 0.1em solid #fff;
85-
-webkit-text-stroke: black;
86-
-webkit-text-stroke-width: 0.025em;
87-
text-shadow: 0px 0px 20px #00000044;
70+
text-shadow: 0px 0px 6px #000000;
8871
}
8972

9073
&.next {
9174
background: $general-next-color;
9275
color: #000;
93-
border-top: 0.1em solid #fff;
9476
}
9577
}
9678

@@ -173,7 +155,7 @@ $hold-status-color: $liveline-timecode-color;
173155
line-height: 1em;
174156

175157
> span {
176-
font-size: 2em; // Allow a fallback for CasparCG
158+
font-size: 2em;
177159
font-size: #{'min(2em, 20vw)'};
178160
}
179161
}

‎packages/webui/src/client/styles/counterComponents.scss‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,57 @@
11
.counter-component__over-under {
2-
background-color: aqua;
2+
color: black;
3+
font-family: Roboto Flex;
4+
font-weight: 400;
5+
font-size: 2em;
6+
line-height: 100%;
7+
letter-spacing: 0%;
8+
9+
.under {
10+
background-color: #ff0;
11+
border-radius: 139px;
12+
align-self: stretch;
13+
gap: 10px;
14+
min-width: 240px;
15+
padding-left: 22px;
16+
padding-right: 22px;
17+
}
18+
.over {
19+
background-color: #FF5218;
20+
border-radius: 139px;
21+
align-self: stretch;
22+
gap: 10px;
23+
min-width: 240px;
24+
padding-left: 22px;
25+
padding-right: 22px;
26+
}
327
}
428

529
.counter-component__planned-end {
6-
background-color: purple;
30+
color: #fff;
31+
font-family: Roboto Flex;
32+
font-weight: 400;
33+
font-style: italic;
34+
font-size: 2em;
35+
line-height: 100%;
36+
letter-spacing: 0%;
737
}
838

939
.counter-component__time-to-planned-end {
10-
background-color: pink;
40+
color:#ff0;
41+
font-family: Roboto Flex;
42+
font-weight: 500;
43+
font-size: 2em;
44+
line-height: 100%;
45+
letter-spacing: 0%;
46+
text-align: center;
47+
}
48+
49+
.counter-component__time-since-planned-end {
50+
color: #FF5218;
51+
font-family: Roboto Flex;
52+
font-weight: 630;
53+
font-size: 2em;
54+
line-height: 100%;
55+
letter-spacing: -3.5%;
56+
text-align: center;
1157
}

‎packages/webui/src/client/ui/ClockView/DirectorScreen.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { CurrentPartOrSegmentRemaining } from '../RundownView/RundownTiming/Curr
3939
import {
4040
OverUnderClockComponent,
4141
PlannedEndComponent,
42+
TimesSincePlannedEndComponent,
4243
TimeToPlannedEndComponent,
4344
} from '../../lib/Components/CounterComponents'
4445

@@ -364,25 +365,30 @@ function DirectorScreenRender({
364365
</div>
365366
PLANNED END
366367
</div>
367-
<div className="director-screen__header__planned-duration">
368+
{expectedEnd - overUnderClock < 0 ? (
368369
<div>
369-
<TimeToPlannedEndComponent value={expectedEnd - overUnderClock} />
370+
<div>
371+
<TimeToPlannedEndComponent value={expectedEnd - overUnderClock} />
372+
</div>
373+
TIME TO PLANNED END
370374
</div>
371-
TIME TO PLANNED END
372-
</div>
373-
<div className="director-screen__header__over-under">
374-
<div
375-
className={ClassNames('director-screen__header__countdown', {
376-
over: Math.floor(overUnderClock / 1000) >= 0,
377-
})}
378-
>
375+
) : (
376+
<div>
377+
<div>
378+
<TimesSincePlannedEndComponent value={expectedEnd - overUnderClock} />
379+
</div>
380+
TIME SINCE PLANNED END
381+
</div>
382+
)}
383+
<div>
384+
<div>
379385
<OverUnderClockComponent value={overUnderClock} />
380386
</div>
381387
OVER/UNDER
382388
</div>
383389
</div>
384390
<div className="director-screen__body">
385-
<div className="director-screen__body__part director-screen__body__part--current-part">
391+
<div className="director-screen__body__part">
386392
<div
387393
className={ClassNames('director-screen__body__segment-name', {
388394
live: currentSegment !== undefined,

0 commit comments

Comments
 (0)