From 64cacaf16e54c8054d8f32979577ebc764e3cd20 Mon Sep 17 00:00:00 2001
From: Franzz <francois@lutran.fr>
Date: Fri, 24 Apr 2026 17:31:54 +0200
Subject: [PATCH] Harmonize drill/stacked icons

---
 src/components/project.vue         |  2 +-
 src/components/projectPost.vue     |  2 +-
 src/components/spotIconStack.vue   |  8 ++++-
 src/styles/_fa.scss                |  5 ++-
 src/styles/_page.project.feed.scss |  9 ++---
 src/styles/_page.project.scss      | 54 ++++++++++++++++++------------
 6 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/components/project.vue b/src/components/project.vue
index 1b2669f..fcdd73a 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -313,7 +313,7 @@ export default {
 			//TODO Use same way of displaying markers (so that openMarkerPopup works on all markers)
 			this.markers.medias.forEach(msg => {
 				const $Marker = document.createElement('div');
-				const app = createApp(SpotIconStack, {iconMain: 'media', iconSub: msg.subtype+'-in'});
+				const app = createApp(SpotIconStack, {mainClasses: 'media', iconMain: 'marker', iconSub: msg.subtype});
 				app.mount($Marker);
 
 				const $Popup = document.createElement('div');
diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue
index c77e646..a4de4a1 100644
--- a/src/components/projectPost.vue
+++ b/src/components/projectPost.vue
@@ -167,7 +167,7 @@
 						<span class="temperature">{{ options.weather_temp+'°C' }}</span>
 					</span>
 					<img class="staticmap clickable" :title="spot.lang('click_zoom')" :src="options.static_img_url" />
-					<spotIconStack :iconMain="'message'" :iconSub="'message-in'" :iconSubClasses="'fa-rotate-270'" />
+					<spotIconStack :mainClasses="'message drill-icon'" :iconMain="'marker'" :iconSub="'footprint'" :iconSubClasses="'fa-rotate-270'" />
 				</a>
 			</div>
 			<div v-else-if="options.type == 'media'" class="body-box">
diff --git a/src/components/spotIconStack.vue b/src/components/spotIconStack.vue
index 875c3c8..788c4dc 100644
--- a/src/components/spotIconStack.vue
+++ b/src/components/spotIconStack.vue
@@ -6,16 +6,22 @@ export default {
 		spotIcon
 	},
 	props: {
+		mainClasses: String,
 		iconMain: String,
 		iconMainClasses: String,
 		iconSub: String,
 		iconSubClasses: String,
+	},
+	computed: {
+		mainClass() {
+			return 'icon-stack fa-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
+		}
 	}
 }
 </script>
 
 <template>
-	<span class="drill-icon fa-stack clickable">
+	<span :class="mainClass">
 		<spotIcon :icon="iconMain" :classes="'fa-stack-2x clickable'+(iconMainClasses?' '+iconMainClasses:'')" />
 		<spotIcon :icon="iconSub" :classes="'fa-stack-1x'+(iconSubClasses?' '+iconSubClasses:'')" />
 	</span>
diff --git a/src/styles/_fa.scss b/src/styles/_fa.scss
index 1b556f9..5ce3376 100644
--- a/src/styles/_fa.scss
+++ b/src/styles/_fa.scss
@@ -43,6 +43,8 @@
 
 /* Map */
 .#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
+.#{variables.$fa-css-prefix}-marker:before { content: functions.fa-content(variables.$fa-var-map-marker); }
+.#{variables.$fa-css-prefix}-footprint:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
 .#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
 .#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
 .#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
@@ -71,11 +73,8 @@
 .#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
 .#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
 .#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
-.#{variables.$fa-css-prefix}-video-in:before { content: functions.fa-content(variables.$fa-var-film); }
 .#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
-.#{variables.$fa-css-prefix}-image-in:before { content: functions.fa-content(variables.$fa-var-image); }
 .#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
-.#{variables.$fa-css-prefix}-message-in:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
 .#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
 .#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
 .#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }
diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss
index 750f1ff..7c266e0 100644
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -127,19 +127,15 @@
 
 					.drill-icon {
 						transform: translate(-16px, -32px);
-
-						.fa-message-in {
-							top: -1px;
-						}
 					}
 
 					&:hover {
-						.fa-message {
+						.#{variables.$fa-css-prefix}-stack-2x {
 							@extend .#{variables.$fa-css-prefix}-drill-message;
 							top: 13px;
 							left: 3px;
 						}
-						.fa-message-in {
+						.#{variables.$fa-css-prefix}-stack-1x {
 							display: none;
 						}
 					}
@@ -236,6 +232,7 @@
 								.drill-icon {
 									.fa-drill-image, .fa-drill-video {
 										color: color.$media-bg;
+										text-shadow: color.$over-img-shadow 3px 3px 3px;
 									}
 								}
 
diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss
index 7973cfd..6bf3cbd 100644
--- a/src/styles/_page.project.scss
+++ b/src/styles/_page.project.scss
@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 
-	/* Drill & Map icons */
+	/* Drill icon */
 
 	a.drill {
 		position: relative;
@@ -29,38 +29,48 @@
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%,-50%);
-
+			
 			i {
-				transition: color 0.3s;
+				transition: color 0.3s, text-shadow 0.3s;
 			}
 		}
 	}
 
-	.#{variables.$fa-css-prefix}-stack {
-		.#{variables.$fa-css-prefix}-message {
+	/* Icon Stack */
+
+	.icon-stack {
+		.#{variables.$fa-css-prefix}-stack-2x {
 			font-size: 32px;
 			text-shadow: color.$over-img-shadow 3px 3px 3px;
-			color: color.$message-flashy;
 		}
-		.#{variables.$fa-css-prefix}-media {
-			@extend .#{variables.$fa-css-prefix}-message;
-			color: color.$media-flashy;
+		
+		.#{variables.$fa-css-prefix}-stack-1x {
+			font-size: 13px;
 		}
-		.#{variables.$fa-css-prefix}-message-in {
-		    font-size: 13px;
-		    color: color.$message;
-		    top: 1px;
+
+		&.message {
+			.#{variables.$fa-css-prefix}-stack-2x {
+				color: color.$message-flashy;
+			}
 		}
-		.#{variables.$fa-css-prefix}-media-in {
-			color: color.$media;
+
+		&.media {
+			.#{variables.$fa-css-prefix}-stack-2x {
+				color: color.$media-flashy;
+			}
 		}
-		.#{variables.$fa-css-prefix}-track-start, .#{variables.$fa-css-prefix}-track-end {
-			color: color.$track-start;
-			font-size: 14px;
-			top: 1px;
-		}
-		.#{variables.$fa-css-prefix}-track-end {
-			color: color.$track-end;
+
+		&.track {
+			.#{variables.$fa-css-prefix}-stack-1x {
+				font-size: 14px;
+				top: 1px;
+			}
+			.#{variables.$fa-css-prefix}-track-start {
+				color: color.$track-start;
+			}
+			.#{variables.$fa-css-prefix}-track-end {
+				color: color.$track-end;
+			}
 		}
 	}
 }
\ No newline at end of file