cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-04 05:49:06 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: improve timers visibility

Browse Source
This commit is contained in:
Carlos Valente
2025-08-18 11:59:22 +02:00
committed by Carlos Valente
parent 02ad852dd4
commit 5a4494ba85
3 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.module.scss
+2 -1
View File
@@ -14,7 +14,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
row-gap: 1rem; row-gap: 1rem;
padding: 0.5em; padding-top: 0.75rem;
padding-left: 0.5em;
position: fixed; position: fixed;
left: 0; left: 0;
apps/client/src/features/operator/status-bar/StatusBar.module.scss
+12 -2
View File
@@ -7,8 +7,8 @@
} }
.timers { .timers {
padding-block: 0.75rem 0.5rem; padding-block: 1rem 0.5rem;
padding-inline: 1rem 0; padding-inline: 1rem 0.5rem;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@@ -18,11 +18,21 @@
.runningTimer { .runningTimer {
grid-area: timers; grid-area: timers;
justify-self: center; justify-self: center;
:nth-child(2) {
font-size: 2.5rem;
line-height: 1.2;
}
} }
.timeNow { .timeNow {
grid-area: clock; grid-area: clock;
justify-self: right; justify-self: right;
:nth-child(2) {
font-size: 2.5rem;
line-height: 1.2;
}
} }
.progressOverride { .progressOverride {
apps/client/src/features/overview/composite/TimeElements.tsx
+6 -2
View File
@@ -144,11 +144,15 @@ function FlagTimes() {
<span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span> <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
<div className={style.labelledElement}> <div className={style.labelledElement}>
<Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} /> <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
<span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>{plannedTimeUntilDisplay}</span> <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
{plannedTimeUntilDisplay}
</span>
</div> </div>
<div className={style.labelledElement}> <div className={style.labelledElement}>
<Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} /> <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
<span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>{expectedTimeUntilDisplay}</span> <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
{expectedTimeUntilDisplay}
</span>
</div> </div>
</div> </div>
); );