🎨 ui(mobile): Improve scrolling for large vertical fretboards

src/App.vue

@@ -37,8 +37,14 @@ div.App#app(:style="colorscheme")
  FretboardSettings(v-if="isMobileDevice && subpage == 'settings'")
 
  //- Fretboard
- div.fretboard-wrapper#fretboard-wrapper(v-show="!isMobileDevice || subpage == 'fretboard'")
- FretboardViewer(:is-vertical="isMobileDevice && !isLayoutLandscape")
+ div.fretboard-wrapper#fretboard-wrapper(
+ v-show="!isMobileDevice || subpage == 'fretboard'"
+ v-mods="{ isLargeInstrument }"
+ )
+ FretboardViewer(
+ :is-vertical="isMobileDevice && !isLayoutLandscape"
+ v-mods="{ isLargeInstrument }"
+ )
 
  //- Scales & arpeggios
  div: FretboardSequences(v-show="!isMobileDevice || subpage == 'sequences'")
@@ -100,6 +106,7 @@ import { get } from 'vuex-pathify'
 
 import { colorscheme } from '@/modules/colorscheme'
 import { mapObjectToObject } from '@/modules/object'
+import { instruments } from '@/modules/music'
 
 import { mediaQueries } from '@/stores/main'
 
@@ -136,6 +143,9 @@ export default {
  default: return 'guitar';
  }
  },
+ isLargeInstrument() {
+ return instruments[this.instrument].nbStrings > 7;
+ },
 
  ...get('fretboard', [
  'instrument'
@@ -200,10 +210,14 @@ export default {
 .fretboard-wrapper {
  @include mq($until: desktop) {
  @media (orientation: portrait) {
- display: flex;
- justify-content: center;
-
  margin: 20px 0;
+
+ &.is-large-instrument {
+ overflow-x: scroll;
+
+ margin: 0;
+ padding: 20px;
+ }
  }
 
  @media (orientation: landscape) {

src/components/FretboardViewer.vue

@@ -268,9 +268,19 @@ export default {
 }
 
 @include mq($until: desktop) {
- // Shift the fretboard to keep it horizontally centered when fret numbers are displayed
  @media (orientation: portrait) {
- .FretboardViewer.is-showing-fret-nbs { transform: translateX(layout.$fret-number-wrapper-size / -2); }
+ .FretboardViewer {
+ margin: auto;
+
+ &.is-large-instrument {
+ margin-bottom: 20px;
+ }
+
+ &:not(.is-large-instrument).is-showing-fret-nbs {
+ // Shift the fretboard to keep it horizontally centered when fret numbers are displayed
+ transform: translateX(layout.$fret-number-wrapper-size / -2);
+ }
+ }
  }
 
  // Add a margin on the right side