cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-07-26 10:38:55 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: review view styles

Browse Source
This commit is contained in:
Carlos Valente
2025-01-21 20:51:38 +01:00
committed by Carlos Valente
parent 3f35b5e297
commit 46790441e0
5 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+7 -3
View File
@@ -1,6 +1,7 @@
import { MaybeNumber } from 'ontime-types';
import { getProgress } from '../../utils/getProgress';
import { cx } from '../../utils/styleUtils';
import './MultiPartProgressBar.scss';
@@ -37,9 +38,12 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
return (
<div
className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
} ${className}`}
className={cx([
'multiprogress-bar',
hidden && 'multiprogress-bar--hidden',
ignoreCssOverride && 'multiprogress-bar--ignore-css-override',
className,
])}
>
{now !== null && (
<>
apps/client/src/common/components/title-card/TitleCard.scss
+6 -4
View File
@@ -1,10 +1,12 @@
@use '../../../theme/viewerDefs' as *;
$title-primary-size: clamp(1.5rem, 3vw, 3rem);
$title-secondary-size: clamp(1rem, 2vw, 2.25rem);
.title-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.title-card__title,
@@ -16,13 +18,13 @@
.title-card__title {
font-weight: 600;
font-size: clamp(1.5rem, 3vw, 3rem);
font-size: $title-primary-size;
color: var(--color-override, $viewer-color);
line-height: 1.2em;
}
.title-card__secondary {
font-size: clamp(1rem, 2vw, 2.25rem);
font-size: $title-secondary-size;
color: var(--secondary-color-override, $viewer-secondary-color);
line-height: 1.2em;
}
@@ -31,7 +33,7 @@
position: absolute;
right: 1rem;
top: 0.5rem;
font-size: clamp(1rem, 1.5vw, 1.5rem);
font-size: $timer-label-size;
color: var(--secondary-color-override, $viewer-secondary-color);
margin-left: auto;
text-transform: uppercase;
apps/client/src/theme/_viewerDefs.scss
+6 -1
View File
@@ -21,6 +21,11 @@ $viewer-secondary-color: rgba(white, 45%); // --secondary-color-override
$viewer-card-bg-color: rgba(white, 7%); // --card-background-color-override
$element-border-radius: 8px;
// Generic element sizes
$view-element-gap: min(2vh, 16px);
$view-outer-padding: min(2vh, 16px) clamp(16px, 2vw, 24px);
$view-card-padding: min(2vh, 8px) clamp(16px, 2vw, 24px);
// Properties related to timer
$timer-color: rgba(white, 80%); // --timer-color-override
$timer-finished-color: $playback-negative;
@@ -30,4 +35,4 @@ $external-color: rgba(white, 85%); // --external-color-override
// properties of other timers (clock and countdown)
$timer-label-size: clamp(16px, 1.5vw, 24px);
$timer-value-size: clamp(2rem, 3.5vw, 3.5rem);
$timer-value-size: clamp(32px, 3.5vw, 50px);
apps/client/src/views/timer/Timer.scss
+16 -23
View File
@@ -11,18 +11,11 @@
font-family: var(--font-family-override, $viewer-font-family);
background: var(--background-color-override, $viewer-background-color);
color: var(--color-override, $viewer-color);
gap: min(2vh, 16px);
padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
gap: $view-element-gap;
padding: $view-outer-padding;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr auto auto auto;
grid-template-areas:
'clock'
'timer'
'progress'
'now'
'next';
display: flex;
flex-direction: column;
&--finished {
outline: clamp(4px, 1vw, 16px) solid $timer-finished-color;
@@ -48,19 +41,18 @@
/* =================== CLOCK ===================*/
.clock-container {
grid-area: clock;
margin-left: auto;
font-weight: 600;
transition: opacity $viewer-transition-time;
.label {
font-size: clamp(16px, 1.5vw, 24px);
font-size: $timer-label-size;
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
}
.clock {
font-size: clamp(32px, 3.5vw, 50px);
font-size: $timer-value-size;
color: var(--secondary-color-override, $viewer-secondary-color);
letter-spacing: 0.05em;
line-height: 0.95em;
@@ -75,8 +67,8 @@
.event {
background-color: var(--card-background-color-override, $viewer-card-bg-color);
padding: 16px 24px;
border-radius: 8px;
padding: $view-card-padding;
border-radius: $element-border-radius;
&.now {
grid-area: now;
@@ -90,7 +82,8 @@
/* =================== MAIN ===================*/
.timer-container {
grid-area: timer;
flex: 1;
align-content: center;
justify-self: center;
align-self: center;
@@ -134,14 +127,14 @@
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.25em;
padding-block: 0.25em;
margin-top: 0.125em;
padding-block: 0.125em;
font-weight: 600;
text-align: center;
color: var(--external-color-override, $external-color);
letter-spacing: 0.5px;
line-height: 0.9em;
line-height: 1em;
transition-property: opacity, height;
transition-duration: $viewer-transition-time;
border-top: 1px solid color-mix(in srgb, var(--external-color-override, $external-color) 10%, transparent);
@@ -153,7 +146,6 @@
}
.progress-container {
grid-area: progress;
width: 100%;
margin: 0 auto;
opacity: 1;
@@ -195,10 +187,11 @@
font-weight: 600;
}
/* =================== LOGO ===================*/
.logo {
position: absolute;
top: 2vw;
left: 2vw;
top: min(2vh, 16px);
left: min(2vw, 16px);
max-width: min(200px, 20vw);
max-height: min(100px, 20vh);
}
apps/client/src/views/timer/Timer.tsx
+10 -5
View File
@@ -59,6 +59,7 @@ export default function Timer(props: TimerProps) {
hideCards,
hideProgress,
hideMessage,
hideExternal,
hideTimerSeconds,
removeLeadingZeros,
mainSource,
@@ -66,6 +67,7 @@ export default function Timer(props: TimerProps) {
} = useTimerOptions();
const { getLocalizedString } = useTranslation();
const localisedMinutes = getLocalizedString('common.minutes');
useWindowTitle('Timer');
@@ -91,7 +93,7 @@ export default function Timer(props: TimerProps) {
const totalTime = getTotalTime(time.duration, time.addedTime);
const clock = formatTime(time.clock);
const stageTimer = getTimerByType(viewSettings.freezeEnd, time);
const display = getFormattedTimer(stageTimer, time.timerType, getLocalizedString('common.minutes'), {
const display = getFormattedTimer(stageTimer, time.timerType, localisedMinutes, {
removeSeconds: hideTimerSeconds,
removeLeadingZero: removeLeadingZeros,
});
@@ -99,14 +101,15 @@ export default function Timer(props: TimerProps) {
const secondaryContent = getSecondaryDisplay(
message,
auxTimer.current,
getLocalizedString('common.minutes'),
localisedMinutes,
hideTimerSeconds,
removeLeadingZeros,
hideExternal,
);
// gather presentation styles
const timerColour = getTimerColour(viewSettings, showWarning, showDanger);
const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, Boolean(secondaryContent));
const { timerFontSize, externalFontSize } = getEstimatedFontSize(display, secondaryContent);
// gather option data
const defaultFormat = getDefaultFormat(settings?.timeFormat);
@@ -124,7 +127,7 @@ export default function Timer(props: TimerProps) {
<div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
{!hideMessage && (
<div className={cx(['message-overlay', showOverlay && ' message-overlay--active'])}>
<div className={cx(['message-overlay', showOverlay && 'message-overlay--active'])}>
<FitText mode='multi' min={32} max={256} className={cx(['message', message.timer.blink && 'blink'])}>
{message.timer.text}
</FitText>
@@ -140,7 +143,9 @@ export default function Timer(props: TimerProps) {
<div className={cx(['timer-container', message.timer.blink && !showOverlay && 'blink'])}>
{showEndMessage ? (
<div className='end-message'>{viewSettings.endMessage}</div>
<FitText mode='multi' min={64} max={256} className='end-message'>
{viewSettings.endMessage}
</FitText>
) : (
<div
className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}