feat(misc-pages): responsive for canceled game and not found game pages

antoinezanardi · Sep 18, 2024 · 9a91c41 · 9a91c41
1 parent 02e728a
commit 9a91c41
Show file tree

Hide file tree

Showing 13 changed files with 71,235 additions and 71,179 deletions.
diff --git a/app/components/pages/game/GameCanceled/GameCanceled.vue b/app/components/pages/game/GameCanceled/GameCanceled.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="game-canceled"
-    class="flex flex-col items-center justify-center"
+    class="flex flex-col gap-2 items-center justify-center"
   >
     <h1
       id="game-canceled-text"
@@ -17,12 +17,12 @@
       </span>
     </h1>
 
-    <div>
-      <PrimeVueDivider class="mb-4"/>
+    <PrimeVueDivider class="!w-2/3"/>
 
-      <CreateAnotherGameButton/>
+    <div class="flex flex-col gap-2 md:flex-row">
+      <CreateAnotherGameButton class="md:w-auto w-full"/>
 
-      <BackToHomeButton/>
+      <BackToHomeButton class="md:w-auto w-full"/>
     </div>
   </div>
 </template>

diff --git a/app/components/pages/game/GameNotFound/GameNotFound.vue b/app/components/pages/game/GameNotFound/GameNotFound.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="game-not-found"
-    class="flex flex-col items-center justify-center"
+    class="flex flex-col gap-2 items-center justify-center"
   >
     <h1
       id="game-not-found-text"
@@ -12,17 +12,17 @@
         icon="fa-regular fa-question-circle"
       />
 
-      <span>
+      <span class="text-center">
         {{ $t("components.GameNotFound.gameNotFound") }}
       </span>
     </h1>
 
-    <div>
-      <PrimeVueDivider class="mb-4"/>
+    <PrimeVueDivider class="!w-2/3"/>
 
-      <CreateAnotherGameButton class="me-2"/>
+    <div class="flex flex-col gap-2 md:flex-row">
+      <CreateAnotherGameButton class="md:w-auto w-full"/>
 
-      <BackToHomeButton/>
+      <BackToHomeButton class="md:w-auto w-full"/>
     </div>
   </div>
 </template>

diff --git a/app/error.vue b/app/error.vue
@@ -5,7 +5,7 @@
   >
     <h1
       id="error-title"
-      class="!text-5xl"
+      class="!text-5xl text-center"
     >
       {{ errorTitle }}
     </h1>
@@ -20,7 +20,7 @@
 
     <h3
       id="error-description"
-      class="!text-2xl"
+      class="md:!text-2xl text-center text-xl"
     >
       {{ errorDescription }}
     </h3>

diff --git a/tests/acceptance/screenshots/darwin/Game canceled.png b/tests/acceptance/screenshots/darwin/Game canceled.png
diff --git a/tests/acceptance/screenshots/darwin/Game not found.png b/tests/acceptance/screenshots/darwin/Game not found.png
diff --git a/tests/acceptance/screenshots/darwin/Page not found.png b/tests/acceptance/screenshots/darwin/Page not found.png
diff --git a/tests/acceptance/screenshots/linux/Game canceled.png b/tests/acceptance/screenshots/linux/Game canceled.png
diff --git a/tests/acceptance/screenshots/linux/Game not found.png b/tests/acceptance/screenshots/linux/Game not found.png
diff --git a/tests/acceptance/screenshots/linux/Page not found.png b/tests/acceptance/screenshots/linux/Page not found.png