rework fleurs

resources/js/pages/HomeView.vue

@@ -4,7 +4,8 @@ import {ref, onMounted} from 'vue';
 import axios from 'axios';
 import TopFleur from '../components/TopFleur.vue';
 import WishPanel from '../components/WishPanel.vue';
-import Footer from '../components/Footer.vue';
+import BottomFleur from '../components/BottomFleur.vue';
+import Header from '../components/Header.vue';
 
 let interval;
 
@@ -32,11 +33,44 @@ onMounted(() => {
 
 <template>
     <body>
+    <Header></Header>
     <TopFleur/>
-        <template v-for="(wish, i) in wishes">
-            <Wish :wish="wish" :selected="selected==i" :index="i"  @selectedWish="selectedWish" v-if="selected == i || selected == -1"/>
-            <WishPanel :wish="wish" v-if="selected == i" @closeWish="selected = -1"></WishPanel>
-        </template>
-    <Footer/>
+    <div class="wrapper">
+        <Transition>
+            <div v-if="selected==-1">
+                <template v-for="(wish, i) in wishes">
+                    <Wish :wish="wish" :selected="false" :index="i"  @selectedWish="selectedWish"/>
+                </template>
+            </div>
+        </Transition>
+        <Transition>
+            <div v-if="selected!=-1">
+                <Wish :wish="wishes[selected]" selected :index="selected"  @selectedWish="selectedWish"/>
+                <WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
+            </div>
+        </Transition>
+
+    </div>
+    <div class="push"></div>
+    <BottomFleur/>
     </body>
-</template>
+</template>
+
+<style scoped>
+.wrapper {
+    min-height: 100%;
+    margin-bottom: -50px;
+}
+.push{
+    height: 50px;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>