Merge pull request #14 from harmendv/feature/improve-ui

Improve UI
harmendv · Feb 11, 2024 · d9bd9e5 · d9bd9e5
2 parents ad9f3de + 2cd0b09
commit d9bd9e5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 44 deletions.
diff --git a/src/components/VueChords.vue b/src/components/VueChords.vue
@@ -1,32 +1,27 @@
 <template>
     <div class="vue-chords">
-
-        <lv-grid class="vue-chords__grid">
-            <lv-grid-row gap="0.4rem">
-                <lv-grid-column
-                    :width="3"
-                    :md="12"
-                    v-for="chord in chords"
-                >
-                    <lv-card >
-                        <strong>{{ chord.degree }}.</strong> {{ chord.note }}{{ chord.chord }}
-                    </lv-card>
-                </lv-grid-column>
-            </lv-grid-row>
-        </lv-grid>
-
+        <lv-flex fill :wrap="false" >
+            <lv-card class="vue-chords__chord" :padding="false" inline v-for="chord in chords">
+                <div class="vue-chords__chord-degree">{{ chord.degree }}</div>
+                <div class="vue-chords__chord-name">{{ chord.note }}{{ chord.chord }}</div>
+            </lv-card>
+        </lv-flex>
     </div>
 </template>
 
 <script>
-import { LvFlex, LvCard, LvGrid, LvGridRow, LvGridColumn } from '@libvue/core';
+import { LvFlex, LvCard, useBreakpoints  } from '@libvue/core';
 export default {
+    setup() {
+        const { breakpoints } = useBreakpoints();
+        return {
+            breakpoints,
+        };
+    },
     components: {
         LvFlex,
         LvCard,
-        LvGrid,
-        LvGridRow,
-        LvGridColumn,
+        useBreakpoints
     },
     props: {
         chords: {
@@ -39,8 +34,17 @@ export default {
 
 <style lang="scss">
 .vue-chords {
-    &__grid {
-        width: 100%;
+    overflow-x: auto;
+    &__chord {
+
+        &-degree {
+            padding: .25rem;
+            background-color: var(--border-color-light)
+        }
+        &-name {
+            padding: .5rem .25rem;
+
+        }
     }
 }
 </style>
diff --git a/src/components/VueFretNumber.vue b/src/components/VueFretNumber.vue
@@ -31,9 +31,9 @@ export default {
 .vue-fret-number {
     $self: &;
     position: relative;
-    width: calc(100% / var(--divider));
+    //width: calc(100% / var(--divider));
     text-align: center;
-    padding: 1cqw 1cqw;
+    padding: clamp(10px, 1cqw, 14px);
     display: flex;
     justify-content: center;
     border-right: 2px solid transparent;
@@ -60,19 +60,19 @@ export default {
         background: var(--border-color-light);
         z-index: 1;
         padding: 0;
-        width: 4cqw;
-        height: 4cqw;
+
+
+        width: clamp(24px, 3cqw, 32px);
+        height: clamp(24px, 3cqw, 32px);
         display: flex;
         font-family: monospace;
-        font-size: 2cqw;
+        font-size: clamp(14px, 1.8cqw, 18px);
         align-items: center;
         justify-content: center;
         border-radius: 6px;
     }
 
     &__number {
-        width: 4cqw;
-        height: 4cqw;
         flex-shrink: 0;
         position: absolute;
         top: 0;

diff --git a/src/components/VueFretboard.vue b/src/components/VueFretboard.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="vue-fretboard">
-        <vue-string
-            v-for="(start, index) in reversedStrings"
-            :frets="frets"
-            :start="start"
-            :key="index"
-            :highlight="highlight"
-            :root="root"
-            :show-degrees="showDegrees"
-            :show-rest="showRest"
-        />
+        <div class="vue-fretboard__strings">
+            <vue-string
+                v-for="(start, index) in reversedStrings"
+                :frets="frets"
+                :start="start"
+                :key="index"
+                :highlight="highlight"
+                :root="root"
+                :show-degrees="showDegrees"
+                :show-rest="showRest"
+            />
+        </div>
         <div class="vue-fretboard__fret-numbers">
             <vue-fret-number
                 v-for="(fret, index) in frets"
@@ -80,7 +82,9 @@ export default {
     border: 1px solid var(--border-color);
     overflow-y: hidden;
     box-shadow: var(--shadow);
-
+    &__strings {
+        flex-grow: 1;
+    }
     &__fret-numbers {
         position: relative;
         width: 100%;

diff --git a/src/components/VueString.vue b/src/components/VueString.vue
@@ -103,9 +103,10 @@ export default {
     &__cell {
         position: relative;
 
-        width: calc(100% / var(--divider));
+        //width: calc(100% / var(--divider));
+        flex-grow: 1;
         text-align: center;
-        padding: 1cqw;
+        padding: clamp(10px, 1cqw, 14px);
         display: flex;
         justify-content: center;
         border-right: 2px solid var(--border-color);
@@ -147,12 +148,13 @@ export default {
         position: relative;
         background: var(--border-color-light);
         z-index: 1;
-        width: 3cqw;
-        height: 3cqw;
+        width: clamp(24px, 3cqw, 32px);
+        height: clamp(24px, 3cqw, 32px);
         flex-shrink: 0;
         display: flex;
         font-family: monospace;
-        font-size: 2cqw;
+        font-size: clamp(14px, 1.8cqw, 18px);
+        font-weight: bold;
         align-items: center;
         justify-content: center;
         border-radius: 100%;