From c54395c8f9df1990c58c835d877eda4fe48e1016 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Mon, 3 Apr 2023 11:07:42 +0200
Subject: [PATCH] arrange player at bottom, minor on layout

---
 src/components/Player.vue | 20 +++++++++++++++-----
 src/components/app.vue    |  7 ++++---
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 111153b..fdf4c65 100644
--- a/src/components/Player.vue
+++ b/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>
 
diff --git a/src/components/app.vue b/src/components/app.vue
index 9827bf4..4e4aa9d 100644
--- a/src/components/app.vue
+++ b/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>