style: user feedback tweaks

apps/client/src/features/operator/Operator.module.scss

@@ -22,13 +22,3 @@
 .spacer {
   min-height: 95vh;
 }
-
-@mixin block() {
-  width: 100%;
-  padding: 0.25rem 0.5rem;
-
-  // tablet
-  @media (min-width: $min-tablet) {
-    padding: 0.25rem 1rem;
-  }
-}

apps/client/src/features/operator/follow-button/FollowButton.module.scss

@@ -31,12 +31,8 @@
 // tablet
 @media (min-width: $min-tablet) {
   .followButton {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     gap: 1rem;
     padding: 0.25rem 1rem;
-
-    &:not(.hidden) {
-      bottom: 12.5rem;
-    }
   }
 }

apps/client/src/features/operator/operator-block/OperatorBlock.module.scss

@@ -1,8 +1,16 @@
 @use '../../../../src/theme/ontimeColours' as *;
-@import '../Operator.module.scss';
+@use '../../../../src/theme/v2Styles' as *;
 
 .block {
-  @include block();
+  width: 100%;
+  padding: 0.25rem 0.5rem;
   background-color: $gray-1350;
   font-size: 1.25rem;
 }
+
+// tablet
+@media (min-width: $min-tablet) {
+  .block {
+    padding: 0.25rem 1rem;
+  }
+}

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -2,11 +2,29 @@
 @use '../../../../src/theme/ontimeColours' as *;
 @import '../Operator.module.scss';
 
+@mixin clock-size {
+  font-size: calc(1rem - 2px);
+  @media (min-width: $min-tablet) {
+    font-size: 1rem;
+  }
+}
+
 .event {
-  @include block();
-  background-color: $gray-1300;
   opacity: 1;
   border-top: 1px solid $white-1;
+  padding-right: 0.5rem;
+  color: $white-90;
+  background-color: $gray-1300;
+
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1.25rem 1fr auto;
+  grid-template-rows: auto auto auto;
+  column-gap: 0.5rem;
+  grid-template-areas:
+  "binder main      schedule"
+  "binder secondary running"
+  "binder fields    fields";
 
   &.subscribed {
     background-color: $gray-1250;
@@ -23,47 +41,61 @@
   }
 }
 
-.titles {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .title {
-    font-size: 1.5rem;
-    letter-spacing: 0.5px;
-    color: $ui-white;
-  }
+.binder {
+  grid-area: binder;
+  color: $section-white;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  position: relative;
+  background-color: $gray-1050; // to override inline
 
   .cue {
-    font-size: 1rem;
-    background-color: $gray-1050; // to override inline
-    padding: 0 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     text-align: center;
-    border-radius: $component-border-radius-sm;
+    width: 6em;
+
+    rotate: -90deg;
+    letter-spacing: 0.5px;
   }
 }
 
-.times {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: calc(1rem - 1px);
-  color: $white-90;
+.mainField {
+  grid-area: main;
+  font-size: 1.5rem;
+  letter-spacing: 0.5px;
+  color: $ui-white;
+}
 
-  .runtime {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
+.secondaryField {
+  grid-area: secondary;
+  font-size: 1.25rem;
+  letter-spacing: 0.5px;
+}
+
+.schedule {
+  @include clock-size;
+  grid-area: schedule;
+  justify-self: end;
+}
+
+.running {
+  @include clock-size;
+  grid-area: running;
+  justify-self: end;
 }
 
 .fields {
+  grid-area: fields;
   font-size: 1.25rem;
-  font-weight: 600;
+  font-weight: 400;
   color: $ui-black;
-  margin-top: 0.25rem;
+  margin: 0.25rem 0;
 
   .field {
+    font-weight: 600;
     padding: 0 0.25rem;
     background-color: $orange-600;
     margin-right: 0.5rem;
@@ -72,17 +104,8 @@
   .value {
     color: $orange-500
   }
-
-  letter-spacing: 0.5px;
-  height: fit-content;
-
-  transition-property: height;
-  transition-duration: $transition-time-feedback;
 }
 
-// tablet
-@media (min-width: $min-tablet) {
-  .times {
-    font-size: 1rem;
-  }
-}
+.fields::after {
+  content: '\200b';
+}

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { MutableRefObject } from 'react';
 import { OntimeEvent, UserFields } from 'ontime-types';
 
 import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
@@ -16,7 +16,7 @@ interface OperatorEventProps {
   subscribedAlias: string;
   showSeconds: boolean;
   isPast: boolean;
-  selectedRef?: RefObject<HTMLDivElement>;
+  selectedRef?: MutableRefObject<HTMLDivElement>;
 }
 
 // extract this to contain re-renders
@@ -43,31 +43,29 @@ export default function OperatorEvent(props: OperatorEventProps) {
 
   return (
     <div className={operatorClasses} ref={selectedRef}>
-      <div className={style.titles}>
-        <span className={style.title}>
-          {data.title} - {data.subtitle}
-        </span>
-        <span className={style.cue} style={{ ...cueColours }}>
-          {cue}
-        </span>
+      <div className={style.binder} style={{ ...cueColours }}>
+        <span className={style.cue}>{cue}</span>
       </div>
 
-      <div className={style.times}>
-        <span className={style.schedule}>
-          {start} - {end}
-        </span>
-        <span className={style.runtime}>
-          <DelayIndicator delayValue={data.delay} />
-          {isSelected ? <RollingTime /> : formatTime(data.duration, { showSeconds: true, format: 'hh:mm:ss' })}
-        </span>
-      </div>
+      <span className={style.mainField}>{data.title}</span>
+      <span className={style.schedule}>
+        {start} - {end}
+      </span>
 
-      {subscribedData && (
-        <div className={style.fields}>
-          {subscribedAlias && <span className={style.field}>{`${subscribedAlias}`}</span>}
-          <span className={style.value}>{subscribedData}</span>
-        </div>
-      )}
+      <span className={style.secondaryField}>{data.subtitle}</span>
+      <span className={style.running}>
+        <DelayIndicator delayValue={data.delay} />
+        {isSelected ? <RollingTime /> : formatTime(data.duration, { showSeconds: true, format: 'hh:mm:ss' })}
+      </span>
+
+      <div className={style.fields}>
+        {subscribedData && (
+          <>
+            <span className={style.field}>{subscribedAlias}</span>
+            <span className={style.value}>{subscribedData}</span>
+          </>
+        )}
+      </div>
     </div>
   );
 }