Instrument editors improved across resolutions

src/components/instrument-editor/components/module-editor/module-editor.vue

@@ -511,6 +511,11 @@ $large-height: 800px;
     vertical-align: top;
     @include boxSize();
 
+    @include mobile() {
+        width: 100%;
+        padding: 0;
+    }
+
     .modules-tabs {
         margin: 0;
     }
@@ -539,7 +544,10 @@ $large-height: 800px;
         display: inline-block;
         vertical-align: top;
         width: 100%;
-        margin-top: -$spacing-large;
+
+        @include large() {
+            margin-top: -$spacing-large;
+        }
 
         @include minHeight( $large-height ) {
             margin-top: $spacing-small;
@@ -580,14 +588,4 @@ $large-height: 800px;
         }
     }
 }
-
-/* mobile */
-
-@media screen and ( max-width: $ideal-instrument-editor-width ) {
-    .module-editor {
-        width: 100%;
-        padding: 0;
-        margin-top: $spacing-xlarge;
-    }
-}
 </style>

src/components/instrument-editor/components/oscillator-editor/oscillator-editor.vue

@@ -430,7 +430,15 @@ export default {
 
 .envelope-editor {
     position: relative;
-    margin-top: -$spacing-medium;
+
+    @include large() {
+        margin-top: -$spacing-medium;
+    }
+    
+    @include mobile() {
+        border: 0;
+        padding: 0;
+    }
 
     .tabbed-content {
         padding: $spacing-medium $spacing-medium;

src/components/instrument-editor/instrument-editor.vue

@@ -37,14 +37,6 @@
             </section>
             <!-- header UI -->
             <section class="header">
-                <button
-                    class="help-button"
-                    @click="openHelp"
-                >?</button>
-                <button
-                    class="close-button"
-                    @click="$emit('close')"
-                >x</button>
                 <div class="actions">
                     <button
                         v-if="hasMidiSupport"
@@ -59,6 +51,16 @@
                         class="instrument-selector"
                     />
                 </div>
+                <button
+                    type="button"
+                    class="help-button"
+                    @click="openHelp"
+                >?</button>
+                <button
+                    type="button"
+                    class="close-button"
+                    @click="$emit('close')"
+                >x</button>
             </section>
         </div>
         <hr class="divider" />
@@ -313,45 +315,76 @@ export default {
     position: absolute;
     top: 0;
     margin-top: 0;
+    padding: 0;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 
+    @include large() {
+        padding: $spacing-small;
+    }
+
     /* ideal size and above (tablet/desktop) */
 
-    @media screen and ( min-width: $ideal-instrument-editor-width )  {
+    @media screen and ( min-width: $ideal-instrument-editor-width ) {
         left: 50%;
         width: $ideal-instrument-editor-width;
         margin-left: math.div( -$ideal-instrument-editor-width, 2 );
     }
 
     @media screen and ( min-height: $ideal-instrument-editor-height ) {
         top: 50%;
-        margin-top: math.div( -$ideal-instrument-editor-height, 2 );
         height: $ideal-instrument-editor-height;
+        margin-top: math.div( -$ideal-instrument-editor-height, 2 );
     }
 
     &--maximized {
-        @media screen and ( min-width: $ideal-maximized-instrument-editor-width )  {
+        @media screen and ( min-width: $ideal-maximized-instrument-editor-width ) {
             left: 50%;
             width: $ideal-maximized-instrument-editor-width !important;
             margin-left: math.div( -$ideal-maximized-instrument-editor-width, 2 ) !important;
         }
 
-        @media screen and ( min-height: $ideal-maximized-instrument-editor-height )  {
+        @media screen and ( min-height: $ideal-maximized-instrument-editor-height ) {
             top: 50%;
             height: $ideal-maximized-instrument-editor-height;
             margin-top: math.div( -$ideal-maximized-instrument-editor-height, 2 ) !important;
         }
     }
+
+    .header {
+        width: auto;
+
+        .close-button {
+            right: 0;
+        }
+
+        .help-button {
+            right: 40px;
+        }
+
+        .actions {
+            right: 90px;
+        }
+    }
 }
 
 .instrument-header {
-    position: relative;
+    @include large() {
+        display: flex;
+        justify-content: space-between;
 
-    .header {
-        .help-button, .close-button, .actions {
-            top: 0 !important;
+        .header {
+            display: flex;
+
+            .help-button,
+            .close-button,
+            .actions {
+                position: initial;
+            }
+            .actions {
+                margin-right: $spacing-small;
+            }
         }
     }
 }
@@ -360,6 +393,10 @@ export default {
     position: relative;
     @include verticalScrollOnMobile();
     padding-bottom: $spacing-small;
+
+    @include mobile() {
+        padding: 0 $spacing-small $spacing-small;
+    }
 }
 
 .preset-title {
@@ -378,12 +415,11 @@ export default {
 
 .instrument-presets {
     @include boxSize();
-    padding-left: $spacing-medium;
 
     @include mobile() {
         border-top: 1px dashed #666;
-        padding-top: $spacing-medium;
-        margin-top: $spacing-xlarge;
+        padding-top: $spacing-small + $spacing-xsmall;
+        margin-top: ( $spacing-xlarge - $spacing-small );
     }
 }
 
@@ -422,10 +458,16 @@ export default {
     }
 
     @include mobile() {
+        margin-top: 0;
+
         button {
-            margin-top: $spacing-small;
+            margin: $spacing-small 0;
             width: 100%;
         }
+
+        input {
+            margin: $spacing-small $spacing-small $spacing-small 0;
+        }
     }
 }
 

src/components/note-entry-editor/note-entry-editor.vue

@@ -1,25 +1,25 @@
 /**
-* The MIT License (MIT)
-*
-* Igor Zinken 2016-2023 - https://www.igorski.nl
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy of
-* this software and associated documentation files (the "Software"), to deal in
-* the Software without restriction, including without limitation the rights to
-* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-* the Software, and to permit persons to whom the Software is furnished to do so,
-* subject to the following conditions:
-*
-* The above copyright notice and this permission notice shall be included in all
-* copies or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
+ * The MIT License (MIT)
+ *
+ * Igor Zinken 2016-2023 - https://www.igorski.nl
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
 <template>
     <div
         class="note-entry-editor"
@@ -191,10 +191,10 @@ export default {
     },
     created(): void {
         NoteInputHandler.registerHandler( this.handleKeyboardEntry.bind( this ));
-        const { width, height } = this.$store.state.windowSize;
-        if ( width > 900 && height > 900 ) {
-            this.largeView = true;
-        }
+        // const { width, height } = this.$store.state.windowSize;
+        // if ( width > 900 && height > 900 ) {
+        //     this.largeView = true;
+        // }
     },
     beforeDestroy(): void {
         NoteInputHandler.unregisterHandler();

src/styles/_variables.scss

@@ -15,8 +15,8 @@ $footer-height: 45px;
 $ideal-pattern-editor-width: 1150px;
 $ideal-instrument-editor-width: 900px;
 $ideal-instrument-editor-height: 703px;
-$ideal-maximized-instrument-editor-width: 1180px;
-$ideal-maximized-instrument-editor-height: 870px;
+$ideal-maximized-instrument-editor-width: 1120px;
+$ideal-maximized-instrument-editor-height: 820px;
 $action-button-top: #{$spacing-medium - $spacing-xsmall};
 $note-entry-editor-height: 150px;
 $note-entry-editor-height-expanded: 220px;

src/styles/instrument-editor.scss

@@ -6,6 +6,10 @@
     width: 45%;
     margin-right: $spacing-medium;
 
+    @include mobile() {
+        padding: $spacing-medium;
+    }
+
     @media screen and ( max-width: $ideal-instrument-editor-width ) {
         @include boxSize();
         padding: $spacing-large;