Change duration selector as panel for standardization

src/assets/css/4-modules/options.css

@@ -17,7 +17,6 @@
   padding: 2.2rem .2rem;
 }
 
-.options__select,
 .options__btn {
   appearance: none;
   margin: 0;
@@ -30,23 +29,22 @@
   cursor: pointer;
 }
 
-.options__select:focus,
 .options__btn:focus {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
-.options__select {
-  padding-right: 4.4rem;
-  background: url("~/src/assets/img/ico-arrow.svg") no-repeat;
-  background-position: calc(100% - 2rem) center;
-}
-
 .options__btn svg {
   vertical-align: middle;
   line-height: 1;
 }
 
+.options__btn--select {
+  padding-right: 4.4rem;
+  background: url("~/src/assets/img/ico-arrow.svg") no-repeat;
+  background-position: calc(100% - 2rem) center;
+}
+
 .options__btn--check {
   position: relative;
 }

src/views/components/capture-options.vue

@@ -1,11 +1,9 @@
 <template lang="html">
   <div class="options">
     <button v-if="backBtn" class="options__btn" @click="backBtn">← back</button>
-    <select v-if="!disabledTime" v-model="selectedTime" class="options__select" @change="updateDuration(duration.selected)">
-      <option v-for="time in duration.list" :key="time" :value="time">
-        {{ timeLabel(time) }}
-      </option>
-    </select>
+    <button v-if="!disabledTime" class="options__btn options__btn--select" title="Time" @click="openTime">
+      {{ selectedTime }}s
+    </button>
     <button v-if="!disabledTimer" class="options__btn" :class="{ 'options__btn--timer': timer }" :data-timer="timer" title="Timer settings" @click="openTimer">
       <icon-timer></icon-timer>
     </button>
@@ -21,6 +19,15 @@
       <button class="option__panelOption option__panelOption--big" :class="{ 'current': timer === 3 }" @click="updateTimer(3)">3s</button>
       <button class="option__panelOption option__panelOption--big" :class="{ 'current': timer === 10 }" @click="updateTimer(10)">10s</button>
     </div>
+    <div v-if="!disabledTime" class="options__panel" :class="{ 'active': timeOpen }">
+      <button
+        v-for="time in duration.list"
+        :key="time"
+        class="option__panelOption option__panelOption--big"
+        :class="{ 'current': time === selectedTime }"
+        @click="updateDuration(time)"
+      >{{ time }}s</button>
+    </div>
   </div>
 </template>
 
@@ -40,6 +47,7 @@ export default {
   },
   data: () => ({
     boomerangOpen: false,
+    timeOpen: false,
     timerOpen: false
   }),
   props: {
@@ -72,11 +80,15 @@ export default {
     }
   },
   methods: {
-    timeLabel (time) {
-      return time + 's'
-    },
     updateDuration (time) {
       this.$store.commit('updateDuration', time)
+      this.closeTime()
+    },
+    openTime () {
+      this.timeOpen = true
+    },
+    closeTime () {
+      this.timeOpen = false
     },
     openBoomerang () {
       this.boomerangOpen = true
@@ -98,7 +110,6 @@ export default {
       this.$store.commit('updateTimer', value)
       this.closeTimer()
     }
-
   }
 }
 </script>

src/views/screens/welcome.vue

@@ -10,7 +10,7 @@
           <li class="welcome-steps__item">Save as a GIF</li>
         </ol>
       </div>
-      <button class="btn btn--primary" @click="startCapture">Let's make a souvenir!</button>
+      <router-link class="btn btn--primary" :to="{ name: 'capture' }">Let's make a souvenir!</router-link>
     </div>
   </layout-default>
 </template>
@@ -22,11 +22,6 @@ export default {
   name: 'welcome',
   components: {
     illuWelcome
-  },
-  methods: {
-    startCapture () {
-      this.$router.push({ name: 'capture' })
-    }
   }
 }
 </script>