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

refactor: project info design review

Browse Source
This commit is contained in:
Carlos Valente
2025-02-27 21:56:25 +01:00
committed by Carlos Valente
parent 8adca908b3
commit 9167a50eda
15 changed files with 85 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/project-info/ProjectInfo.scss
+4 -6
View File
@@ -10,7 +10,8 @@
font-family: var(--font-family-override, $viewer-font-family);
background: var(--background-color-override, $viewer-background-color);
color: var(--color-override, $viewer-color);
padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
padding: $view-outer-padding;
font-size: $base-font-size;
display: flex;
flex-direction: column;
@@ -25,18 +26,15 @@
max-height: 100%;
overflow-y: auto;
width: min(calc(100vw - 4rem), 800px);
font-size: clamp(16px, 1.5vw, 24px);
}
.info__label {
font-weight: 600;
color: var(--label-color-override, $viewer-label-color);
text-transform: uppercase;
margin-top: $view-element-gap;
white-space: pre;
}
.info__label {
margin-top: 1rem;
}
a.info__value {
color: $action-text-color;
apps/client/src/views/project-info/ProjectInfo.tsx
+7 -5
View File
@@ -5,6 +5,7 @@ import EmptyPage from '../../common/components/state/EmptyPage';
import ViewLogo from '../../common/components/view-logo/ViewLogo';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
import { useTranslation } from '../../translation/TranslationProvider';
import BackstageInfo from './backstage-info/BackstageInfo';
import PublicInfo from './public-info/PublicInfo';
@@ -19,18 +20,19 @@ interface ProjectInfoProps {
export default function ProjectInfo(props: ProjectInfoProps) {
const { general, isMirrored } = props;
const { getLocalizedString } = useTranslation();
useWindowTitle('Project info');
if (!general) {
return <Empty text='No data found' />;
return <Empty text={getLocalizedString('common.no_data')} />;
}
if (!general) {
return (
<>
<ViewParamsEditor viewOptions={projectInfoOptions} />
return <EmptyPage text='No data found' />;
<EmptyPage text={getLocalizedString('common.no_data')} />;
</>
);
}
@@ -40,7 +42,7 @@ export default function ProjectInfo(props: ProjectInfoProps) {
return (
<>
<ViewParamsEditor viewOptions={projectInfoOptions} />
<EmptyPage text='The project has no data yet' />;
<EmptyPage text={getLocalizedString('common.no_data')} />;
</>
);
}
@@ -52,13 +54,13 @@ export default function ProjectInfo(props: ProjectInfoProps) {
<div className='info'>
{general.title && (
<>
<div className='info__label'>Title</div>
<div className='info__label'>{getLocalizedString('project.title')}</div>
<div className='info__value'>{general.title}</div>
</>
)}
{general.description && (
<>
<div className='info__label'>Description</div>
<div className='info__label'>{getLocalizedString('project.description')}</div>
<div className='info__value'>{general.description}</div>
</>
)}
apps/client/src/views/project-info/backstage-info/BackstageInfo.tsx
+4 -2
View File
@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
import { ProjectData } from 'ontime-types';
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import { useTranslation } from '../../../translation/TranslationProvider';
interface BackstageInfoProps {
general: ProjectData;
@@ -10,6 +11,7 @@ interface BackstageInfoProps {
export default function BackstageInfo(props: BackstageInfoProps) {
const { general } = props;
const [searchParams] = useSearchParams();
const { getLocalizedString } = useTranslation();
const showBackstage = isStringBoolean(searchParams.get('showBackstage'));
@@ -21,13 +23,13 @@ export default function BackstageInfo(props: BackstageInfoProps) {
<>
{general.backstageInfo && (
<>
<div className='info__label'>Backstage info</div>
<div className='info__label'>{getLocalizedString('project.backstage_info')}</div>
<div className='info__value'>{general.backstageInfo}</div>
</>
)}
{general.backstageUrl && (
<>
<div className='info__label'>Backstage URL</div>
<div className='info__label'>{getLocalizedString('project.backstage_url')}</div>
<a href={general.backstageUrl} target='_blank' rel='noreferrer' className='info__value'>
{general.backstageUrl}
</a>
apps/client/src/views/project-info/public-info/PublicInfo.tsx
+4 -2
View File
@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
import { ProjectData } from 'ontime-types';
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import { useTranslation } from '../../../translation/TranslationProvider';
interface PublicInfoProps {
general: ProjectData;
@@ -10,6 +11,7 @@ interface PublicInfoProps {
export default function PublicInfo(props: PublicInfoProps) {
const { general } = props;
const [searchParams] = useSearchParams();
const { getLocalizedString } = useTranslation();
const showPublic = isStringBoolean(searchParams.get('showPublic'));
@@ -21,13 +23,13 @@ export default function PublicInfo(props: PublicInfoProps) {
<>
{general.publicInfo && (
<>
<div className='info__label'>Public info</div>
<div className='info__label'>{getLocalizedString('project.public_info')}</div>
<div className='info__value'>{general.publicInfo}</div>
</>
)}
{general.publicUrl && (
<>
<div className='info__label'>Public URL</div>
<div className='info__label'>{getLocalizedString('project.public_url')}</div>
<a href={general.publicUrl} target='_blank' rel='noreferrer' className='info__value'>
{general.publicUrl}
</a>