src/components/Player.vue

@@ -1,19 +1,9 @@
 <template>
-<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 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>
 </template>
 

src/components/app.vue

@@ -6,7 +6,7 @@
   // Framework7 Parameters
   const f7params = {
     name: 'plaid', // App name
-    theme: 'md', // Automatic theme detection
+    theme: 'ios', // Automatic theme detection
     view: {
       browserHistory: true,
       iosDynamicNavbar: true,
@@ -28,11 +28,10 @@
   <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="/" class='view-main main-view'>
-      <Player />
-    </f7-view>
+    <f7-view main url="/"></f7-view>
 
   </f7-app>
 </template>

src/pages/Radio.vue

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

src/pages/RadioShows.vue

@@ -4,12 +4,9 @@
     <f7-block-title>{{Radio.name}}</f7-block-title>
     <f7-block-header>{{Radio.description}}</f7-block-header>
 
-    <div v-if='loading' strong class="text-align-center">
-      <f7-preloader />
-    </div>
+    <f7-preloader v-if='loading' />
     <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,22 +7,12 @@
         <f7-block-header>{{Radio.name}}</f7-block-header>
     </f7-block>
     
-    <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-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>
 
   </f7-page>    
 </template>