refactor: cuesheet v2 (#435)

* refactor: typescript migration * chore: remove prop-types package * refactor: file structure * refactor: migrate ontime table to tanstack table 8 * refactor: rundown controller uses service as data source * refactor: convert to typescript * feat: caching store * refactor: add delay values to rundown * feat: toggle past visibility * chore: update tests * refactor: add extra fields to CSV * style: show skipped events * chore: add route to navigation menu * style: allow jumping to bottom * chore: add tests
2026-08-13 19:33:46 +00:00 · 2023-07-22 09:32:40 +02:00
parent bee7a8dcb4
commit 3603b836f6
80 changed files with 3188 additions and 2434 deletions
@@ -0,0 +1,119 @@
+@use '../../../theme/ontimeColours' as *;
+@use '../../../theme/v2Styles' as *;
+
+$label-colour: $gray-700;
+$active-colour: $gray-500;
+
+@mixin label {
+  font-size: $inner-section-text-size;
+  color: $label-colour;
+  text-align: center;
+  align-self: end;
+}
+
+@mixin time {
+  font-family: "Open Sans Light", $ontime-font-family;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.header {
+  grid-area: header;
+  display: grid;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  height: max-content;
+  column-gap: 2rem;
+
+  grid-template-areas:
+      'event playback timer clock actions';
+  grid-template-columns: 1fr auto auto auto auto;
+  align-items: center;
+  justify-items: center;
+}
+
+.event {
+  grid-area: event;
+  justify-self: start;
+
+  .title {
+    font-size: 1.75rem;
+  }
+
+  .eventNow {
+    justify-self: start;
+    font-size: 1.5rem;
+  }
+}
+
+.playback {
+  grid-area: playback;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+
+  .playbackLabel {
+    @include label;
+  }
+
+  svg {
+    font-size: 2rem;
+    height: 3rem;
+    color: $label-colour;
+  }
+}
+
+.timer {
+  grid-area: timer;
+
+  .timerLabel {
+    @include label;
+  }
+
+  .value {
+    @include time;
+  }
+}
+
+.clock {
+  grid-area: clock;
+
+  .clockLabel {
+    @include label;
+  }
+
+  .value {
+    grid-area: clock;
+    @include time;
+  }
+}
+
+.headerActions {
+  grid-area: actions;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.125rem;
+  color: $label-colour;
+  height: 100%;
+
+  .actionIcon {
+    cursor: pointer;
+
+    &:hover {
+      color: $active-colour;
+    }
+
+    &.enabled {
+      color: $active-indicator;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  // in large screens we want to space the buttons
+  .headerActions {
+    padding-left: 10vw;
+  }
+}