small QOL improvements (#37)

* feat: selected event if is first * style: fix wrap - remove wrap tag (broken in firefox) * feat: add more text to notes this is a quick fix and does not replace the real deal. using a text input makes it difficult to edit, this should be revised with a textarea on note field * upgrade electron * Stage timer in /sm has placeholder when not running * fix style issue where clock would move depending on whether there are events selected * ensure ontime logo and text have a minimum readable size * fix scrollbar styling * clean debugging logs * link to latest release using gitreleases.dev service for this. this is a temporary fix until we have a release (in opposition to pre-release) so we can use githubs latest link * scale gracefully * fixed error with naming of maxChar
2026-08-10 09:53:48 +00:00 · 2021-11-09 22:31:55 +01:00
parent 207612e3b8
commit 8d8bbef546
12 changed files with 66 additions and 45 deletions
@@ -1,6 +1,8 @@
 * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.01);
+  scrollbar-width: thin;
 }

 body,
@@ -18,3 +20,25 @@ html,
 option {
  color: black;
 }
+
+/* width */
+::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.01);
+  border-radius: 4px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
@@ -4,12 +4,12 @@
  display: flex;
  flex-direction: column;
  align-items: flex-end;
-  font-size: 1vw;
+  font-size: max(1vw, 16px);
  z-index: 10;
 }

 .logo {
-  width: 3vw;
+  width: max(3vw, 32px);
  opacity: 0.5;
 }

@@ -5,6 +5,7 @@ import style from './EditableText.module.css';
 export default function EditableText(props) {
  const { label, defaultValue, placeholder, submitHandler, ...rest } = props;
  const [text, setText] = useState(defaultValue || '');
+  const maxchar = props.maxchar || 40;

  useEffect(() => {
    if (defaultValue == null) setText('');
@@ -18,7 +19,7 @@ export default function EditableText(props) {
  };

  const handleChange = (val) => {
-    if (val.length < 40) setText(val);
+    if (val.length < maxchar) setText(val);
  };

  return (
@@ -4,23 +4,23 @@
  height: 100%;
  margin: auto;
  color: #fffd;
-  padding: 2vh;
+  padding: max(16px, 2vh);

  display: grid;
-  grid-template-rows: 38vh 1fr;
-  grid-template-columns: 40px 48em 27vw 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 40px 48em auto 1fr;
  grid-template-areas:
    'sett even play info'
    'sett even mess info';
-  gap: 2vh;
+  gap: max(16px, 2vh);
 }

-/* 2/3 window, hide previews */
-@media (max-width: 1250px) and (min-height: 700px) {
+/* 2/3 window, hide info */
+@media (max-width: 1450px) and (min-height: 700px) {
  .mainContainer {
    height: 100%;
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 40px 48em 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 40px 48em auto;
    /* grid-template-areas:
      'even play sett'
      'even mess sett'; */
@@ -32,7 +32,7 @@
 }

 /* 1/3 window, show control only */
-@media (max-width: 750px) and (min-height: 500px) {
+@media (max-width: 850px) and (min-height: 500px) {
  .mainContainer {
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
@@ -67,7 +67,7 @@
 }

 h1 {
-  font-size: 1.5em;
+  font-size: max(1.5em, 16px);
  color: rgba(255, 255, 255, 0.63);
  padding-bottom: 0.25em;
 }
@@ -98,6 +98,11 @@ h1 {
  grid-area: play;
 }

+.messages,
+.playback {
+  min-width: 31em;
+}
+
 .mainContainer > .settings {
  grid-area: sett;
  background-color: transparent;
@@ -126,25 +131,3 @@ h1 {
  display: flex;
  justify-content: flex-end;
 }
-
-/* width */
-::-webkit-scrollbar {
-  width: 0.5em;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.01);
-  border-radius: 4px;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.35);
-}
@@ -78,6 +78,7 @@ const ExpandedBlock = (props) => {
          defaultValue={data.note}
          placeholder='Add Note'
          style={{ color: '#d69e2e' }}
+          maxchar={160}
          submitHandler={(v) =>
            actionHandler('update', { field: 'note', value: v })
          }
@@ -162,7 +163,6 @@ export default function EventBlock(props) {
  const delayValue = delay > 0 ? millisToMinutes(delay) : null;

  const handleCollapse = (isCollapsed) => {
-    console.log('setting collapsed', isCollapsed);
    setCollapsed({ [data.id]: isCollapsed });
  };

@@ -113,7 +113,6 @@
  grid-area: time;
  display: flex;
  flex-direction: column;
-  flex-wrap: wrap;
  align-items: flex-start;
  justify-items: flex-start;

@@ -42,9 +42,16 @@ export default function StageManager(props) {
  }, [backstageEvents]);

  // Format messages
+
  const showPubl = publ.text !== '' && publ.visible;
-  let stageTimer = formatDisplay(Math.abs(time.running), true);
-  if (time.running < 0) stageTimer = `-${stageTimer}`;
+
+  let stageTimer;
+  if (time.running === null) {
+    stageTimer = '- - : - -';
+  } else {
+    stageTimer = formatDisplay(Math.abs(time.running), true);
+    if (time.running < 0) stageTimer = `-${stageTimer}`;
+  }

  // motion
  const titleVariants = {
@@ -10,7 +10,7 @@
  color: #fffd;
  display: grid;
  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
-  grid-template-rows: auto 1fr auto auto;
+  grid-template-rows: auto 1fr auto minmax(25vh, auto);
  grid-template-areas:
    ' clck .... .... .... ....'
    ' timr timr timr timr timr'