create new styling for desktops

resources/js/components/BottomFleur.vue

@@ -10,6 +10,10 @@
 img {
     z-index: 100;
     padding: 0;
+    max-width: 553px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
     background: var(--background-color);
     background: linear-gradient(0deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);
 }

resources/js/components/TopFleur.vue

@@ -15,9 +15,14 @@
 }
 div {
     width: 100%;
+    max-width: 662px;
     padding: 15px;
     position: sticky;
     top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+
     background: var(--background-color);
     z-index: 100;
     background: linear-gradient(180deg, var(--background-color) 0%, var(--background-color) 80%, rgba(255, 255, 255, 0) 100%);

resources/js/components/Wish.vue

@@ -55,7 +55,7 @@ function openWish() {
                         <div class="large-text-title z-index-normal" :style="'color: hsl(' + wish.color + ', 20%, 50%);'">
                             Lorem Ipsum
                         </div>
-                        <div class="z-index-normal">
+                        <div class="z-index-normal" style="text-align: left;">
                             {{ wish.title }}
                         </div>
                     </div>
@@ -101,7 +101,7 @@ img.cursor{
 .large-container {
     display: absolute;
     height: 100px;
-    margin: 10px;
+    margin: 20px;
 }
 .large-absolute {
     display: absolute;
@@ -109,6 +109,7 @@ img.cursor{
 }
 .large-text-title {
     text-transform: uppercase;
+    text-align: left;
     font-size: 2.3vh;
     margin-top: 15px;
 }
@@ -124,6 +125,7 @@ img.cursor{
 .large-text {
     display: flex;
     font-size: 2vh;
+    text-align: center;
     flex-direction: column;
     margin-left: 15px;
     margin-bottom: 15px;

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/>
+    <template v-if="mobile">
-    <div class="wrapper">
+        <TopFleur/>
-        <Transition>
+        <div class="wrapper">
-            <div v-if="selected==-1">
+            <Transition>
-                <template v-for="(wish, i) in wishes">
+                <div v-if="selected==-1">
-                    <Wish :wish="wish" :selected="false" :index="i"  @selectedWish="selectedWish"/>
+                    <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>
+            <div>
-        <Transition>
+                <template v-if="wishes.length>5">
-            <div v-if="selected!=-1">
+                    <template v-for="i in 5">
-                <Wish :wish="wishes[selected]" selected :index="selected" @selectedWish="selectedWish"/>
+                            <Wish :wish="wishes[i + 4]" :selected="i + 4 == selected" :index="i + 4"  @selectedWish="selectedWish" v-if="wishes.length>=(i+5)"/>
-                <WishPanel :wish="wishes[selected]" @closeWish="selected = -1"></WishPanel>
+                    </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>