From 13c48a559f61f044d0b99f0844964dff3f64de02 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Mon, 27 Apr 2026 23:59:20 +0200
Subject: [PATCH] Move message atrributes to image overlay

---
 src/components/projectPost.vue     | 20 +++++-----
 src/styles/_color.scss             |  3 +-
 src/styles/_page.project.feed.scss | 59 +++++++++++++++++-------------
 src/styles/_page.project.scss      |  3 +-
 4 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue
index d9cac98..b711302 100644
--- a/src/components/projectPost.vue
+++ b/src/components/projectPost.vue
@@ -161,20 +161,22 @@
 		</div>
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box">
-				<p>
-					<spotIcon :icon="'coords'" margin="right" size="lg" />
-					<projectMapLink :options="options" />
-				</p>
-				<p v-if="timeDiff">
-					<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
-				</p>
-				<a class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
+				<div class="drill" @click.prevent="executeMainAction" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
 					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get(options.weather_cond)">
 						<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
 					</span>
 					<img class="staticmap clickable" :title="lang.get('click_zoom')" :src="options.static_img_url" />
 					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="drillMainIcon" :iconSub="'footprint'" :icon-sub-transform="'rotate-270'" />
-				</a>
+					<div class="comment">
+						<p>
+							<spotIcon :icon="'coords'" margin="right" size="lg" />
+							<projectMapLink :options="options" />
+						</p>
+						<p v-if="timeDiff">
+							<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
+						</p>
+					</div>
+				</div>
 			</div>
 			<div v-else-if="options.type == 'media'" class="body-box">
 				<projectMediaLink :options="options" :type="'post'" ref="medialink" />
diff --git a/src/styles/_color.scss b/src/styles/_color.scss
index 6b96e43..69b069d 100644
--- a/src/styles/_color.scss
+++ b/src/styles/_color.scss
@@ -22,12 +22,13 @@ $message:			hsl(109, 45%, 27%);
 $message-flashy:	hsl(148, 100%, 50%);
 $message-hover:		color.adjust($message, $lightness: -10%, $space: hsl);
 $message-bg:		color.adjust($message, $lightness: 60%, $space: hsl);
+$message-bg-light:	color.adjust($message, $lightness: 70%, $alpha: -0.3, $space: hsl);
 
 $media:				hsl(214, 45%, 27%);
 $media-flashy:		hsl(193, 100%, 50%);
 $media-hover:		color.adjust($media, $lightness: -10%, $space: hsl);
 $media-bg:			color.adjust($media, $lightness: 60%, $space: hsl);
-$media-bg-light:	color.adjust($media, $lightness: 60%, $alpha: -0.4, $space: hsl);
+$media-bg-light:	color.adjust($media, $lightness: 70%, $alpha: -0.3, $space: hsl);
 
 //Over image colors
 $over-img: 			#DDD;
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index 6c42aca..5648291 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -106,18 +106,25 @@
 				}
 			}
 
+			.comment {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				margin: 0;
+				padding: var.$elem-spacing;
+				line-height: normal;
+				box-sizing: border-box;
+				border-radius: 0 0 var.$block-radius var.$block-radius;
+				transition: opacity 0.3s;
+				cursor: auto;
+				font-size: 0.9em;
+			}
+
 			&.message {
 				background: color.$message-bg;
 				color: color.$message;
 
-				p {
-					font-size: 0.9em;
-					height: 1em;
-					margin: 0 0 var.$elem-spacing 0;
-					display: inline-block;
-					width: 100%;
-				}
-
 				a {
 					color: color.$message;
 					&:hover {
@@ -125,8 +132,7 @@
 					}
 				}
 
-				a.drill {
-					line-height: 0;
+				.drill {
 
 					.drill-icon {
 
@@ -143,6 +149,24 @@
 						.drill-hover-icon {
 							color: color.$message-flashy;
 						}
+						.comment {
+							opacity: 0.3;
+						}
+					}
+
+					.comment {
+						background: color.$message-bg-light;
+
+						&:hover {
+							opacity: 1;
+						}
+						p {
+							margin: 0;
+						}
+
+						p + p {
+							margin-top: var.$elem-spacing;
+						}
 					}
 				}
 
@@ -256,21 +280,6 @@
 							outline: none;
 							border-radius: var.$block-radius;
 						}
-
-						.comment {
-							position: absolute;
-							left: 0;
-							bottom: 0;
-							width: 100%;
-							line-height: normal;
-							box-sizing: border-box;
-							margin: 0;
-							padding: 0.5em;
-							text-align: justify;
-							border-radius: 0 0 var.$block-radius var.$block-radius;
-							transition: opacity 0.3s;
-							opacity: 1;
-						}
 					}
 				}
 			}
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 5c46409..3317e56 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -16,11 +16,12 @@
 
 	/* Drill icon */
 
-	a.drill {
+	.drill {
 		position: relative;
 		overflow: hidden;
 		text-decoration: none;
 		display: inline-block;
+		line-height: 0;
 
 		.drill-icon {
 			position: absolute;