Chore/qol (#41)

* style: prevent timer from resizing container

* style: review half and third screens

* style: prevent delay time from resizing blocks

* style: show now / next titles when container is collapsed

* docs: link to documentation in readme

* Update README.md

* Update README.md

* Update README.md

* style: new image assets

* cleanup

* style: prevent long titles from overflowing containers

* fix: send titles on change

fixed issue that prevented the next title from being broadcast on change

client/src/features/editors/Editor.module.css

@@ -8,7 +8,7 @@
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 40px 48em auto 1fr;
+  grid-template-columns: 40px 48em auto auto;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
@@ -31,6 +31,24 @@
   }
 }
 
+/* 1/2 window, event list only */
+@media (max-width: 1100px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 40px 48em;
+    /* grid-template-areas:
+      'sett even '
+      'sett play '; */
+  }
+
+  .info,
+  .messages,
+  .playback {
+    visibility: hidden;
+  }
+}
+
 /* 1/3 window, show control only */
 @media (max-width: 850px) and (min-height: 500px) {
   .mainContainer {
@@ -42,6 +60,11 @@
       'mess';
   }
 
+  .playback,
+  .messages {
+    visibility: visible;
+  }
+
   .editor,
   .info,
   .settings {
@@ -50,12 +73,15 @@
 }
 
 /* 1/3 corner window, playback only */
-@media (max-width: 900px) and (max-height: 500px) {
+@media (max-width: 850px) and (max-height: 500px) {
   .mainContainer {
     grid-template-rows: 100%;
     grid-template-columns: 100%;
     grid-template-areas: 'play';
-    max-height: 325px;
+  }
+
+  .playback {
+    visibility: visible;
   }
 
   .editor,
@@ -88,6 +114,8 @@ h1 {
 
 .info {
   grid-area: info;
+  min-width: 17em;
+  max-width: 32em;
 }
 
 .messages {
@@ -96,6 +124,8 @@ h1 {
 
 .playback {
   grid-area: play;
+  min-height: 320px;
+  max-height: 320px;
 }
 
 .messages,

client/src/features/editors/list/EventBlock.module.css

@@ -30,6 +30,7 @@
   grid-template-columns: 2em 2em auto auto 1fr auto 3.7em;
   grid-template-areas: 'drag indi time time text more btns';
   justify-content: center;
+  align-items: center;
 }
 
 .expanded {
@@ -59,6 +60,7 @@
   align-self: flex-start;
   font-size: 0.75em;
   overflow: hidden;
+  min-height: 3em;
   min-width: 0;
   justify-content: center;
 }
@@ -95,6 +97,7 @@
 
 .time {
   grid-area: time;
+  align-self: center;
 }
 
 .start {
@@ -136,7 +139,6 @@
 
 .titleContainer {
   grid-area: text;
-  height: 100%;
 
   background-color: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.05);
@@ -148,6 +150,13 @@
   overflow: hidden;
 }
 
+.collapsed .titleContasiner {
+  height: fit-content;
+}
+.expanded .titleContainer {
+  height: 100%;
+}
+
 .oscLabel {
   color: #4bffabcc;
   font-size: 0.8em;
@@ -165,6 +174,7 @@
   color: #fff;
   grid-area: more;
   margin-top: 0.2em;
+  align-self: baseline;
 }
 
 .moreExpanded {