Clean up popup css

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>

src/styles/_page.project.map.scss

@@ -11,7 +11,6 @@ $thumbnail-max-size: 60px;
 	bottom: 0;
 	width: 100%;
 
-	/* Popup */
 	.maplibregl-popup {
 		max-width: 300px;
 	}
@@ -20,9 +19,7 @@ $thumbnail-max-size: 60px;
 		padding: var.$block-spacing;
 		background-color: color.$default-bg-light;
 		
-		/* Marker Popup */
-		.info-window {
-			h1 {
+		.header h1 {
 			font-size: 1.4em;
 			margin: 0;
 			font-weight: bold;
@@ -42,7 +39,7 @@ $thumbnail-max-size: 60px;
 			margin: var.$elem-spacing 0;
 		}
 
-			.info {
+		.section {
 			font-size: 1.0em;
 			margin: var.$elem-spacing 0 0 0;
 
@@ -51,6 +48,9 @@ $thumbnail-max-size: 60px;
 			}
 		}
 
+		.medias-list {
+			line-height: 0;
+			
 			a.media-link {
 				img {
 					width: auto;
@@ -75,10 +75,9 @@ $thumbnail-max-size: 60px;
 					}
 				}
 			}
+		}
 
-			&.message {
-				.medias {
-					line-height: 0;
+		.message .medias-list {
 			display: flex;
 			flex-wrap: wrap;
 			gap: var.$elem-spacing;
@@ -98,47 +97,17 @@ $thumbnail-max-size: 60px;
 				}
 			}
 		}
-			}
 
-			&.media {
+		.media {
 			.coordinates {
-					margin: 0;
+				margin-top: 0;
 			}
 
-				.medias {
+			.medias-list {
 				a.media-link img {
 					width: 100%;
 				}
 			}
 		}
 	}
-
-		/* Track Popup */
-		.track_tooltip {
-			p {
-				margin: 0;
-
-				&.description {
-					font-size: 1.15em;
-				}
-			}
-
-			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;
-					}
-				}
-			}
-		}
-	}
 }