added vertical mode and optimised layout for mobile

src/ui/BeatGroup/Beat/Beat.css

@@ -3,26 +3,54 @@
     padding-left: 1em;
 }
 
+.vertical-mode .beat > * {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .beat-unit-block {
     height: 2em;
 }
 
+.vertical-mode .beat-unit-block {
+    height: auto;
+    width: 2em;
+}
+
 .beat-title {
     width: 3em;
     line-height: 32px;
     margin: 0;
 }
 
+.vertical-mode .beat-title {
+    display: block;
+    width: auto;
+    text-align: center;
+}
+
 .beat-spacer {
     display: inline-block;
     width: 1em;
     height: 2em;
 }
 
+.vertical-mode .beat-spacer {
+    display: block;
+    width: 2em;
+    height: 1em;
+}
+
 .beat-main {
     display: inline-flex;
 }
 
+.vertical-mode .beat-main {
+    width: 2em;
+    margin-right: 4px;
+    display: block;
+}
+
 .beat-settings-container {
     display: flex;
 }
@@ -30,4 +58,8 @@
 .beat {
     width: max-content;
     margin-bottom: 4px;
+}
+
+.vertical-mode .beat {
+    display: inline-block;
 }

src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css

@@ -11,6 +11,11 @@
     cursor: pointer;
 }
 
+.vertical-mode .beat-unit {
+    margin-bottom: 4px;
+    display: block;
+}
+
 .beat-unit:hover {
     border-color: var(--color-ui-neutral-dark-hover);
     background-color: var(--color-ui-neutral-dark-hover);

src/ui/BeatGroup/BeatGroup.css

@@ -1,4 +1,15 @@
 .beat-group {
     padding: 1em;
     overflow-x: scroll;
-}
+    overflow-y: hidden;
+    display: flex;
+    width: inherit;
+    flex-direction: column;
+}
+
+.vertical-mode .beat-group {
+    height: inherit;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    display: block;
+}

src/ui/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -1,4 +1,3 @@
-import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
 import "./BeatGroupSettings.css";
 import UINode, {UINodeOptions} from "../UINode";
 import NumberInputView from "../Widgets/NumberInput/NumberInputView";
@@ -30,6 +29,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             BeatEvents.DisplayTypeChanged,
             BeatGroupEvents.BeatListChanged,
             BeatGroupEvents.LockingChanged,
+            BeatGroupEvents.AutoBeatSettingsChanged,
         ]);
     }
 
@@ -46,6 +46,8 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             } else {
                 this.barCountInput.enable();
             }
+        } else if (event === BeatGroupEvents.AutoBeatSettingsChanged) {
+            this.autoBeatLengthCheckbox.setValue(this.beatGroup.autoBeatLengthOn());
         }
     }
 

src/ui/Root/Root.css

@@ -13,19 +13,32 @@
 }
 
 .root {
+    position: relative;
     overflow: hidden;
     color: var(--color-p-light);
     background-color: var(--color-bg-dark);
     height: 100vh;
-    display: flex;
     align-content: center;
 }
 
-.root-settings {
-    background-color: var(--color-bg-light);
-    height: 100%;
+.root-sidebar {
+    position: absolute;
+    left: -28em;
     width: 30em;
-    padding: 0 2em 0 2em;
+    height: 100vh;
+    display: flex;
+    transition: left 400ms;
+}
+
+.sidebar-visible .root-sidebar {
+    left: 0;
+}
+
+.root-settings {
+    z-index: 1;
+    width: 28em;
+    padding: 0 0 0 2em;
+    background-color: var(--color-bg-light);
     overflow: scroll;
     display: inline-block;
 }
@@ -35,19 +48,86 @@
     text-align: center;
 }
 
+.root-sidebar-toggle {
+    z-index: 1;
+    height: 100vh;
+    min-width: 2em;
+    background-color: var(--color-bg-light);
+    left: 0;
+}
+
+.root-hamburger {
+    right: 0;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    mask-image: url(./drawing.svg);
+    mask-size: 2em;
+    background-color: var(--color-ui-neutral-dark);
+}
+
+.root-switch-mode {
+    right: 0;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    mask-image: url(./rotate.svg);
+    mask-size: 2em;
+    background-color: var(--color-ui-neutral-dark);
+}
+
 .root-beat-stage-container {
-    flex: 1;
+    position: absolute;
     height: 100%;
-    width: calc(100vw - 30em);
+    left: 0;
+    width: 100vw;
     display: flex;
-    justify-content: center;
     flex-direction: column;
+    transition: left 400ms, width 400ms;
+}
+
+.sidebar-visible .root-beat-stage-container {
+    left: 30em;
+    width: calc(100vw - 30em);
 }
 
 .root-beat-stage {
-    max-width: calc(100vw - 30em);
-    overflow: hidden;
+    padding: 2em;
+    max-height: 100vh;
     margin: auto;
+    max-width: 100vw;
+    transition: max-width 400ms;
+}
+
+.vertical-mode .root-beat-stage {
+    height: 100vh;
+}
+
+.sidebar-visible .root-beat-stage {
+    max-width: calc(100vw - 30em);
+}
+
+@media screen and (max-width: 900px) {
+    .sidebar-visible .root-sidebar {
+        left: 0;
+        width: 100vw;
+    }
+    .root-sidebar {
+        left: calc(-100vw + 2em);
+        width: 100vw;
+    }
+    .root-settings {
+        width: calc(100vw - 2em);
+    }
+    .sidebar-visible .root-beat-stage-container {
+        left: 100vw;
+    }
+    .root-beat-stage-container {
+        left: 0;
+    }
+    .sidebar-visible .root-beat-stage {
+        max-width: 100vw;
+    }
 }
 
 * {

src/ui/Root/RootView.ts

@@ -14,6 +14,7 @@ export default class RootView extends UINode {
     private beatGroupView: BeatGroupView;
     private mainBeatGroup: BeatGroup;
     private beatGroupSettingsView!: BeatGroupSettingsView;
+    private sidebar!: HTMLDivElement;
 
 
     constructor(options: RootUINodeOptions) {
@@ -23,18 +24,47 @@ export default class RootView extends UINode {
         this.title = options.title;
     }
 
-    rebuild(): HTMLDivElement {
+    toggleSidebar(): void {
+        this.node!.classList.toggle("sidebar-visible");
+    }
+
+    toggleOrientation(): void {
+        this.node!.classList.toggle("vertical-mode");
+    }
+
+    rebuild(): HTMLElement {
         this.beatGroupSettingsView = new BeatGroupSettingsView({beatGroup: this.mainBeatGroup});
-        return UINode.make("div", {
-            classes: ["root"],
+        const sidebarMain = UINode.make("div", {
+            classes: ["root-settings"],
+            subs: [
+                UINode.make("h1", {innerText: this.title, classes: ["root-title"]}),
+                this.beatGroupSettingsView.render(),
+            ]
+        });
+        const sidebarToggle = UINode.make("div", {
+            classes: ["root-sidebar-toggle"],
             subs: [
                 UINode.make("div", {
-                    classes: ["root-settings"],
-                    subs: [
-                        UINode.make("h1", {innerText: this.title, classes: ["root-title"]}),
-                        this.beatGroupSettingsView.render(),
-                    ]
+                    classes: ["root-hamburger"],
+                    onclick: () => this.toggleSidebar(),
                 }),
+                UINode.make("div", {
+                    classes: ["root-switch-mode"],
+                    onclick: () => this.toggleOrientation(),
+                })
+            ]
+        });
+        this.sidebar = UINode.make("div", {
+            classes: ["root-sidebar"],
+            subs: [
+                sidebarMain,
+                sidebarToggle,
+            ]
+        });
+        this.node = UINode.make("div", {
+            classes: ["root", "sidebar-visible"],
+            subs: [
+                this.sidebar,
                 UINode.make("div", {
                     classes: ["root-beat-stage-container"],
                     subs: [
@@ -48,5 +78,6 @@ export default class RootView extends UINode {
                 })
             ],
         });
+        return this.node;
     }
 }

src/ui/Widgets/BoolBox/BoolBox.css

@@ -2,11 +2,13 @@
     height: 1.1em;
     margin: 0.5em;
     line-height: 1em;
+    cursor: pointer;
 }
 
 .bool-box-label {
     display: inline-block;
     margin-right: 0.5em;
+    cursor: pointer;
 }
 
 input.bool-box-checkbox[type="checkbox"] {
@@ -20,6 +22,7 @@ input.bool-box-checkbox[type="checkbox"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    cursor: pointer;
 }
 
 input.bool-box-checkbox[type="checkbox"]::before {

src/ui/Widgets/BoolBox/BoolBoxView.ts

@@ -39,6 +39,9 @@ export default class BoolBoxView extends UINode {
         this.labelElement = UINode.make("label", {
             classes: ["bool-box-label"],
             innerText: this.label ?? "",
+            onclick: () => {
+                this.onInput(!this.checkboxElement.checked);
+            },
         });
         if (this.label !== null) {
             this.labelElement.classList.add("visible");
@@ -46,7 +49,9 @@ export default class BoolBoxView extends UINode {
         this.checkboxElement = UINode.make("input", {
             type: "checkbox",
             classes: ["bool-box-checkbox"],
-            oninput: (event: Event) => this.onInput((event.target as HTMLInputElement).checked),
+            onclick: (event: Event) => {
+                this.onInput((event.target as HTMLInputElement).checked);
+            },
         });
         return UINode.make("div", {
             classes: ["bool-box"],

src/ui/global.css

@@ -0,0 +1,101 @@
+html, body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    color: #333;
+    margin: 0;
+    font-family: DMSans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+    color: rgb(0,100,200);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: rgb(0,80,160);
+}
+
+label {
+    display: block;
+}
+
+input, button, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0.4em;
+    margin: 0 0 0.5em 0;
+    box-sizing: border-box;
+}
+
+input:disabled {
+    color: #ccc;
+}
+
+button {
+    color: #333;
+    background-color: #f4f4f4;
+    outline: none;
+}
+
+button:disabled {
+    color: #999;
+}
+
+button:not(:disabled):active {
+    background-color: #ddd;
+}
+
+button:focus {
+    border-color: #666;
+}
+
+::-webkit-scrollbar {
+    background-color: transparent;
+}
+body {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-ui-neutral-dark) transparent;
+}
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0);
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./DMSans-Regular.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: normal;
+    font-weight: 600;
+    src: url(./DMSans-Bold.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(./DMSans-Italic.ttf) format('woff2');
+}
+
+@font-face {
+    font-family: 'DMSans';
+    font-style: italic;
+    font-weight: 600;
+    src: url(./DMSans-BoldItalic.ttf) format('woff2');
+}