Mobile desighn Adjustments

public/js/leaderboard.js

@@ -118,8 +118,8 @@ async function loadLocations() {
         // Store locations globally for distance calculations
         locationsData = locations;
         
-        // Clear existing options except "Alle Standorte"
-        locationSelect.innerHTML = '<option value="all">🌍 Alle Standorte</option>';
+        // Clear existing options and set default placeholder
+        locationSelect.innerHTML = '<option value="">📍 Bitte Standort auswählen</option>';
         
         // Add locations from database
         locations.forEach(location => {
@@ -284,12 +284,42 @@ function showLocationError(message) {
     }, 6000);
 }
 
+// Show prompt when no location is selected
+function showLocationSelectionPrompt() {
+    const rankingList = document.getElementById('rankingList');
+    rankingList.innerHTML = `
+        <div class="empty-state">
+            <div class="empty-icon">📍</div>
+            <div class="empty-title">Standort auswählen</div>
+            <div class="empty-description">
+                Bitte wähle einen Standort aus dem Dropdown-Menü aus<br>
+                oder nutze den "📍 Mein Standort" Button, um automatisch<br>
+                den nächstgelegenen Standort zu finden.
+            </div>
+        </div>
+    `;
+    
+    // Reset stats to show no data
+    document.getElementById('totalPlayers').textContent = '0';
+    document.getElementById('bestTime').textContent = '--:--';
+    document.getElementById('totalRecords').textContent = '0';
+    
+    // Update current selection display
+    updateCurrentSelection();
+}
+
 // Load data from local database via MCP
 async function loadData() {
     try {
         const location = document.getElementById('locationSelect').value;
         const period = document.querySelector('.time-tab.active').dataset.period;
         
+        // Don't load data if no location is selected
+        if (!location || location === '') {
+            showLocationSelectionPrompt();
+            return;
+        }
+        
         // Build query parameters
         const params = new URLSearchParams();
         if (location && location !== 'all') {
@@ -383,7 +413,7 @@ function updateCurrentSelection() {
     // Get the display text from the selected option
     const locationSelect = document.getElementById('locationSelect');
     const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex];
-    const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '🌍 Alle Standorte';
+    const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '📍 Bitte Standort auswählen';
     
     const periodIcons = {
         'today': '📅 Heute',
@@ -484,7 +514,7 @@ function setupEventListeners() {
 async function init() {
     await checkAuth();
     await loadLocations();
-    await loadData();
+    showLocationSelectionPrompt(); // Show prompt instead of loading data initially
     setupEventListeners();
 }