Fix FA auto width
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user