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>