style: tweaks to editor (#738)

2026-08-08 08:53:51 +00:00 · 2024-01-28 22:42:19 +01:00
parent 5de40e8679
commit 4c77d26a71
14 changed files with 66 additions and 56 deletions
@@ -1,5 +1,6 @@
 .list {
  display: flex;
+  flex-wrap: wrap;
  gap: 0.5rem
 }

@@ -1,9 +1,7 @@
-$input-font-size: 15px;
+$input-font-size: 1rem;
 $input-delayed-border-color: $ontime-delay-text;

 .timeInput {
-  width: fit-content;
-
  &.delayed {
    border: 1px solid $input-delayed-border-color;
  }
@@ -21,7 +21,7 @@ export default function TimeInputWithButton<T extends string>(props: TimeInputWi
  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);

  return (
-    <InputGroup size='sm' className={inputClasses}>
+    <InputGroup size='sm' className={inputClasses} width='fit-content'>
      <InputLeftElement className={style.inputLeft}>
        <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
          <Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}>
@@ -1,7 +1,9 @@
@use './EditorMixin' as editor;

 $menu-width: 2.75rem;
-$playback-width: 30rem;
+$min-playback-width: 27rem;
+$max-playback-width: 35rem;
+$panel-gap: 0.5rem;

 .corner {
  @include editor.corner;
@@ -13,29 +15,23 @@ $playback-width: 30rem;
  height: 100%;
  color: $ui-white;
  padding: 1rem 0.5rem;
-  
+
  display: grid;
  grid-template-columns: $menu-width auto;
  grid-template-rows: 3rem 1fr;
-  grid-template-areas: 
+  grid-template-areas:
    'menu overview'
    'menu main';
-  gap: 0.5rem;
+  gap: $panel-gap;
 }

 .panelContainer {
  grid-area: main;

-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr $playback-width;
-  grid-template-areas:
-    'rundown play'
-    'rundown mess';
-  gap: 0.5rem;
+  display: flex;
+  gap: $panel-gap;
  overflow: hidden;

-
  .corner {
    /* we show this if the component hasnt been extracted */
    display: inline;
@@ -46,21 +42,23 @@ $playback-width: 30rem;
  .messages {
    position: relative;
    border-radius: 8px;
-    height: 100%;
    background-color: $bg-container-l2;
    padding: 1rem;
  }
 }

-.messages {
-  grid-area: mess;
-  min-width: 24rem;
+.left {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: $min-playback-width;
+  max-width: $max-playback-width;
+  display: flex;
+  flex-direction: column;
+  gap: $panel-gap;
 }

-.playback {
-  grid-area: play;
-  max-height: 380px;
-  min-width: 26rem;
+.messages {
+  flex: 1;
 }

 .content {
@@ -80,9 +80,11 @@ export default function Editor() {
          <AppSettings />
        ) : (
          <div id='panels' className={styles.panelContainer}>
+            <div className={styles.left}>
+              <TimerControl />
+              <MessageControl />
+            </div>
            <Rundown />
-            <MessageControl />
-            <TimerControl />
          </div>
        )}
        <Overview />
@@ -5,6 +5,7 @@
  justify-content: start;
  font-size: $inner-section-text-size;
  gap: 2rem;
+  padding-left: 1rem;
  padding-right: 0.5rem;
 }

@@ -7,9 +7,8 @@
  margin-top: 1em;
  display: flex;
  flex-direction: column;
-  padding: 0 4px;
+  padding-right: 4px; // size of scrollbar
  overflow-y: scroll;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
  height: 100%;
 }

@@ -1,12 +1,8 @@
@use '../editors//EditorMixin' as editor;

-$rundown-width: 44.5rem;
-$editor-width: 25rem;
-
 .rundownExport {
-  grid-area: rundown;
-  max-height: 100%;
  height: 100%;
+  flex: 1;
 }

 .rundown {
@@ -24,17 +20,26 @@ $editor-width: 25rem;
 .list {
  @include editor.panel;
  height: inherit;
+  padding-left: 0;
  box-shadow: $box-shadow-right;
-  min-width: $rundown-width;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 38rem;
+  max-width: 45rem;
 }

 .side {
+  max-height: 100%;
+  max-width: 45rem;
  margin: 2rem 0;
  padding: 1rem;
+  padding-right: 0;
  background-color: $gray-1325;
  border-radius: 0 8px 8px 0;
-  min-width: $editor-width;
-  flex: 1;
-  max-height: 100%;
-  overflow: auto;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 30rem;
+  max-width: 45rem;
 }
@@ -1,11 +1,13 @@
@use '../../theme/ontimeColours' as *;
@use '../../theme/ontimeStyles' as *;

+$block-width: 33rem;
+
 $block-gap: 0.25rem;
 $block-element-spacing: 0.25rem;
 $block-binder-width: 2rem;
 $block-clearance: 0.5rem;
-$block-border-radius: 0.5rem;
+$block-border-radius: 3px;
 $block-text-color: $gray-50;
 $block-bg: $gray-1250;
 $block-bg2: $gray-1050; // for delay and blocks
@@ -21,6 +23,8 @@ $block-cursor-color: $blue-400;
  margin: 0.25rem 0.125rem;
  position: relative;
  color: $block-text-color;
+
+  min-width: $block-width;
 }

@mixin block-spacing() {
@@ -6,7 +6,6 @@

  background-color: $block-bg2;

-  min-width: 34rem;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  grid-template-areas: 'drag inpt btns';
@@ -29,7 +29,7 @@ $skip-opacity: 0.1;
  }

  &.selected {
-    background-color: $gray-1350;
+    background-color: $gray-1325;
  }

  &.play {
@@ -123,15 +123,12 @@ $skip-opacity: 0.1;
 .eventTimers {
  grid-area: times;
  display: flex;
-  align-items: center;
  gap: $block-clearance;
  height: 100%;

  .timerNote {
-    display: grid;
-    place-content: center;
    color: $blue-500;
-    margin-right: 0.5em;
+    margin-right: $block-clearance;
    font-size: 1.5em;
  }
 }
@@ -145,9 +142,7 @@ $skip-opacity: 0.1;

 .eventActions {
  grid-area: actions;
-  display: flex;
-  gap: $block-clearance;
-  justify-content: flex-end;
+  height: 100%;
 }

 .progressBg {
@@ -24,7 +24,7 @@ function formatOverlap(previousEnd: number | null, timeStart: number): string |

  const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));

-  return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`;
+  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
 }

 export default function RundownIndicators(props: RundownIndicatorProps) {
@@ -1,20 +1,23 @@
 .eventEditor {
+  color: $label-gray;
  max-height: 100%;
  overflow-y: auto;
-  flex: 1;
+  padding: 0.5rem;

  display: flex;
  flex-direction: column;
+  overflow-x: auto;
 }

 .content {
-  padding: 1rem;
+  padding-right: 4px;

  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-y: auto;
+
 }

 .footer {
@@ -53,7 +56,7 @@
  color: $label-gray;
  display: flex;
  align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
  max-width: max-content;
  cursor: pointer;
 }
@@ -1,9 +1,13 @@
@use './theme/ontimeStyles' as *;

+$track-color: $white-1;
+$thumb-color: $gray-1100;
+$thumb-color-hover: $gray-900;
+
 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  scrollbar-color: #2b2b2b rgba(255, 255, 255, 0.01);
+  scrollbar-color: $track-color $thumb-color;
  scrollbar-width: thin;
 }

@@ -39,21 +43,22 @@ option {
 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }

 /* Track */
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.01);
+  background: $track-color;
  border-radius: 2px;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #2d2d2d;
+  background: $thumb-color;
  border-radius: 2px;
 }

 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: $thumb-color-hover;
 }