fix slot duration to display a proportional value

components/beat.vue

@@ -4,7 +4,7 @@
       <!--- trovare modo per prevenire scrittura di input-->
       <div class="division-wrapper">
         <div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j"  >
-          <div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(line.sampleType) }"></div>
+          <div class="suddivisione-content" :style="{'background-color': colore }"></div>
         </div>
     </div>
   </div>
@@ -14,7 +14,6 @@
       props: [ 'id', 'line' ],
       data() {
         return {
-          sampleLengths: [285, 110, 175, 560],
           nome:'',
           colore: 'red',
           divisioni: 1,
@@ -30,10 +29,6 @@
       methods: {
         titolo(progressivo){
           this.nome = "nomeBeat" + progressivo;
-        },
-        calculatePulseSize(i) {
-          var pulseSize = ((this.sampleLengths[i]/this.line.sequenceMilliseconds)*100) + "vw";
-          return pulseSize;
         }
     }
     }
@@ -61,6 +56,10 @@ input {
   display: flex;
 }
 
+.suddivisione-content{
+  flex:1 1 auto;
+}
+
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;

components/sequencer.vue

@@ -23,7 +23,7 @@
       </span>
     </div>
     <div class="sequencerLine">
-        <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
+        <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid" :style="{ 'width': calculatePulseSize(line.sampleType) }">
           <beat :id="'slot'+slotid" :line="line" v-if="slot === 1"></beat>
           <div v-else class="emptySlot"></div>
         </div>
@@ -91,6 +91,10 @@
           this.line.sampleType = number;
           console.log(number);
         },
+        calculatePulseSize(i) {
+          var pulseSize = ((this.sampleLengths[i]/this.line.sequenceMilliseconds)*100) + "vw";
+          return pulseSize;
+        },
         bjorklund: function (slots, pulses) {
 
       var pattern = [],
@@ -258,6 +262,19 @@
   display: none;
 }
 
+
+/*extend button for preventing menu from disappearing accidentally on the edge*/
+.sampleType-wrapper::before {
+    content: "";
+    opacity: 0;
+    display: block;
+    width: 44px;
+    height: 10px;
+    position: absolute;
+    top: 0px;
+    left: 3px;
+  }
+
 .sampleType-wrapper > .option-icon:not(:nth-child(1)){
   display: none;
 }
@@ -271,9 +288,9 @@
 }
 
 .sequencerLine{
-    display:flex;
     height:3em;
-    width:100%;
+    /*width:100%;*/
+    display:flex;
     background-color:firebrick;
 }
 

pages/index.vue

@@ -47,7 +47,8 @@ export default {
         euclideanList: [],
         barOpacity:1,
         sequenceMilliseconds:3600,
-        sampleType:1
+        sampleType:1,
+        sampleLengths: [285, 110, 175, 560]
       });
     },
     getSequencerData: function(){