[S] Better styling

AquaNet/src/libs/i18n/en_ref.ts

@@ -229,7 +229,15 @@ export const EN_REF_USERBOX = {
   'userbox.new.error.invalidUrl': 'The URL you inputted is invalid.'
 }
 
+export const EN_REF_MAI_PHOTO = {
+  'maiphoto.title': 'Mai Memorial Photo',
+  'maiphoto.url_warning': 'Note: If you want to share a photo with your friend, please save the photo. Do not copy image URL because the URL contains sensitive information.',
+  'maiphoto.none': 'No photo found. You can upload photo by clicking upload at the end of each game session.',
+}
+
 export const EN_REF = { ...EN_REF_USER, ...EN_REF_Welcome, ...EN_REF_GENERAL,
-  ...EN_REF_LEADERBOARD, ...EN_REF_HOME, ...EN_REF_SETTINGS, ...EN_REF_USERBOX }
+  ...EN_REF_LEADERBOARD, ...EN_REF_HOME, ...EN_REF_SETTINGS, ...EN_REF_USERBOX,
+  ...EN_REF_MAI_PHOTO
+}
 
 export type LocalizedMessages = typeof EN_REF

AquaNet/src/pages/MaiPhoto.svelte

@@ -1,31 +1,38 @@
 <script lang="ts">
   import {GAME} from "../libs/sdk";
   import {AQUA_HOST} from "../libs/config";
-
+  import Loading from "../components/ui/Loading.svelte";
-  let photos: string[] = []
+  import Error from "../components/ui/Error.svelte";
-  GAME.photos().then(result => {
+  import { t } from "../libs/i18n";
-    console.log(result)
-    photos = result
-  }).catch(e => {
-    console.error(e)
-  })
 
   const token = localStorage.getItem("token")
 </script>
 
-<main>
+<main class="content">
-  <div class="content-main">
+  <div class="outer-title-options">
-    <p>here you can see the pictures you have uploaded from mai.</p>
+    <h2>{t("maiphoto.title")}</h2>
-  <div class="pictures">
-  {#each photos as photo}
-    <img class="rounded-2xl max-w-sm" src="{AQUA_HOST}/api/v2/game/mai2/my-photo/{photo}?token={token}" alt="Memorial" />
-  {/each}
-  {#if photos.length === 0}
-    <p>There are no photos available. Try uploading some!</p>
-  {/if}
   </div>
+
+  {#await GAME.photos()}
+    <Loading/>
+  {:then photos}
+    {#if photos.length === 0}
+      <blockquote>{t('maiphoto.none')}</blockquote>
+    {:else}
+      <blockquote>{t('maiphoto.url_warning')}</blockquote>
+    {/if}
+    <div class="pictures">
+      {#each photos as photo}
+        <div class="photo-container">
+          <img class="rounded-2xl" src="{AQUA_HOST}/api/v2/game/mai2/my-photo/{photo}?token={token}" alt="Memorial" />
+        </div>
+      {/each}
     </div>
+  {:catch error}
+    <Error {error}/>
+  {/await}
 </main>
+
 <style lang="sass">
   @use "../vars"
 
@@ -35,4 +42,16 @@
     justify-content: center
     row-gap: 1rem
     gap: 1rem
+
+  .photo-container
+    flex: 1 1 300px
+    min-width: 280px
+    max-width: 100%
+    display: flex
+    justify-content: center
+
+  .photo-container img
+    width: 100%
+    height: auto
+    object-fit: contain
 </style>