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

Harmonize track desc display
Deploy Spot / deploy (push) Successful in 43s
Details

Browse Source
This commit is contained in:
franzz
2026-06-15 01:25:59 +02:00
parent aa17ea99a2
commit a127535b36
19 changed files with 160502 additions and 160231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/project.vue
+4 -2
View File
@@ -68,7 +68,7 @@ export default {
lightbox: null,
hikes: {
colors: {},
width: 4
width: null
},
popup: {content: null, element: null},
overview: {id: 0, codename:'overview', name: this.lang.get('project.overview')},
@@ -127,6 +127,7 @@ export default {
'off-track': this.getStyleProperty('--track-off-track'),
'hitchhiking': this.getStyleProperty('--track-hitchhiking')
};
this.hikes.width = parseFloat(this.getStyleProperty('--track-width'));
//Reset values
this.track = null;
@@ -431,7 +432,8 @@ export default {
this.popup.content = createApp(ProjectPopup, {
options: options,
project: this.project
project: this.project,
hikes: this.hikes
});
this.popup.content
.provide('lang', this.lang)
src/components/projectPopup.vue
+17 -7
View File
@@ -13,7 +13,8 @@ export default {
},
props: {
options: Object,
project: Object
project: Object,
hikes: Object
},
inject: ['lang', 'consts', 'isMobile'],
computed: {
@@ -54,17 +55,26 @@ export default {
<div :class="options.type+' '+options.subtype">
<div class="header" v-if="options.type == 'track' || options.type == 'project'">
<h1>
<spotIcon :icon="options.subtype" size="lg" :text="this.options.name" width="auto" :textClasses="options.subtype" />
<spotIcon v-if="options.type == 'project'" :icon="options.subtype" :classes="'track-'+options.subtype" size="lg" :text="this.options.name" width="auto" />
<span v-else class="track" :title="lang.get('track.'+options.subtype)">
<span class="line" :style="'background-color:'+hikes.colors[options.subtype]+';'"></span>
<span class="desc">{{ this.options.name }}</span>
</span>
</h1>
<p v-if="options.description" class="description">{{ options.description }}</p>
<p v-if="options.description && !options.leg" class="description">{{ options.description }}</p>
<div v-if="options.subtype!='hitchhiking'" class="separator"></div>
</div>
<div v-if="options.type=='track'">
<div v-if="options.leg" class="section destination">
<spotIcon :title="lang.get('stats.from')" icon="start" width="fixed" size="lg" :text="options.leg.from" />
<spotIcon :title="lang.get('stats.to')" icon="start" transform="rotate-180" width="fixed" size="lg" :text="options.leg.to" />
</div>
<div v-if="options.leg" class="separator"></div>
<div v-if="options.subtype!='hitchhiking'" class="section track-stats">
<spotIcon :title="lang.get('stats.distance')" :icon="'distance'" width="fixed" size="lg" :text="options.distance+'km'" />
<spotIcon :title="lang.get('stats.duration')" :icon="'time'" width="fixed" size="lg" :text="options.duration" />
<spotIcon :title="lang.get('stats.elevation_gain')" :icon="'elev-gain'" width="fixed" size="lg" :text="options.elev_gain+'m'" />
<spotIcon :title="lang.get('stats.elevation_loss')" :icon="'elev-drop'" width="fixed" size="lg" :text="options.elev_drop+'m'" />
<spotIcon :title="lang.get('stats.distance')" icon="distance" width="fixed" size="lg" :text="options.distance+'km'" />
<spotIcon :title="lang.get('stats.duration')" icon="time" width="fixed" size="lg" :text="options.duration" />
<spotIcon :title="lang.get('stats.elevation_gain')" icon="elev-gain" width="fixed" size="lg" :text="options.elev_gain+'m'" />
<spotIcon :title="lang.get('stats.elevation_loss')" icon="elev-drop" width="fixed" size="lg" :text="options.elev_drop+'m'" />
</div>
</div>
<div v-else-if="options.type=='project'" class="section year">{{ activeTimeInterval }}</div>
src/components/projectSettings.vue
+1 -1
View File
@@ -142,7 +142,7 @@ export default {
<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
<div class="panel-control-elem">
<div v-for="(color, hikeType) in hikes.colors" class="track">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="line" :style="'background-color:'+color+';'"></span>
<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
</div>
</div>
src/components/spotIcon.vue
+1
View File
@@ -80,6 +80,7 @@ export default {
.spot-icon-text {
flex: 1 1 auto;
min-width: 0;
align-self: center;
}
}
src/scripts/icons.js
+1
View File
@@ -100,6 +100,7 @@ const ICONS = {
'elev-drop': faCircleDown,
'elev-gain': faCircleUp,
download: faFileArrowDown,
start: faCirclePlay,
/* Admin */
newsletter: faWifi,
src/scripts/projects.js
+1
View File
@@ -36,6 +36,7 @@ export default class Projects {
subtype: oTrackFeature.properties.type,
name: oTrackFeature.properties.name,
description: oTrackFeature.properties.description,
leg: oTrackFeature.properties.leg,
distance: Math.round(asStats.distance / 100) / 10,
elev_gain: Math.round(asStats.elevGain),
elev_drop: Math.abs(Math.round(asStats.elevDrop)),
src/styles/_common.scss
+14
View File
@@ -146,6 +146,20 @@ h2 {
margin: var.$block-spacing 0 var.$elem-spacing;
}
.track {
.line {
width: 1.5rem;
height: var(--track-width);
display: inline-block;
border-radius: var.$block-radius;
vertical-align: center;
}
.desc {
margin-left: var.$elem-spacing;
}
}
/* Feedback */
.feedback {
src/styles/_page.project.map.scss
+10 -5
View File
@@ -36,11 +36,11 @@ $thumbnail-max-size: 60px;
margin: 0;
font-weight: bold;
text-align: center;
span.hitchhiking {
font-size: calc(1em / 1.4 * 1.2);
font-weight: normal;
}
}
.hitchhiking .header h1 {
font-size: 1em;
line-height: 1em;
font-weight: normal;
}
.description {
@@ -71,6 +71,11 @@ $thumbnail-max-size: 60px;
gap: var.$elem-spacing var.$block-spacing;
}
.destination {
display: grid;
gap: var.$elem-spacing var.$block-spacing;
}
.medias-list {
line-height: 0;
src/styles/_page.project.panel.settings.scss
+1 -12
View File
@@ -192,21 +192,10 @@
#legend .panel-control-elem {
padding: var.$elem-spacing;
.track {
font-size: 0.8rem;
white-space: nowrap;
.line {
width: 2em;
display: inline-block;
border-radius: 2px;
vertical-align: center;
}
.desc {
margin-left: var.$elem-spacing;
}
}
}
}
src/styles/_page.project.scss
+1
View File
@@ -13,6 +13,7 @@
--track-main: #{color.$main-track};
--track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking};
--track-width: 4px;
--button-width: 36px;
overflow: hidden;