From 560b22c0398e245e76bf5eb2267010e4575dc0a7 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Thu, 30 Apr 2026 12:33:32 +0200
Subject: [PATCH] Clean up popup css

---
 src/components/projectPopup.vue   |  16 ++--
 src/styles/_page.project.map.scss | 127 +++++++++++-------------------
 2 files changed, 56 insertions(+), 87 deletions(-)

diff --git a/src/components/projectPopup.vue b/src/components/projectPopup.vue
index c702479..fbec5ad 100644
--- a/src/components/projectPopup.vue
+++ b/src/components/projectPopup.vue
@@ -28,7 +28,7 @@ export default {
 </script>
 
 <template>
-	<div :class="'info-window '+type">
+	<div :class="type">
 		<div class="header" v-if="type=='message'">
 			<h1>
 				<spotIcon :icon="'message'" size="lg" :text="lang.get('feed.counter', options.displayed_id)" width="auto" />
@@ -36,23 +36,23 @@ export default {
 			</h1>
 			<div class="separator"></div>
 		</div>
-		<div class="info coordinates">
+		<div class="section coordinates">
 			<spotIcon :icon="'coords'" fixed-width size="lg" margin="right" />
 			<projectMapLink :options="options" />
 		</div>
-		<div class="info altitude" v-if="options.altitude">
+		<div class="section altitude" v-if="options.altitude">
 			<spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" />
 		</div>
-		<div class="info time">
+		<div class="section time">
 			<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
 			<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
 		</div>
-		<div class="info weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
+		<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
 			<spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" />
 		</div>
-		<div v-if="medias.length > 0" class="info">
-			<spotIcon icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" />
-			<div class="medias">
+		<div v-if="medias.length > 0" class="section medias">
+			<spotIcon v-if="type=='message'" icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" />
+			<div class="medias-list">
 				<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
 			</div>
 		</div>
diff --git a/src/styles/_page.project.map.scss b/src/styles/_page.project.map.scss
index ab4c19a..f233282 100644
--- a/src/styles/_page.project.map.scss
+++ b/src/styles/_page.project.map.scss
@@ -11,7 +11,6 @@ $thumbnail-max-size: 60px;
 	bottom: 0;
 	width: 100%;
 
-	/* Popup */
 	.maplibregl-popup {
 		max-width: 300px;
 	}
@@ -19,38 +18,39 @@ $thumbnail-max-size: 60px;
 	.maplibregl-popup-content {
 		padding: var.$block-spacing;
 		background-color: color.$default-bg-light;
+		
+		.header h1 {
+			font-size: 1.4em;
+			margin: 0;
+			font-weight: bold;
+			text-align: center;
 
-		/* Marker Popup */
-		.info-window {
-			h1 {
-				font-size: 1.4em;
-				margin: 0;
-				font-weight: bold;
-				text-align: center;
-
-				.message-type {
-					color: color.$default;
-					font-weight: normal;
-					font-size: calc(1em / 1.4);
-					margin-left: 0.5em;
-					vertical-align: center;
-				}
+			.message-type {
+				color: color.$default;
+				font-weight: normal;
+				font-size: calc(1em / 1.4);
+				margin-left: 0.5em;
+				vertical-align: center;
 			}
+		}
 
-			.separator {
-				border-top: 1px solid color.$default-bg;
-				margin: var.$elem-spacing 0;
-			}
-
-			.info {
-				font-size: 1.0em;
-				margin: var.$elem-spacing 0 0 0;
-
-				a {
-					color: color.$default;
-				}
+		.separator {
+			border-top: 1px solid color.$default-bg;
+			margin: var.$elem-spacing 0;
+		}
+
+		.section {
+			font-size: 1.0em;
+			margin: var.$elem-spacing 0 0 0;
+
+			a {
+				color: color.$default;
 			}
+		}
 
+		.medias-list {
+			line-height: 0;
+			
 			a.media-link {
 				img {
 					width: auto;
@@ -75,68 +75,37 @@ $thumbnail-max-size: 60px;
 					}
 				}
 			}
+		}
 
-			&.message {
-				.medias {
-					line-height: 0;
-					display: flex;
-					flex-wrap: wrap;
-					gap: var.$elem-spacing;
-					align-items: center;
-					margin-top: var.$elem-spacing;
+		.message .medias-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var.$elem-spacing;
+			align-items: center;
+			margin-top: var.$elem-spacing;
 
-					a.media-link {
-						flex: 0 0 auto;
+			a.media-link {
+				flex: 0 0 auto;
 
-						img {
-							max-width: $thumbnail-max-size;
-							max-height: calc($thumbnail-max-size * 2/3);
-						}
-
-						&.drill .drill-icon {
-							font-size: 1.5em;
-						}
-					}
-				}
-			}
-
-			&.media {
-				.coordinates {
-					margin: 0;
+				img {
+					max-width: $thumbnail-max-size;
+					max-height: calc($thumbnail-max-size * 2/3);
 				}
 
-				.medias {
-					a.media-link img {
-						width: 100%;
-					}
+				&.drill .drill-icon {
+					font-size: 1.5em;
 				}
 			}
 		}
 
-		/* Track Popup */
-		.track_tooltip {
-			p {
-				margin: 0;
-
-				&.description {
-					font-size: 1.15em;
-				}
+		.media {
+			.coordinates {
+				margin-top: 0;
 			}
 
-			h1, .description {
-				@include common.no-text-overflow();
-			}
-			.body {
-				padding-left: calc(1.25em * 1.4 + var.$elem-spacing );
-				
-				.details {
-					margin-top: var.$block-spacing * -1;
-
-					p.detail {
-						margin-top: var.$block-spacing;
-						width: 50%;
-						display: inline-block;
-					}
+			.medias-list {
+				a.media-link img {
+					width: 100%;
 				}
 			}
 		}