refactor: review view styles

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -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

@@ -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

@@ -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

@@ -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);
-
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: auto 1fr auto auto auto;
-  grid-template-areas:
-    'clock'
-    'timer'
-    'progress'
-    'now'
-    'next';
+  gap: $view-element-gap;
+  padding: $view-outer-padding;
+
+  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

@@ -59,14 +59,17 @@ export default function Timer(props: TimerProps) {
     hideCards,
     hideProgress,
     hideMessage,
+    hideExternal,
     hideTimerSeconds,
     removeLeadingZeros,
     mainSource,
     secondarySource,
   } = useTimerOptions();
 
   const { getLocalizedString } = useTranslation();
+  const localisedMinutes = getLocalizedString('common.minutes');
 
+  // TODO: showing minutes still causes size issues
   useWindowTitle('Timer');
 
   // gather modifiers
@@ -91,22 +94,23 @@ 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,
   });
 
   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 +128,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 +144,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'])}