mobile ui

web/js/map.js

@@ -46,11 +46,21 @@ function addMarker(listing) {
 
     const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map);
 
-    const imageHtml = listing.image
-        ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
-        : '';
+    // Check if mobile
+    const isMobile = window.innerWidth < 768;
 
-    const popupContent = `
+    if (isMobile) {
+        // On mobile: open fullscreen popup
+        marker.on('click', () => {
+            showMobilePopup(listing);
+        });
+    } else {
+        // On desktop: use regular leaflet popup
+        const imageHtml = listing.image
+            ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
+            : '';
+
+        const popupContent = `
         <div style="min-width: 200px; 8px;">
             <strong style="font-size: 14px;">${listing.title}</strong><br>
             ${imageHtml}
@@ -59,12 +69,43 @@ function addMarker(listing) {
             <a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
         </div>
     `;
-    marker.bindPopup(popupContent);
+        marker.bindPopup(popupContent);
 
-    marker.on('click', () => {
-        AppState.selectedListingId = listing.id;
-        highlightSelectedListing();
-    });
+        marker.on('click', () => {
+            AppState.selectedListingId = listing.id;
+            highlightSelectedListing();
+        });
+    }
 
     AppState.markers.push(marker);
+}
+
+function showMobilePopup(listing) {
+    const popup = document.getElementById('mobilePopup');
+    const content = document.getElementById('mobilePopupContent');
+
+    const imageHtml = listing.image
+        ? `<img src="${listing.image}" class="popup-image" alt="${listing.title}">`
+        : '';
+
+    const dateStr = listing.date_added ? new Date(listing.date_added).toLocaleDateString('de-DE') : 'Unbekannt';
+
+    content.innerHTML = `
+        ${imageHtml}
+        <div class="popup-title">${listing.title}</div>
+        <div class="popup-price">${listing.price} €</div>
+        <div class="popup-meta">
+            <div class="popup-meta-item">
+                <span class="popup-meta-icon">📍</span>
+                <span>${listing.address || listing.zip_code}</span>
+            </div>
+            <div class="popup-meta-item">
+                <span class="popup-meta-icon">📅</span>
+                <span>${dateStr}</span>
+            </div>
+        </div>
+        <a href="${listing.url}" target="_blank" class="popup-link">Inserat auf Kleinanzeigen.de öffnen</a>
+    `;
+
+    popup.classList.add('show');
 }