dev: added Prettier config

dev: improved compatibility with Firefox

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,6 +7,11 @@ assignees: ''
 
 ---
 
+**Checklist**
+- [ ] I have read the README.md 
+- [ ] I have searched through the other open and closed issues using the GitHub search bar
+- [ ] I have made sure that my issue is not a duplicate
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
@@ -17,18 +22,18 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **ElegantFin:**
- - Version [e.g. 24.12.11]
+ - Version [e.g. 24.12.01]
 
 **Jellyfin Server:**
- - Version [e.g. 10.10.7]
+ - Version [e.g. 10.10.3]
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
+**Desktop:**
+ - OS: [e.g. Windows]
  - Browser: [e.g. chrome, safari]
  - Browser Version: [e.g. 22]
  - Screen Resolution [e.g. 1920x1080]
 
-**Smartphone or TV (please complete the following information):**
+**Smartphone or TV:**
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
  - Browser: [e.g. stock browser, safari]
@@ -36,5 +41,7 @@ If applicable, add screenshots to help explain your problem.
  - Jellyfin App Version: 
 
 
-**Additional context**
-Add any other context about the problem here.
+**Are you using any plugins or extra CSS configuration**
+- Add any third-party plugins or CSS configuration you use.
+- [e.g. Media Bar, Custom Tabs etc]
+- [e.g. other custom css modifications]

README.md

@@ -95,8 +95,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
   <summary><i>Detailed steps for server-side implementation</i></summary>
 
 1. Open Dashboard from Administration tab in Settings.
-2. Select General tab from the side bar.
-3. Scroll down to find Custom CSS code box under Branding section.
+2. From the side bar, select the Branding tab if you are on Jellyfin 10.11.X or the General tab on older version.
+3. Scroll down to find Custom CSS code box.
 4. Paste the custom css in Custom CSS code box.
 5. Click save
 </details>
@@ -130,15 +130,16 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
 <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
 
+- Note: this customisation is not needed on Jellyfin 10.11.X anymore
 
-- To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
+- On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
 - Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
   ```
   :root{
     --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
   }
   ```
-- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8097`.
+- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
 - Don't forget the correct http or https in your domain.
 - You can also modify the parameters, for example blur size or the resolution, according to your liking.
 - Once done, save and refresh your apps and webpages.
@@ -219,29 +220,27 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 <hr>
 
 ### 🆗 Tested on 
-- Jellyfin Server v10.10.7
+- Jellyfin Server v10.11.1
 - Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3
 
-Note: Support for v10.11.0 is a work in progress
-
 <hr>
 
 ### 🛠️ Troubleshooting 
 <details>
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
-- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
-- It should be something like ElegantFin v25.07.XX
+- Check the version number at the bottom in the Settings screen. 
+- It should be something like `ElegantFin v25.10.XX`.
 </details>
 
 <details>
   <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
 
-- If Dashboard footer shows an old version, it means that your app is still using an old cache.
-- Once that cache is updated, the new version will be loaded. 
-- To get the latest version, you will need to clear cache. There are multiple ways to do it.
-- On web version, force a hard refresh of the page using CTRL + F5.
+- If the Settings footer shows an old version, it means that you are still using an old cache.
+- Once that cache is updated, the new version will be loaded automatically. 
+- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
+- On the web version, you can force a hard refresh of the page using CTRL + F5.
 - On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
 </details>
 

workspace.code-workspace

@@ -1,8 +1,13 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {}
+    "folders": [
+        {
+            "path": "."
+        }
+    ],
+    "settings": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "prettier.useTabs": false,
+        "prettier.printWidth": 120,
+    }
 }