cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-10 09:53:48 +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/backstage/Backstage.scss
+17
View File
@@ -39,9 +39,21 @@
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);
}
@@ -195,10 +207,15 @@
.project-header {
flex-direction: column;
align-items: flex-start;
position: relative;
gap: 0.5rem;
}
.project-header__brand--without-logo {
align-self: flex-start;
}
.logo img {
height: min(50px, 10vh);
}
apps/client/src/views/backstage/Backstage.tsx
+4 -2
View File
@@ -107,8 +107,10 @@ function Backstage({ events, customFields, projectData, isMirrored, settings }:
<div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
<ViewParamsEditor target={OntimeView.Backstage} viewOptions={backstageOptions} />
<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>
<BackstageClock timeformat={timeformat} />
</div>
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>
apps/client/src/views/studio/Studio.scss
+12
View File
@@ -35,9 +35,21 @@
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/studio/Studio.tsx
+4 -2
View File
@@ -43,8 +43,10 @@ function Studio({ customFields, projectData, isMirrored, settings, viewSettings
<ViewParamsEditor target={OntimeView.StudioClock} viewOptions={studioOptions} />
<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>
</div>
<div className={cx(['studio-contents', hideCards && 'studio-contents--onecol'])}>
apps/client/src/views/timeline/TimelinePage.scss
+12
View File
@@ -20,9 +20,21 @@
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/timeline/TimelinePage.tsx
+5 -2
View File
@@ -8,6 +8,7 @@ import ViewParamsEditor from '../../common/components/view-params-editor/ViewPar
import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
import { useSelectedEventId } from '../../common/hooks/useSocket';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { cx } from '../../common/utils/styleUtils';
import { formatTime, getDefaultFormat } from '../../common/utils/time';
import { useTranslation } from '../../translation/TranslationProvider';
import Loader from '../common/loader/Loader';
@@ -59,8 +60,10 @@ function TimelinePage({ events, customFields, projectData, settings }: TimelineD
<div className='timeline' data-testid='timeline-view'>
<ViewParamsEditor target={OntimeView.Timeline} viewOptions={progressOptions} />
<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>
<TimelineClock timeformat={timeformat} />
</div>