From 703f8a09ecc66a89eb12ed76bae2e21180a43815 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Fri, 2 Jun 2023 16:55:48 -0700
Subject: [PATCH] Fix some reactivity issues and tweak the layout

---
 src/views/ChallengesView.vue | 50 +++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/views/ChallengesView.vue b/src/views/ChallengesView.vue
index f612bc2..933db8c 100644
--- a/src/views/ChallengesView.vue
+++ b/src/views/ChallengesView.vue
@@ -1,32 +1,31 @@
 <template>
-    <MainLayout :title="$t('events.title')">
-      <div class="grow flex items-center justify-center">
-        <div class="mx-4 md:mx-12 w-full space-y-10 max-w-xl">
-          <template v-if="store.activeSchedule || store.upcomingSchedules && store.upcomingSchedules.length > 0">
-            <div v-for="schedule in store.activeSchedule">
-              <ChallengeScheduleBox :currentSchedule="schedule" type="challenge" class="flex-1 md:-rotate-1" />
+  <MainLayout :title="$t('events.title')">
+    <div class="grow flex items-center justify-center">
+      <div class="mx-4 md:mx-12 max-w-screen-2xl w-full space-y-10">
+        <div v-if="store.currentSchedules?.length" class="flex flex-col lg:flex-row items-center justify-center gap-10">
+          <div v-for="(schedule, i) in store.currentSchedules" :key="schedule.settings.leagueMatchEvent.id" class="max-w-xl">
+              <ChallengeScheduleBox
+                :currentSchedule="schedule"
+                type="challenge"
+                class="w-full"
+                :class="(i % 2) ? 'md:rotate-1' : 'md:-rotate-1'"
+                />
             </div>
-
-            <div v-for="schedule in store.upcomingSchedules">
-              <ChallengeScheduleBox :currentSchedule="schedule" type="challenge" class="flex-1 md:-rotate-1" />
-            </div>
-          </template>
-
-          <template v-else>
-            <ProductContainer :bg="type.bg" class="w-full pt-10 pb-4 -rotate-1">
-              <div class="flex justify-center">
-                <div class="inline-flex items-center font-splatoon2 text-xl text-shadow m-2">
-                  <img :src="type.img" />
-                  {{ $t('events.not_available') }}
-                </div>
-              </div>
-            </ProductContainer>
-          </template>
         </div>
+
+        <!-- No events -->
+        <ProductContainer v-else :bg="type.bg" class="w-full mx-auto max-w-lg pt-10 pb-4 -rotate-1">
+          <div class="flex justify-center">
+            <div class="inline-flex items-center font-splatoon2 text-xl text-shadow m-2">
+              <img :src="type.img" />
+              {{ $t('events.not_available') }}
+            </div>
+          </div>
+        </ProductContainer>
       </div>
-    </MainLayout>
-  </template>
-  
+    </div>
+  </MainLayout>
+</template>
 <script setup>
 import { computed } from 'vue';
 
@@ -42,4 +41,3 @@ const { types } = useScheduleTypes();
 
 const type = computed(() => types['challenge']);
 </script>
-  
\ No newline at end of file