cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 14:14:17 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor(ui): title alignment is logo aware

Browse Source
This commit is contained in:
Carlos Valente
2026-08-02 12:13:41 +02:00
committed by Carlos Valente
parent 76b1341432
commit 2050735014
8 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/countdown/Countdown.scss
+12
View File
@@ -23,9 +23,21 @@ $item-height: 3.5rem;
font-size: $header-font-size;
font-weight: 600;
display: flex;
align-items: center;
gap: 1rem;
}
.project-header__brand {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.project-header__brand--without-logo {
align-self: baseline;
}
.logo {
max-width: min(200px, 20vw);
}
apps/client/src/views/countdown/Countdown.tsx
+5 -2
View File
@@ -20,6 +20,7 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { ExtendedEntry } from '../../common/utils/rundownMetadata';
import { cx } from '../../common/utils/styleUtils';
import { formatTime, getDefaultFormat } from '../../common/utils/time';
import { useTranslation } from '../../translation/TranslationProvider';
import Loader from '../common/loader/Loader';
@@ -80,8 +81,10 @@ function Countdown({ customFields, rundownData, projectData, isMirrored, setting
<div className={`countdown ${isMirrored ? 'mirror' : ''}`} data-testid='countdown-view'>
<ViewParamsEditor target={OntimeView.Countdown} viewOptions={countdownOptions} />
<div className='project-header'>
{projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
<div className='title'>{projectData.title}</div>
<div className={cx(['project-header__brand', !projectData?.logo && 'project-header__brand--without-logo'])}>
{projectData?.logo && <ViewLogo name={projectData.logo} className='logo' />}
<div className='title'>{projectData.title}</div>
</div>
<CountdownClock />
</div>