franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix FA auto width

Browse Source
This commit is contained in:
Franzz
2026-04-27 23:15:24 +02:00
parent 844c9c0a53
commit c39b7705be
11 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/project.vue
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>

2
src/components/projectPopup.vue
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">

14
src/components/projectPost.vue
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>

4
src/components/projectRelTime.vue
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>

21
src/components/spotIcon.vue
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>

2
src/components/spotIconStack.vue
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: {

12
src/styles/_fa.scss
View File

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

12
src/styles/_page.project.feed.scss
View File

@@ -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;
&.push {
margin-right: 0;
}
margin-right: 0;
}
.temperature {

1
src/styles/_page.project.panel.scss
View File

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

4
src/styles/_page.project.settings.scss
View File

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

1
src/styles/_var.scss
View File

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