Harmonize drill/stacked icons

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');

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">

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>

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); }

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;
 									}
 								}
 

src/styles/_page.project.scss

@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 
-	/* Drill & Map icons */
+	/* Drill icon */
 
 	a.drill {
 		position: relative;
@@ -31,36 +31,46 @@
 			transform: translate(-50%,-50%);
 			
 			i {
-				transition: color 0.3s;
+				transition: color 0.3s, text-shadow 0.3s;
 			}
 		}
 	}
 
-	.#{variables.$fa-css-prefix}-stack {
+	/* Icon Stack */
-		.#{variables.$fa-css-prefix}-message {
+
+	.icon-stack {
+		.#{variables.$fa-css-prefix}-stack-2x {
 			font-size: 32px;
 			text-shadow: color.$over-img-shadow 3px 3px 3px;
+		}
+		
+		.#{variables.$fa-css-prefix}-stack-1x {
+			font-size: 13px;
+		}
+
+		&.message {
+			.#{variables.$fa-css-prefix}-stack-2x {
 				color: color.$message-flashy;
 			}
-		.#{variables.$fa-css-prefix}-media {
+		}
-			@extend .#{variables.$fa-css-prefix}-message;
+
+		&.media {
+			.#{variables.$fa-css-prefix}-stack-2x {
 				color: color.$media-flashy;
 			}
-		.#{variables.$fa-css-prefix}-message-in {
-		    font-size: 13px;
-		    color: color.$message;
-		    top: 1px;
 		}
-		.#{variables.$fa-css-prefix}-media-in {
+
-			color: color.$media;
+		&.track {
-		}
+			.#{variables.$fa-css-prefix}-stack-1x {
-		.#{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-start {
+				color: color.$track-start;
+			}
 			.#{variables.$fa-css-prefix}-track-end {
 				color: color.$track-end;
 			}
 		}
 	}
+}