ske087/moto-adv-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Clean up map_iframe_single.html, remove debug overlay, ensure clean map rendering.

Browse Source
This commit is contained in:
ske087
2025-07-26 15:19:52 +03:00
parent 187254beca
commit 5ddde4bd9b
23 changed files with 1755 additions and 1658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/templates/community/post_detail.html
View File

@@ -419,6 +419,26 @@
<div class="space-y-8">
<!-- GPS Map and Route Information -->
{% if post.gpx_files.count() > 0 %}
<!-- Map Card (single route, styled like Adventure Info) -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
<div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6">
<div class="flex items-center text-white">
<i class="fas fa-map-marked-alt text-2xl mr-3"></i>
<div>
<h2 class="text-xl font-bold">Map</h2>
<p class="text-blue-100">Full trip view</p>
</div>
</div>
</div>
<div class="p-0" style="height:400px;overflow:hidden;">
<iframe
id="route-map-iframe"
src="{{ url_for('static', filename='map_iframe_single.html') }}?route_id={{ post.gpx_files[0].id }}"
width="100%" height="400" style="border:0; border-radius:1rem; display:block; background:#f8f9fa;"
allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-orange-600 to-red-600 p-6">
<div class="flex items-center text-white">
@@ -491,44 +511,7 @@
</div>
<!-- Interactive Map Card -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-teal-600 to-cyan-600 p-6">
<div class="flex items-center justify-between text-white">
<div class="flex items-center">
<i class="fas fa-map text-2xl mr-3"></i>
<div>
<h2 class="text-xl font-bold">Interactive Route Map</h2>
<p class="text-teal-100">Explore the full route</p>
</div>
</div>
<button onclick="expandMap()"
class="px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 text-white font-semibold rounded-lg hover:bg-white/30 transition-all duration-200">
<i class="fas fa-expand mr-2"></i>
Expand
</button>
</div>
</div>
<div class="p-6">
<div class="relative">
<div id="interactive-map" class="map-container shadow-lg">
<!-- Fallback content if map doesn't load -->
<div id="map-fallback" class="absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-600">
<div class="text-center">
<i class="fas fa-map text-4xl mb-4 text-gray-400"></i>
<div class="font-semibold">Loading Interactive Map...</div>
<div class="text-sm mt-2">If map doesn't load, please refresh the page</div>
</div>
</div>
</div>
<div id="map-loading" class="map-loading">
<div class="flex items-center space-x-3">
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-teal-600"></div>
<span class="text-gray-700 font-medium">Loading route...</span>
</div>
</div>
</div>
</div>
</div>
<!-- Interactive Map Card removed as requested -->
{% endif %}
<!-- Adventure Info -->
@@ -568,6 +551,14 @@
<span class="text-gray-600">Photos</span>
<span class="text-gray-900">{{ post.images.count() }}</span>
</div>
<!-- Interactive Map Card (iframe, styled as in community index) -->
<div class="map-card-square mt-8 mb-8 mx-auto">
<div class="map-card-header">
<span class="map-card-title">🗺️ Interactive Route Map</span>
<span class="map-card-count">1 route</span>
</div>
</div>
{% endif %}
{% if post.gpx_files.count() > 0 %}
<div class="flex items-center justify-between">
@@ -908,7 +899,6 @@ function toggleLike(postId) {
likeBtn.classList.add('from-pink-600', 'to-red-600', 'hover:from-pink-700', 'hover:to-red-700');
likeText.textContent = 'Like this Adventure';
}
// Update like count in meta section
const likeCountSpan = document.querySelector('.bg-pink-500\\/20');
if (likeCountSpan) {