🐛 Minor bug fixes

angular.json

@@ -18,13 +18,22 @@
             "browser": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
+            "allowedCommonJsDependencies": ["leaflet"],
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images/",
+                "output": "assets/images/"
               }
             ],
-            "styles": ["src/styles.css"],
+            "styles": [
+              "src/styles.css",
+              "node_modules/leaflet/dist/leaflet.css"
+            ],
             "scripts": [
               "node_modules/flowbite/dist/flowbite.min.js",
               "node_modules/leaflet/dist/leaflet.js"
@@ -35,13 +44,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ],
               "outputHashing": "all",
@@ -85,6 +94,11 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "./assets"
               }
             ],
             "styles": ["src/styles.css"],

public/manifest.webmanifest

@@ -1,8 +1,8 @@
 {
   "name": "Memory Map",
   "short_name": "Memory Map",
-  "theme_color": "#1976d2",
-  "background_color": "#fafafa",
+  "theme_color": "#111827",
+  "background_color": "#FFFFFF",
   "display": "standalone",
   "scope": "./",
   "start_url": "./",
@@ -11,49 +11,57 @@
       "src": "icons/icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-128x128.png",
       "sizes": "128x128",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-152x152.png",
       "sizes": "152x152",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     },
     {
       "src": "icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable any",
+      "background_color": "#FFFFFF"
     }
   ]
 }

src/app/components/confirm-modal/confirm-modal.component.html

@@ -11,7 +11,7 @@
 
 <!-- Contenu principal -->
 <div
-  class="fixed inset-0 z-50 flex justify-center items-center w-full h-full"
+  class="fixed inset-0 z-50 flex justify-center items-center w-full h-full overflow-y-auto"
   [ngClass]="{
     'opacity-0 scale-50 pointer-events-none': !isOpen,
     'opacity-100 scale-100': isOpen
@@ -19,7 +19,7 @@
   id="confirm-modal"
 >
   <div
-    class="bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md transition-transform duration-300 ease-in-out"
+    class="bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md transition-transform duration-300 ease-in-out my-8"
   >
     <!-- Modal header -->
     <div

src/app/components/friend-page/friend-page.component.html

@@ -26,9 +26,11 @@
     'opacity-0 scale-50 pointer-events-none': !isFriendModalOpen,
     'opacity-100 scale-100': isFriendModalOpen
   }"
-  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
 >
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
+  <div
+    class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full my-8"
+  >
     <!-- En-tête du modal -->
     <div
       class="flex items-center justify-between p-4 border-b dark:border-gray-700"

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -9,7 +9,6 @@ import {
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
 import { MapReloadService } from '../../services/map-reload/map-reload.service';

src/app/components/login-page/login-page.component.html

@@ -17,12 +17,12 @@
     'opacity-0 scale-50 pointer-events-none': !isLoginModalOpen,
     'opacity-100 scale-100': isLoginModalOpen
   }"
-  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
 >
   <div class="relative p-4 w-full max-w-md max-h-full">
     <!-- Modal content -->
     <div
-      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out my-8"
     >
       <!-- Modal header -->
       <div

src/app/components/register-page/register-page.component.html

@@ -25,12 +25,12 @@
     'opacity-0 scale-0 pointer-events-none': !isRegisterModalOpen,
     'opacity-100 scale-100': isRegisterModalOpen
   }"
-  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
 >
   <div class="relative p-4 w-full max-w-md max-h-full">
     <!-- Modal content -->
     <div
-      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out"
+      class="relative bg-white rounded-lg shadow dark:bg-gray-700 transition-transform duration-300 ease-in-out my-8"
     >
       <!-- Modal header -->
       <div

src/app/services/exif/exif.service.ts

@@ -1,29 +1,11 @@
 import { Injectable } from '@angular/core';
-import exifr from 'exifr';
+import * as exifr from 'exifr';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ExifService {
-
   private getExifData(file: File): Promise<any> {
-    // console.log('getExifData(file)');
-    // return new Promise((resolve, reject) => {
-    //   console.log('getExifData(file) -> Promise');
-    //   const reader = new FileReader();
-    //   console.log('getExifData(file) -> Promise -> reader');
-    //   reader.onload = (event: any) => {
-    //     console.log('getExifData(file) -> Promise -> reader -> onload');
-    //     EXIF.getData(event.target.result, function() {
-    //       console.log('getExifData(file) -> Promise -> reader -> onload -> EXIF.getData');
-    //       const allExifData = EXIF.getAllTags(this);
-    //       console.log('getExifData(file) -> Promise -> reader -> onload -> EXIF.getData -> getAllTags');
-    //       resolve(allExifData);
-    //     });
-    //   };
-    //   reader.onerror = (error) => reject(error);
-    //   reader.readAsArrayBuffer(file);
-    // });
     return exifr.parse(file);
   }
 
@@ -32,7 +14,7 @@ export class ExifService {
       return await this.getExifData(file);
     } catch (error) {
       console.error('Error reading EXIF data:', error);
-      return
+      return;
     }
   }
 
@@ -56,12 +38,21 @@ export class ExifService {
     }
   }
 
-  async getLocation(file: File): Promise<{ latitude?: number; longitude?: number }> {
+  async getLocation(
+    file: File
+  ): Promise<{ latitude?: number; longitude?: number }> {
     try {
       const exifData = await this.getExifData(file);
       return {
-        latitude: exifData.GPSLatitude ? this.convertToDecimal(exifData.GPSLatitude, exifData.GPSLatitudeRef) : undefined,
-        longitude: exifData.GPSLongitude ? this.convertToDecimal(exifData.GPSLongitude, exifData.GPSLongitudeRef) : undefined
+        latitude: exifData.GPSLatitude
+          ? this.convertToDecimal(exifData.GPSLatitude, exifData.GPSLatitudeRef)
+          : undefined,
+        longitude: exifData.GPSLongitude
+          ? this.convertToDecimal(
+              exifData.GPSLongitude,
+              exifData.GPSLongitudeRef
+            )
+          : undefined,
       };
     } catch (error) {
       console.error('Error reading EXIF data:', error);
@@ -82,6 +73,6 @@ export class ExifService {
   private convertToDecimal(coordinate: number[], direction: string): number {
     if (!coordinate || coordinate.length !== 3) return NaN;
     const decimal = coordinate[0] + coordinate[1] / 60 + coordinate[2] / 3600;
-    return (direction === 'S' || direction === 'W') ? -decimal : decimal;
+    return direction === 'S' || direction === 'W' ? -decimal : decimal;
   }
 }

src/index.html

@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.webmanifest" />
-    <meta name="theme-color" content="#1976d2" />
+    <meta name="theme-color" content="#111827" />
     <link rel="manifest" href="manifest.webmanifest" />
-    <meta name="theme-color" content="#1976d2" />
+    <meta name="theme-color" content="#111827" />
   </head>
   <body>
     <app-root></app-root>

src/styles.css

@@ -10,3 +10,15 @@
 .leaflet-control-zoom a {
   @apply dark:!bg-gray-900 dark:!text-white !rounded-md m-1 dark:hover:!bg-gray-700 bg-white hover:bg-gray-200 !border-none !shadow-none;
 }
+
+/* Fix Leaflet image paths */
+.leaflet-control-layers-toggle {
+  background-image: url(/assets/images/layers.png);
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi) {
+  .leaflet-control-layers-toggle {
+    background-image: url(/assets/images/layers-2x.png);
+  }
+}