From c88e89b7c74cc082211c0169fecae306d438dfec Mon Sep 17 00:00:00 2001
From: Inkception <marvineichler18@gmail.com>
Date: Fri, 17 Feb 2023 08:05:58 +0100
Subject: [PATCH] Optimize mobile view for both Splatfest Boxes

---
 src/components/SplatfestBox.vue        |  8 ++++----
 src/components/SplatfestResultsBox.vue | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/SplatfestBox.vue b/src/components/SplatfestBox.vue
index 64df54c..2e1aa32 100644
--- a/src/components/SplatfestBox.vue
+++ b/src/components/SplatfestBox.vue
@@ -1,12 +1,12 @@
 <template>
   <ProductContainer class="pt-10 pb-4" bg="bg-zinc-500 bg-camo-purple">
     <div class="space-y-2">
-      <div class="font-splatoon1 text-3xl text-shadow mx-2">
+      <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow mx-2">
         {{ $t(title) }}
       </div>
 
       <div class="flex justify-center mx-2">
-        <div class="font-splatoon2 text-zinc-200 text-lg text-center text-shadow bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
+        <div class="font-splatoon2 text-zinc-200 text-center text-shadow text-sm lg:text-lg bg-zinc-700 px-4 py-1 rounded-full bg-opacity-50 backdrop-blur-sm">
           {{ $t(`splatnet.festivals.${festival.__splatoon3ink_id}.title`, festival.title) }}
         </div>
       </div>
@@ -17,7 +17,7 @@
         <div class="flex -mt-3 mb-4">
           <template v-for="(team, i) in festival.teams" :key="team.id">
             <div class="flex-1 flex justify-center items-center">
-              <SquidTape class="font-splatoon2 text-shadow -rotate-3" bg="" :style="`background-color: ${toRgba(team.color)};`">
+              <SquidTape class="font-splatoon2 text-shadow text-sm lg:text-base -rotate-3" bg="" :style="`background-color: ${toRgba(team.color)};`">
                 <div class="px-2">
                   {{ $t(`splatnet.festivals.${ festival.__splatoon3ink_id }.teams.${i}.teamName`, team.teamName) }}
                 </div>
@@ -27,7 +27,7 @@
         </div>
       </div>
 
-      <div class="font-splatoon2 text-splatoon-yellow text-center text-shadow mx-2 ss:hidden">
+      <div class="font-splatoon2 text-splatoon-yellow text-center text-sm lg:text-base text-shadow mx-2 ss:hidden">
         {{ $d(festival.startTime, 'dateTimeShortWeekday') }}
         &ndash;
         {{ $d(festival.endTime, 'dateTimeShortWeekday') }}
diff --git a/src/components/SplatfestResultsBox.vue b/src/components/SplatfestResultsBox.vue
index 4383270..e5c2950 100644
--- a/src/components/SplatfestResultsBox.vue
+++ b/src/components/SplatfestResultsBox.vue
@@ -1,28 +1,28 @@
 <template>
   <ProductContainer class="pt-10 pb-4" bg="bg-camo-purple" :bgStyle="`background-color: ${toRgba(winner.color)};`">
     <div class="space-y-2">
-      <div class="font-splatoon1 text-3xl text-shadow mx-2">
+      <div class="font-splatoon1 text-sm lg:text-3xl text-shadow mx-2">
         {{ $t('festival.results.title') }}
       </div>
 
       <div class="mx-2 px-1 bg-zinc-700 bg-opacity-50 backdrop-blur-sm rounded-lg">
-        <div class="flex justify-center py-2">
-          <div class="w-36 -mx-1"></div>
+        <div class="flex justify-end md:justify-center py-2">
+          <div class="w-20 md:w-36 -mx-1"></div>
           <template v-for="team in festival.teams" :key="team.id">
-            <div class="w-20 mx-2 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
+            <div class="w-12 mx-2 md:w-20 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
               <img :src="team.image.url" class="w-6 h-6" />
             </div>
           </template>
         </div>
 
         <template v-for="row in resultRows" :key="row.title">
-          <div class="flex justify-center font-splatoon2 text-shadow text-center py-1 items-center">
+          <div class="flex justify-center font-splatoon2 text-shadow text-center text-sm lg:text-base py-1 items-center">
             <div class="w-36 sm:mx-2">
               {{ $t(row.title) }}
             </div>
 
             <div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
-              <div class="w-20 sm:mx-2" v-for="(result, i) in row.results" :key="i">
+              <div class="w-16 lg:w-20 sm:mx-2" v-for="(result, i) in row.results" :key="i">
                 <div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
                   {{ (result.ratio * 100).toFixed(2) }}%
                 </div>
@@ -32,7 +32,7 @@
         </template>
       </div>
 
-      <div class="font-splatoon2 text-splatoon-yellow text-center text-shadow mx-2 ss:hidden">
+      <div class="font-splatoon2 text-splatoon-yellow text-center text-shadow text-sm lg:text-base mx-2 ss:hidden">
         {{ $t('festival.results.won', { team: $t(`splatnet.festivals.${ festival.__splatoon3ink_id }.teams.${winnerIndex}.teamName`, winner.teamName) }) }}
       </div>
     </div>