#1 Working on the flow. Creating a static height card to hold the recordings and adding a message to it for when it is empty.

Author: ackzell

components/RecordingsList.vue

@@ -1,7 +1,10 @@
 <template>
-  <v-list elevation="5" shaped color="primary">
-    <v-list-item-group
+  <v-list elevation="0" shaped color="primary">
+    <v-slide-y-transition
       v-model="selected"
+      tag="v-list-item-group"
+      class="py-0"
+      group
       mandatory
       @change="$emit('input', selected)"
     >
@@ -11,11 +14,11 @@
           @remove-item="remove(recording.id)"
         ></recording-item>
         <v-divider
-          v-show="index != recordingsInternal.length - 1"
+          v-if="index !== recordingsInternal.length - 1"
           inset
         ></v-divider>
       </div>
-    </v-list-item-group>
+    </v-slide-y-transition>
   </v-list>
 </template>
 
@@ -52,3 +55,8 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.v-move {
+  transition: transform 1s;
+}
+</style>

nuxt.config.js

@@ -1,16 +1,8 @@
-// import path from 'path'
-// import fs from 'fs'
 import colors from 'vuetify/es5/util/colors'
 
 require('dotenv').config()
 
 export default {
-  // server: {
-  //   https: {
-  //     key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
-  //     cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
-  //   }
-  // },
   mode: 'spa',
   /*
    ** Headers of the page

pages/index.vue

@@ -45,11 +45,20 @@
         <v-card-text>
           <timer :timer-status="timerStatus" :time-limit="TIME_LIMIT"></timer>
 
-          <recordings-list
-            v-if="recordings.length"
-            v-model="selected"
-            :recordings="recordings"
-          ></recordings-list>
+          <v-card color="primary" height="190">
+            <recordings-list
+              v-if="recordings.length"
+              v-model="selected"
+              :recordings="recordings"
+            ></recordings-list>
+            <v-layout v-else fill-height align-center>
+              <v-flex>
+                <p class="text-center text--secondary mb-0">
+                  Recordings will appear here
+                </p>
+              </v-flex>
+            </v-layout>
+          </v-card>
         </v-card-text>
       </v-card>