refactor: simplify styling

cpvalente · Oct 17, 2024 · 558094a · 558094a
1 parent 1d62dee
commit 558094a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 55 deletions.
diff --git a/apps/client/src/features/rundown/event-block/EventBlock.module.scss b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
@@ -8,8 +8,8 @@ $skip-opacity: 0.2;
 
  display: grid;
  grid-template-areas:
- 'binder ... ... report'
- 'binder pb-actions times ...'
+ 'binder ... ... ...'
+ 'binder pb-actions times report'
  'binder pb-actions title title'
  'binder pb-actions estatus estatus'
  'binder ... ... ...';
@@ -82,8 +82,10 @@ $skip-opacity: 0.2;
  }
 }
 
-.repotSection {
+.reportSection {
  grid-area: report;
+ height: 100%;
+ align-self: center;
 }
 
 .binder {

diff --git a/apps/client/src/features/rundown/event-block/EventBlockInner.tsx b/apps/client/src/features/rundown/event-block/EventBlockInner.tsx
@@ -93,8 +93,8 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
  linkStart={linkStart}
  />
  </div>
- <div className={style.repotSection}>
- <EventBlockReporter id={eventId} timeStart={timeStart}></EventBlockReporter>
+ <div className={style.reportSection}>
+ <EventBlockReporter id={eventId} timeStart={timeStart} />
  </div>
  <div className={style.titleSection}>
  <EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />

diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.module.scss
@@ -1,47 +1,10 @@
 .chip {
- position: relative;
- width: 8rem;
-}
-.even {
- animation: 5s blink-even linear alternate infinite;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-.odd {
- animation: 5s blink-odd linear alternate infinite;
- position: absolute;
- top: 0;
- left: 0;
-}
-
-@keyframes blink-even {
- 0% {
- opacity: 0%;
- }
- 48% {
- opacity: 0%;
- }
- 52% {
- opacity: 100%;
- }
- 100% {
- opacity: 100%;
- }
-}
+ background-color: $gray-1100;
+ white-space: nowrap;
 
-@keyframes blink-odd {
- 0% {
- opacity: 100%;
- }
- 48% {
- opacity: 100%;
- }
- 52% {
- opacity: 0%;
- }
- 100% {
- opacity: 0%;
- }
+ font-size: calc(1rem - 3px);
+ color: $label-gray;
+ padding: 0.125rem 0.5rem;
+ border-radius: 2px;
+ margin-top: 2px;
 }
diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx b/apps/client/src/features/rundown/event-block/composite/EventBlockReporter.tsx
@@ -20,10 +20,7 @@ export default function EventBlockReporter(props: { id: string; timeStart: numbe
 
  const timeUntil = formatDuration(getTimeToStart(clock, timeStart, 0, offset), false);
 
- return (
- <div className={style.chip}>
- <div className={style.even}>{reportDisplay}</div>
- <div className={style.odd}>{timeUntil}</div>
- </div>
- );
+ // we show report display if the event is over
+ // otherwise we show time until
+ return <div className={style.chip}>{report ? reportDisplay : timeUntil}</div>;
 }