create new styling for desktops

resources/js/pages/HomeView.vue

@@ -11,6 +11,7 @@ let interval;
 
 const wishes = ref([]);
 const selected = ref(-1);
+const mobile = ref(screen.width < 760);
 
 const call = () => {
     axios
@@ -34,25 +35,52 @@ onMounted(() => {
 <template>
     <body>
     <Header></Header>
-    <TopFleur/>
-    <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 v-if="mobile">
+        <TopFleur/>
+        <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/>
+    </template>
+    <div v-else style="text-align: center;">
+
+        <TopFleur/>
+        <div class="desktop-container">
+            <div>
+                <template v-if="wishes.length>0">
+                    <template v-for="i in 5">
+                            <Wish :wish="wishes[i-1]" :selected="i-1 == selected" :index="i-1"  @selectedWish="selectedWish" v-if="wishes.length>=i"/>
+                    </template> 
                 </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>
+                <template v-if="wishes.length>5">
+                    <template v-for="i in 5">
+                            <Wish :wish="wishes[i + 4]" :selected="i + 4 == selected" :index="i + 4"  @selectedWish="selectedWish" v-if="wishes.length>=(i+5)"/>
+                    </template> 
+                </template>
             </div>
-        </Transition>
+            <div>
+                    <WishPanel :wish="wishes[selected]" @closeWish="selected = -1" v-if="selected != -1"/>
+            </div>
+        </div>
 
+        <BottomFleur/>
     </div>
-    <div class="push"></div>
-    <BottomFleur/>
     </body>
 </template>
 
@@ -71,4 +99,10 @@ onMounted(() => {
 .v-enter-from {
   opacity: 0;
 }
+
+.desktop-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
 </style>