Fix FA auto width

src/components/project.vue

@@ -669,7 +669,7 @@ export default {
 									<label :for="'project-'+project.id">
 										<span>{{ project.name }}</span>
 										<a class="download" :href="project.gpxfilepath" :title="lang.get('track_download')" @click.stop="()=>{}">
-											<SpotIcon :icon="'download'" :classes="'push-left'" />
+											<SpotIcon :icon="'download'" margin="left" />
 										</a>
 									</label>
 								</div>

src/components/projectPopup.vue

@@ -37,7 +37,7 @@ export default {
 			<div class="separator"></div>
 		</div>
 		<p class="coordinates">
-			<spotIcon :icon="'coords'" fixed-width size="lg" :margin="true" />
+			<spotIcon :icon="'coords'" fixed-width size="lg" margin="right" />
 			<projectMapLink :options="options" />
 		</p>
 		<p class="altitude" v-if="options.altitude">

src/components/projectPost.vue

@@ -95,9 +95,11 @@
 				this.hash.items = [this.hash.items[0], this.options.type, this.options.id_message];
 			},
 			openMarkerPopup() {
+				this.mouseOverDrill = true;
 				if(this.map.isMarkerVisible(this.lngLat)) this.map.openMarkerPopup(this.options.id_message);
 			},
 			closeMarkerPopup() {
+				this.mouseOverDrill = false;
 				if(!this.popupRequested) this.map.closeMarkerPopup();
 				this.popupRequested = false;
 			},
@@ -145,9 +147,9 @@
 	<div :class="postClass" :id="postId">
 		<div class="header" v-if="!options.headerless">
 			<div class="index">
-				<spotIcon :icon="subType" :text="displayedId" />
+				<spotIcon :icon="subType" :text="displayedId" width="auto" />
 				<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="anchorLink" :title="anchorTitle">
-					<spotIcon :icon="anchorIcon" :classes="'push-left'" />
+					<spotIcon :icon="anchorIcon" margin="left" />
 				</a>
 			</div>
 			<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?lang.get('local_time', absTimeLocal):''">
@@ -158,15 +160,15 @@
 			</div>
 		</div>
 		<div class="body">
-			<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
+			<div v-if="options.type == 'message'" class="body-box">
 				<p>
-					<spotIcon :icon="'coords'" :classes="'push'" size="lg" />
+					<spotIcon :icon="'coords'" margin="right" size="lg" />
 					<projectMapLink :options="options" />
 				</p>
 				<p v-if="timeDiff">
-					<projectRelTime :icon="'time'" :iconClasses="'push'" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
+					<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
 				</p>
-				<a class="drill" @click.prevent="executeMainAction" @mouseenter="mouseOverDrill = true" @mouseleave="mouseOverDrill = false">
+				<a 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>

src/components/projectRelTime.vue

@@ -11,7 +11,7 @@ export default {
 		offset: String,
 		classes: String,
 		icon: String,
-		iconClasses: String
+		margin: String,
 	},
 	inject: ['lang'],
 	computed: {
@@ -23,6 +23,6 @@ export default {
 </script>
 
 <template>
-	<spotIcon v-if="icon" :icon="icon" :classes="iconClasses" :title="title" :text="localTime" fixed-width size="lg" />
+	<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" fixed-width size="lg" />
 	<span v-else :class="classes" :title="title">{{ localTime }}</span>
 </template>

src/components/spotIcon.vue

@@ -8,13 +8,12 @@ export default {
 	},
 	props: {
 		icon: String,
-		fixedWidth: Boolean,
+		width: String,
-		rotation: [Number, String],
 		size: String,
 		classes: String,
 		title: String,
 		text: String,
-		margin: Boolean,
+		margin: String,
 		textClasses: String,
 		transform: String
 	},
@@ -23,12 +22,15 @@ export default {
 			return [
 				'spot-icon',
 				this.icon,
-				...(this.classes || '').split(/\s+/).filter(Boolean),
+				...(this.classes || '').split(/\s+/),
-				...(this.margin || this.hasText ? ['push'] : [])
+				this.margin?'margin-'+this.margin:null || this.hasText?'margin-right':null
 			].filter(Boolean).join(' ');
 		},
 		resolvedFixedWidth() {
-			return this.fixedWidth || null;
+			return (this.width == 'fixed') || null;
+		},
+		resolvedAutoWidth() {
+			return (this.width == 'auto') || null;
 		},
 		hasText() {
 			return this.text && this.text != '';
@@ -36,9 +38,6 @@ export default {
 		iconDefinition() {
 			return getIcon(this.icon);
 		},
-		resolvedRotation() {
-			return this.rotation || null;
-		},
 		resolvedSize() {
 			return this.size || null;
 		},
@@ -51,8 +50,8 @@ export default {
 
 <template>
 	<span :title="title" v-if="title || hasText">
-		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
+		<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 		<span v-if="hasText" :class="textClasses">{{ text }}</span>
 	</span>
-	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :rotation="resolvedRotation" :size="resolvedSize" :transform="resolvedTransform" />
+	<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
 </template>

src/components/spotIconStack.vue

@@ -27,7 +27,7 @@ export default {
 			return this.mergeClasses('sub', this.iconSubClasses);
 		},
 		iconSubTransformValue() {
-			return this.mergeClasses('shrink-8 up-2', this.iconSubTransform);
+			return this.mergeClasses('shrink-9 up-2', this.iconSubTransform);
 		}
 	},
 	methods: {

src/styles/_fa.scss

@@ -1,9 +1,11 @@
+@use "var";
+
 .spot-icon {
-	&.push {
+	&.margin-right {
-		margin-right: 0.3rem;
+		margin-right: var.$text-spacing;
 	}
 
-	&.push-left {
+	&.margin-left {
-		margin-left: 0.3rem;
+		margin-left: var.$text-spacing;
 	}
-}
+}

src/styles/_page.project.feed.scss

@@ -58,16 +58,17 @@
 			}
 
 			.header {
+				display: flex;
+				align-items: center;
 				padding: 0 var.$block-spacing;
 				position: relative;
 
 				div {
-					display: inline-block;
 					font-size: 0.8em;
 					padding: var.$elem-spacing 0px;
 
 					&.index {
-						width: 25%;
+						flex: 0 0 auto;
 
 						.link {
 							padding: 0;
@@ -76,7 +77,7 @@
 					}
 
 					&.time {
-						width: 75%;
+						flex: 1 1 auto;
 						text-align: right;
 						font-style: italic;
 					}
@@ -158,10 +159,7 @@
 						color: color.$message-bg;
 						border-radius: var.$block-radius 0 0 var.$block-radius;
 						padding: var.$elem-spacing;
-
+						margin-right: 0;
-						&.push {
-							margin-right: 0;
-						}
 					}
 
 					.temperature {

src/styles/_page.project.panel.scss

@@ -186,6 +186,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 		span {
 			font-size: 1.3em;
 			line-height: calc(var.$block-spacing / 1.3);
+			vertical-align: center;
 		}
 	}
 

src/styles/_page.project.settings.scss

@@ -56,7 +56,7 @@
 			background: color.$default-bg;
 			border-radius: 0 0 3px 3px;
 			font-size: 0.7em;
-			padding: 0.3rem;
+			padding: var.$text-spacing;
 			text-align: center;
 			color: color.$default;
 
@@ -97,7 +97,7 @@
 						}
 
 						label {
-							margin-left: .3rem;
+							margin-left: var.$text-spacing;
 							@extend .clickable;
 							@include common.no-text-overflow();
 						}

src/styles/_var.scss

@@ -1,5 +1,6 @@
 //Feed width
 $elem-spacing: 0.5rem;
+$text-spacing: 0.3em;
 $block-spacing: 1rem;
 $block-radius: 3px;
 $block-shadow: 3px;