feat: improve layout shifting

Author: notwindstone

src/components/general/CommonIssues.vue

@@ -26,7 +26,7 @@ function extractID(input: string): string {
 <template>
   <div class="mx-auto my-12 max-w-240 flex flex-col gap-4 px-4">
     <template v-for="issue in FreesmIssues" :key="issue.Name">
-      <a :id="extractID(issue.Name)" :href="`#${extractID(issue.Name)}`" class="select-text text-xl text-white font-semibold before:absolute before:left-0 sm:text-3xl before:text-gray-300 before:opacity-0 before:content-['#'] hover:before:opacity-100 before:transition-[opacity]">
+      <a :id="extractID(issue.Name)" :href="`#${extractID(issue.Name)}`" class="select-text text-xl text-white font-semibold before:absolute before:left-0 sm:text-3xl before:text-gray-300 before:opacity-0 before:transition-[opacity] before:content-['#'] hover:before:opacity-100">
         {{ translations?.Messages?.[issue.Name] }}
       </a>
       <div
@@ -39,6 +39,9 @@ function extractID(input: string): string {
           :key="image.Text"
           :src="image.Link"
           :alt="image.Text"
+          :style="{
+            aspectRatio: image.Ratio,
+          }"
           class-names="h-full object-cover rounded-md cursor-zoom-in !transition-[opacity,filter] hover:brightness-70"
         />
       </div>

src/constants/application.ts

@@ -72,17 +72,19 @@ export const FallbackLauncherData: GithubReleasesType = {
 export const FreesmIssues: Array<{
   "Name"  : TranslationsKeyType;
   "Images": Array<{
-    "Link": string;
-    "Text": string;
+    "Link" : string;
+    "Text" : string;
+    "Ratio": number;
   }>;
   "Description": TranslationsKeyType;
 }> = [
   {
     "Name"  : "pages.faq.issues.long-launch.title",
     "Images": [
       {
-        "Link": "/issues/freesm-long-launch.webp",
-        "Text": "Long instance launch problem",
+        "Link" : "/issues/freesm-long-launch.webp",
+        "Text" : "Long instance launch problem",
+        "Ratio": 1009 / 626,
       },
     ],
     "Description": "pages.faq.issues.long-launch.description",
@@ -91,8 +93,9 @@ export const FreesmIssues: Array<{
     "Name"  : "pages.faq.issues.no-versions-available.title",
     "Images": [
       {
-        "Link": "/issues/freesm-no-available-versions.webp",
-        "Text": "No available versions problem",
+        "Link" : "/issues/freesm-no-available-versions.webp",
+        "Text" : "No available versions problem",
+        "Ratio": 1211 / 561,
       },
     ],
     "Description": "pages.faq.issues.no-versions-available.description",
@@ -101,8 +104,9 @@ export const FreesmIssues: Array<{
     "Name"  : "pages.faq.issues.portable-zip.title",
     "Images": [
       {
-        "Link": "/issues/freesm-java-checker.webp",
-        "Text": "Java checker problem",
+        "Link" : "/issues/freesm-java-checker.webp",
+        "Text" : "Java checker problem",
+        "Ratio": 667 / 539,
       },
     ],
     "Description": "pages.faq.issues.portable-zip.description",
@@ -121,8 +125,9 @@ export const FreesmIssues: Array<{
     "Name"  : "pages.faq.issues.microsoft-invalid-login.title",
     "Images": [
       {
-        "Link": "/issues/freesm-not-entitled.webp",
-        "Text": "Not entitled account problem",
+        "Link" : "/issues/freesm-not-entitled.webp",
+        "Text" : "Not entitled account problem",
+        "Ratio": 537 / 196,
       },
     ],
     "Description": "pages.faq.issues.microsoft-invalid-login.description",
@@ -132,14 +137,9 @@ export const FreesmIssues: Array<{
     "Images"     : [],
     "Description": "pages.faq.issues.no-languages.description",
   },
-  {
-    "Name"       : "pages.faq.issues.cat-pack-quality.title",
-    "Images"     : [],
-    "Description": "pages.faq.issues.cat-pack-quality.description",
-  },
   {
     "Name"       : "pages.faq.issues.other.title",
     "Images"     : [],
     "Description": "pages.faq.issues.other.description",
   },
-];
+];

src/locales/en.json

@@ -45,7 +45,7 @@
     "pages.faq.issues.portable-zip.title": "'Java checker could not be found. Please check your installation'",
     "pages.faq.issues.portable-zip.description": "You probably downloaded a portable version of the launcher and didn't unzip/unarchive it.",
     "pages.faq.issues.optifine.title": "How to install OptiFine without a mod loader?",
-    "pages.faq.issues.optifine.description": "<a class='text-sm underline' target='_blank' href='https://www.reddit.com/r/Optifine/comments/jekh7u/comment/ipjqm5o/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button'>Original</a>\n\nExample for 1.8.9:\n* Go into <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>\\FreesmLauncher\\libraries\\com\\mojang\\minecraft\\1.8.9\\</span><span class='select-none'> </span>and copy the minecraft jar file\n* Make a new folder directory <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>%appdata%\\.minecraft\\versions\\1.8.9\\</span><span class='select-none'> </span>and paste the jar in there\n* Then rename the jar you just pasted to 1.8.9.jar\n* Try extracting it and put the extracted file into <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>\\FreesmLauncher\\libraries\\com\\mojang\\minecraft\\1.8.9\\</span>\n",
+    "pages.faq.issues.optifine.description": "<a class='text-sm underline' target='_blank' href='https://www.reddit.com/r/Optifine/comments/jekh7u/comment/ipjqm5o/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button'>Original</a>\n\nExample for 1.8.9:\n* Go into <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>\\FreesmLauncher\\libraries\\com\\mojang\\minecraft\\1.8.9\\</span><span class='select-none'> </span>and copy the minecraft jar file\n* Make a new folder directory <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>%appdata%\\.minecraft\\versions\\1.8.9\\</span><span class='select-none'> </span>and paste the jar in there\n* Then rename the jar you just pasted to 1.8.9.jar\n* Try installing OptiFine and put the extracted file into <span class='bg-catppuccin-800 text-sm p-2 rounded-md'>\\FreesmLauncher\\libraries\\com\\mojang\\minecraft\\1.8.9\\</span>\n",
     "pages.faq.issues.skins.title": "How to set a skin?",
     "pages.faq.issues.skins.description": "Try using an <a class='underline' target='_blank' href='https://ely.by/'>Ely.by</a> skins system, or install a mod that allows you to change in-game skins.",
     "pages.faq.issues.microsoft-invalid-login.title": "'status': 'NOT_ENTITLED'",
@@ -113,4 +113,4 @@
     "users.kaeeraa": "kaeeraa",
     "users.so5iso4ka": "so5iso4ka"
   }
-}
+}