Feat/62 logger (#79)

* feat/62-logger request log data in app * feat/62-logger refact osc integration * feat/62-logger feedback on osc * feat/62-logger refact broadcast on triggers * feat/62-logger log triggers * feat/62-logger add link to studio * feat/62-logger replace toasts with logger context * feat/62-logger style improvements * feat/62-logger refactor code duplications * feat/62-logger cleanup and version bump
2026-08-19 22:24:11 +00:00 · 2021-12-25 19:39:40 +01:00
parent 160ccabebc
commit 9fc154955a
46 changed files with 3830 additions and 598 deletions
@@ -0,0 +1,174 @@
+.mainContainer {
+  background: linear-gradient(90deg, #202020 0%, #121212 100%);
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  color: #fffd;
+  padding: max(16px, 2vh);
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 40px 48em 31em auto;
+  grid-template-areas:
+    'sett even play info'
+    'sett even mess info';
+  gap: max(16px, 2vh);
+}
+
+/* 2/3 window, hide info */
+@media (max-width: 1450px) and (min-height: 700px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 40px 48em auto;
+    /* grid-template-areas:
+      'even play sett'
+      'even mess sett'; */
+  }
+
+  .info {
+    visibility: hidden;
+  }
+}
+
+/* 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 {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    column-gap: 0;
+    grid-template-areas:
+      'play'
+      'mess';
+  }
+
+  .playback,
+  .messages {
+    visibility: visible;
+  }
+
+  .editor,
+  .info,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+/* 1/3 corner window, playback only */
+@media (max-width: 850px) and (max-height: 500px) {
+  .mainContainer {
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+    grid-template-areas: 'play';
+  }
+
+  .playback {
+    visibility: visible;
+  }
+
+  .editor,
+  .messages,
+  .info,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+h1 {
+  font-size: max(1.5em, 16px);
+  color: rgba(255, 255, 255, 0.63);
+  padding-bottom: 0.25em;
+}
+
+.mainContainer > div {
+  border-radius: 0.5em;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.13);
+  padding: 0.8em 1.5em;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.editor {
+  grid-area: even;
+
+  .content {
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
+}
+
+.info {
+  grid-area: info;
+  min-width: 17em;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
+}
+
+.messages {
+  grid-area: mess;
+}
+
+.playback {
+  grid-area: play;
+  min-height: 320px;
+  max-height: 320px;
+}
+
+.messages,
+.playback {
+  min-width: 31em;
+}
+
+.mainContainer > .settings {
+  grid-area: sett;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  width: fit-content;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.content {
+  padding-top: 0.5em;
+}
+
+.cornerButtonContainer {
+  position: relative;
+  top: -4.5em;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonContainer {
+  padding-bottom: 2em;
+  display: flex;
+  justify-content: flex-end;
+}