src/components/Player.vue

@@ -1,9 +1,19 @@
 <template>
-<f7-toolbar v-if="status != 'empty'">
-<f7-preloader v-if="loading" />
-<f7-link @click="onPlay" v-if="!loading && status == 'pause'">Play</f7-link>
-<f7-link @click="onPause" v-if="!loading && status == 'playing'">Pause</f7-link>
-<div slot="before-inner" v-if="!loading">{{title}}</div>
+<f7-toolbar style='position: fixed; height: 80px;' bottom v-if="status != 'empty'">
+  <!--
+    il player avra' due stati aperto e chiuso? non so quanto mi piace, mi sembra che 
+    le informazioni utili possano stare benissimo in questa toolbar.
+    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>

src/pages/Radio.vue

@@ -4,7 +4,9 @@
     <f7-block-title>{{Radio.name}}</f7-block-title>
     <f7-block-header>{{Radio.description}}</f7-block-header>
 
-    <f7-preloader v-if='loading' />
+    <div v-if='loading' strong class="text-align-center">
+      <f7-preloader v-if='loading' />
+    </div>
     <f7-list v-else>
         <f7-list-item title="Diretta" :link='`/radio/${radioId}/live`' />
         <f7-list-item title="Trasmissioni" :link='`/radio/${radioId}/shows`' />

src/pages/RadioLive.vue

@@ -4,10 +4,13 @@
     <f7-block-title>{{Radio.name}}</f7-block-title>
     <f7-block-header>{{Radio.description}}</f7-block-header>
 
-    <f7-preloader v-if='loading' />
+    <div v-if='loading' strong class="text-align-center">
+      <f7-preloader />
+    </div>
     <f7-block v-else>
-    {{currentShowName}}
-    <f7-button type="button" @click="playLive">Ascolta la diretta</f7-button>
+      {{currentShowName}}
+      
+      <f7-button class='block' large outline  @click="playLive">Ascolta la diretta</f7-button>
     </f7-block>
   </f7-page>    
 </template>

src/pages/RadioShows.vue

@@ -4,9 +4,12 @@
     <f7-block-title>{{Radio.name}}</f7-block-title>
     <f7-block-header>{{Radio.description}}</f7-block-header>
 
-    <f7-preloader v-if='loading' />
+    <div v-if='loading' strong class="text-align-center">
+      <f7-preloader />
+    </div>
     <f7-list v-else>
-        <f7-list-item v-for='show in Radio.shows' :key='show.name' :title='show.name' :link='`/radio/${radioId}/shows/${show.name}`' :footer='show.description'/>
+        <f7-list-item v-for='show in Radio.shows' :key='show.name' :title='show.name'
+          :link='`/radio/${radioId}/shows/${show.name}`' :footer='show.description'/>
     </f7-list>
   </f7-page>    
 </template>

src/pages/Show.vue

@@ -7,12 +7,22 @@
         <f7-block-header>{{Radio.name}}</f7-block-header>
     </f7-block>
     
-    <f7-preloader v-if='loading' />
-        <f7-list v-else>
-<a @click="play(episode)" v-for='episode in Show.episodes' :key='episode.url' >
-            <f7-list-item :title='episode.title'  :footer='episode.text' />
-</a>
-        </f7-list>
+    <div v-if='loading' strong class="text-align-center">
+      <f7-preloader />
+    </div>
+    <f7-list media-list v-else>
+      <f7-list-item v-for='episode in Show.episodes' :key='episode.url'
+        :title='episode.title' 
+        :after='new Date(episode.pubDate).toLocaleString()'
+        link='#'
+        @click="play(episode)">
+          <small v-html='episode.description'/>
+        <!--
+          - l'html della descrizione va tagliato e filtato
+          - qua ci sta mettere l'immagine se c'e', nelle f7-list c'e' uno slot media apposito
+        -->
+      </f7-list-item>
+    </f7-list>
 
   </f7-page>    
 </template>