Skip to content

Commit 656a680

Browse files
anteeekanteeek
committed
SF-50 | add responsiveness to director screen
1 parent 233c327 commit 656a680

File tree

3 files changed

+88
-32
lines changed

3 files changed

+88
-32
lines changed

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

Lines changed: 85 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,30 @@ $hold-status-color: $liveline-timecode-color;
3131
align-items: center;
3232
background-color: #3f3f3f;
3333
color: #888;
34-
font-size: 2.6em;
34+
font-size: 3.8vh;
3535
padding: 0 0.2em;
3636
text-transform: uppercase;
3737

3838
.director-screen__top__planned-end {
3939
text-align: left;
4040
}
4141

42-
.director-screen__top__planned-to {
43-
text-align: left;
42+
.director-screen__top__time-to {
43+
text-align: center;
4444
}
45-
.director-screen__top__planned-since {
46-
margin-left: -50px;
45+
46+
.director-screen__top__planned-to {
47+
text-align: center;
4748
}
4849

4950
.director-screen__top__over-under {
5051
margin-left: 5vw;
5152
}
53+
54+
.director-screen__top__planned-container {
55+
display: flex;
56+
flex-direction: column;
57+
}
5258
}
5359

5460
.director-screen__body {
@@ -69,10 +75,7 @@ $hold-status-color: $liveline-timecode-color;
6975

7076
.director-screen__body__part {
7177
display: grid;
72-
grid-template:
73-
24em
74-
80em
75-
20em / min(13vw, 27vh) auto;
78+
grid-template: 24em 80em 20em / max(13vw, 27vh) auto;
7679
white-space: nowrap;
7780

7881
.director-screen__body__segment-name {
@@ -84,7 +87,8 @@ $hold-status-color: $liveline-timecode-color;
8487
align-items: center;
8588
color: #fff;
8689
position: relative;
87-
font-size: 100px;
90+
font-size: 8vh;
91+
line-height: 11vh;
8892
height: 11vh;
8993
letter-spacing: 0.01em;
9094
font-feature-settings:
@@ -93,22 +97,6 @@ $hold-status-color: $liveline-timecode-color;
9397

9498
color: #ffffff;
9599

96-
// Default Roboto Flex settings:
97-
font-variation-settings:
98-
'GRAD' 0,
99-
'XOPQ' 96,
100-
'XTRA' 468,
101-
'YOPQ' 79,
102-
'YTAS' 750,
103-
'YTDE' -203,
104-
'YTFI' 738,
105-
'YTLC' 548,
106-
'YTUC' 712,
107-
'opsz' 100,
108-
'slnt' 0,
109-
'wdth' 100,
110-
'wght' 550;
111-
112100
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
113101
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.3);
114102
z-index: 1;
@@ -140,7 +128,7 @@ $hold-status-color: $liveline-timecode-color;
140128
align-items: center;
141129
padding-right: 30px;
142130

143-
font-size: 110px;
131+
font-size: 10vh;
144132
color: $general-countdown-to-next-color;
145133
font-variation-settings:
146134
'GRAD' 0,
@@ -214,6 +202,70 @@ $hold-status-color: $liveline-timecode-color;
214202
}
215203
}
216204

205+
.director-screen__body__part__timeto-content {
206+
grid-row: 2;
207+
grid-column: 2;
208+
text-align: center;
209+
width: 100vw;
210+
margin-left: -13vw;
211+
212+
.director-screen__body__part__timeto-name {
213+
color: #888;
214+
font-size: 9.63em;
215+
text-transform: uppercase;
216+
margin-top: -2vh;
217+
}
218+
219+
.director-screen__body__part__timeto-countdown {
220+
margin-top: 4vh;
221+
grid-row: inherit;
222+
text-align: center;
223+
justify-content: center;
224+
font-size: 60em;
225+
color: $general-countdown-to-next-color;
226+
font-feature-settings:
227+
'liga' off,
228+
'tnum' on;
229+
letter-spacing: 0.01em;
230+
font-variation-settings:
231+
'GRAD' 0,
232+
'XOPQ' 96,
233+
'XTRA' 468,
234+
'YOPQ' 79,
235+
'YTAS' 750,
236+
'YTDE' -203,
237+
'YTFI' 738,
238+
'YTLC' 514,
239+
'YTUC' 712,
240+
'opsz' 120,
241+
'slnt' 0,
242+
'wdth' 70,
243+
'wght' 500;
244+
padding: 0 0.1em;
245+
line-height: 1em;
246+
display: flex;
247+
align-items: center;
248+
249+
> .overtime {
250+
color: $general-late-color;
251+
font-variation-settings:
252+
'GRAD' 0,
253+
'XOPQ' 96,
254+
'XTRA' 468,
255+
'YOPQ' 79,
256+
'YTAS' 750,
257+
'YTDE' -203,
258+
'YTFI' 738,
259+
'YTLC' 548,
260+
'YTUC' 712,
261+
'opsz' 100,
262+
'slnt' 0,
263+
'wdth' 70,
264+
'wght' 600;
265+
}
266+
}
267+
}
268+
217269
.director-screen__body__part__piece-content {
218270
grid-row: 2;
219271
grid-column: 2;
@@ -404,10 +456,9 @@ $hold-status-color: $liveline-timecode-color;
404456
grid-column: 1;
405457
margin-top: -50px;
406458
text-align: left;
407-
font-size: 2.2rem;
459+
font-size: clamp(1.5rem, 1.8vw, 2.2rem);
408460
font-weight: 900;
409461
color: #000;
410-
padding-top: 5px;
411462
padding-left: 8px;
412463
padding-right: 20px;
413464
width: fit-content;
@@ -429,4 +480,9 @@ $hold-status-color: $liveline-timecode-color;
429480
font-weight: 600;
430481
}
431482
}
483+
484+
.clock-view-piece-icon,
485+
.clock-view-piece-icon > span {
486+
width: 10.78vw !important;
487+
}
432488
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.counter-component__over-under {
77
font-family: 'Roboto Flex';
88
font-style: normal;
9-
font-size: 7.5rem;
9+
font-size: clamp(3rem, 5dvw + 1rem, 7.5rem);
1010
font-weight: 500;
1111
line-height: 100%;
1212
font-feature-settings:

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,15 +379,15 @@ function DirectorScreenRender({
379379
</div>
380380
) : null}
381381
{expectedEnd ? (
382-
<div>
382+
<div className="director-screen__top__time-to director-screen__top__planned-container">
383383
<div>
384384
<TimeToPlannedEndComponent value={now - expectedEnd} />
385385
</div>
386386
<span className="director-screen__top__planned-to">{t('Time to planned end')}</span>
387387
</div>
388388
) : (
389389
<div>
390-
<div>
390+
<div className="director-screen__top__planned-container">
391391
<TimeSincePlannedEndComponent value={getCurrentTime() - (expectedStart + expectedDuration)} />
392392
<span className="director-screen__top__planned-since">{t('Time since planned end')}</span>
393393
</div>

0 commit comments

Comments
 (0)