Harmonize track desc display

src/components/project.vue

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

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

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

@@ -80,6 +80,7 @@ export default {
 	.spot-icon-text {
 		flex: 1 1 auto;
 		min-width: 0;
+		align-self: center;
 	}
 }