arrange player at bottom, minor on layout

src/components/Player.vue

@@ -1,9 +1,19 @@
 <template>
-<f7-toolbar v-if="status != 'empty'">
+<f7-toolbar style='position: fixed; height: 80px;' bottom v-if="status != 'empty'">
-<f7-preloader v-if="loading" />
+  <!--
-<f7-link @click="onPlay" v-if="!loading && status == 'pause'">Play</f7-link>
+    il player avra' due stati aperto e chiuso? non so quanto mi piace, mi sembra che 
-<f7-link @click="onPause" v-if="!loading && status == 'playing'">Pause</f7-link>
+    le informazioni utili possano stare benissimo in questa toolbar.
-<div slot="before-inner" v-if="!loading">{{title}}</div>
+    nel caso cmq bisogna fare una classe css per questi stati con l'altezza che varia.
+  -->
+  <f7-block>
+    <f7-icon class='cursor-pointer' to='#' size='52px' f7='play_circle' @click="onPlay" v-if="!loading && status == 'pause'" />
+    <f7-icon class='cursor-pointer' size='52px' f7='pause_circle' @click="onPause" v-if="!loading && status == 'playing'" />
+    <f7-preloader size='42px' color='white' v-if='loading'/>
+  </f7-block>
+  <f7-block>
+    <f7-link v-if='!loading'>{{title}}</f7-link>
+  </f7-block>
+
 </f7-toolbar>
 </template>
 

src/components/app.vue

@@ -6,7 +6,7 @@
   // Framework7 Parameters
   const f7params = {
     name: 'plaid', // App name
-    theme: 'ios', // Automatic theme detection
+    theme: 'md', // Automatic theme detection
     view: {
       browserHistory: true,
       iosDynamicNavbar: true,
@@ -28,10 +28,11 @@
   <f7-app v-bind="f7params" >
     <!-- Top Navbar -->
     <f7-navbar back-link="Back" title='plaid' />
-    <Player />
 
     <!-- Your main view, should have "view-main" class -->
-    <f7-view main url="/"></f7-view>
+    <f7-view main url="/" class='view-main main-view'>
+      <Player />
+    </f7-view>
 
   </f7-app>
 </template>