Fix FA auto width

This commit is contained in:
2026-04-27 23:15:24 +02:00
parent 844c9c0a53
commit c39b7705be
11 changed files with 39 additions and 36 deletions
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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">
+8 -6
View File
@@ -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>
+2 -2
View File
@@ -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>
+10 -11
View File
@@ -8,13 +8,12 @@ export default {
},
props: {
icon: String,
fixedWidth: Boolean,
rotation: [Number, String],
width: 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.margin || this.hasText ? ['push'] : [])
...(this.classes || '').split(/\s+/),
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>
+1 -1
View File
@@ -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: {