Make control buttons bigger, add pitch

src/components/project.vue

@@ -1,6 +1,6 @@
 <script>
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl } from 'maplibre-gl';
+import { Map, Marker, LngLatBounds, LngLat, Popup, ScaleControl, NavigationControl } from 'maplibre-gl';
 import { createApp } from 'vue';
 
 import Lightbox from '@scripts/lightbox';
@@ -11,6 +11,28 @@ import ProjectPopup from '@components/projectPopup';
 import ProjectFeed from '@components/projectFeed';
 import ProjectSettings from '@components/projectSettings';
 
+class GroupedScaleControl {
+	constructor(options) {
+		this.scale = new ScaleControl(options);
+	}
+
+	onAdd(map) {
+		this.container = document.createElement('div');
+		this.container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+
+		const scaleElement = this.scale.onAdd(map);
+		scaleElement.classList.remove('maplibregl-ctrl');
+		this.container.appendChild(scaleElement);
+
+		return this.container;
+	}
+
+	onRemove() {
+		this.scale.onRemove();
+		this.container.remove();
+	}
+}
+
 export default {
 	components: {
 		SpotIcon,
@@ -222,7 +244,8 @@ export default {
 				},
 				attributionControl: false
 			});
-			this.map.addControl(new ScaleControl({unit: 'metric'}), 'bottom-right');
+			this.map.addControl(new GroupedScaleControl({unit: 'metric'}), 'bottom-right');
+			this.map.addControl(new NavigationControl({showZoom: false, visualizePitch: true}), 'bottom-right');
 		},
 		removeMap() {
 			this.removeMapContent();
@@ -453,21 +476,24 @@ export default {
 				
 				this.map.jumpTo({
 					center: new LngLat(oDefaultProject.longitude, oDefaultProject.latitude),
-					zoom: Math.log2(iWorldSize / this.map.transform.tileSize)
+					zoom: Math.log2(iWorldSize / this.map.transform.tileSize),
+					pitch: 0
 				});
 			}
 			//Direct link to marker
 			else if(oHashMarker) {
 				this.map.jumpTo({
 					center: new LngLat(oHashMarker.longitude, oHashMarker.latitude),
-					zoom: 13
+					zoom: 13,
+					pitch: 45
 				});
 			}
 			//Blog Mode: Fit to last marker
 			else if(this.project.mode == this.consts.modes.blog && oLastMarker) {
 				this.map.jumpTo({
 					center: new LngLat(oLastMarker.longitude, oLastMarker.latitude),
-					zoom: 15
+					zoom: 15,
+					pitch: 45
 				});
 			}
 			//Pre Mode, Histo Mode, Blog Mode without markers or missing direct link marker: Fit to track
@@ -482,7 +508,8 @@ export default {
 				this.map.fitBounds(oBounds, {
 					padding: this.mapPadding,
 					animate: false,
-					maxZoom: 15
+					maxZoom: 15,
+					pitch: 45
 				});
 			}
 		},

src/components/projectFeed.vue

@@ -215,8 +215,10 @@ export default {
 				<ProjectPost :options="{type: 'loading', headerless: true}" />
 			</div>
 		</Simplebar>
-		<div v-if="project" :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+		<div v-if="project" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
-			<SpotIcon :icon="isOpen?'next':'post'" />
+			<div class="panel-control-elem panel-control-icon">
+				<SpotIcon :icon="isOpen?'next':'post'" />
+			</div>
 		</div>
 	</div>
 </template>

src/components/projectSettings.vue

@@ -134,17 +134,21 @@ export default {
 				<span>&nbsp;{{ lang.get('credits.license') }}</span>
 			</div>
 		</div>
-		<div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
+		<div :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
-			<SpotIcon :icon="isOpen?'prev':'menu'" />
+			<div class="panel-control-elem panel-control-icon" @click="toggle">
+				<SpotIcon :icon="isOpen?'prev':'menu'" />
+			</div>
 		</div>
 		<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
-			<div v-for="(color, hikeType) in hikes.colors" class="track">
+			<div class="panel-control-elem">
-				<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
+				<div v-for="(color, hikeType) in hikes.colors" class="track">
-				<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
+					<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
+					<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
+				</div>
 			</div>
 		</div>
 		<div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
-			<span>{{ project.name }}</span>
+			<div class="panel-control-elem"><span>{{ project.name }}</span></div>
 		</div>
 	</div>
 </template>

src/styles/_color.scss

@@ -52,7 +52,6 @@ $download-hover:	#0078A8;
 //Map colors
 $space:				#000000;
 $horizon:			#FFFFFF;
-$legend:			$default;
 $main-track:		$flashy;
 $off-track:			#0000ff;
 $hitchhiking:		#ff7814;

src/styles/_common.scss

@@ -60,7 +60,9 @@
 /* Common objects */
 
 @mixin font() {
-	font-family:
+	font:
+		400
+		14px/normal
 		system-ui,
 		-apple-system,
 		"Segoe UI",
@@ -99,9 +101,8 @@ textarea:focus, input:focus {
 	outline: 1px solid color.$default-bg;
 }
 
-body, textarea, input, button, a.button {
+body, textarea, input, button, a.button, select {
 	@include font();
-	font-size: 14px;
 	margin: 0;
 	color: color.$default;
 }

src/styles/_mobile.scss

@@ -13,7 +13,7 @@
 	.projects {
 		--button-width: 51px;
 
-		.panel-control {
+		.panel-control-elem {
 			font-size: 2em;
 		}
 
@@ -23,15 +23,11 @@
 		}
 
 		#settings #title {
-			left: calc(100% + var(--button-width) + 2rem);
+			left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
-			max-width: calc(100vw - 1rem - (var(--button-width) + 2rem) * 2);
+			max-width: calc(100vw - (var(--button-width) + 2 * var.$block-spacing) * 2);
 			text-align: center;
 			width: 100%;
 			transition: none;
-
-			span {
-				font-size: 0.8em;
-			}
 		}
 
 		#settings #settings-panel .settings-header {

src/styles/_page.project.map.scss

@@ -12,6 +12,8 @@ $thumbnail-max-size: 60px;
 	bottom: 0;
 	width: 100%;
 	@include common.font();
+	font-size: 12px;
+	line-height: 18px;
 
 	.maplibregl-marker-covered {
 		pointer-events: none;
@@ -142,12 +144,39 @@ $thumbnail-max-size: 60px;
 		margin: var.$block-spacing;
 		transition: transform 0.5s;
 		@extend .panel-control;
-
+		
-		.maplibregl-ctrl-scale {
+		.maplibregl-ctrl {
+			@extend .panel-control-elem;
 			margin: 0;
-			background-color: transparent;
+			padding: var.$elem-spacing;
-			border-color: color.$default;
+
-			color: color.$default;
+			& + .maplibregl-ctrl {
+				margin-top: var.$block-spacing;
+			}
+
+			.maplibregl-ctrl-scale {
+				background-color: transparent;
+				border-color: color.$default;
+				color: color.$default;
+				padding: 0;
+				text-align: center;
+			}
+
+			&:has(.maplibregl-ctrl-compass) {
+				@extend .panel-control-icon;
+				overflow: hidden;
+			}
+
+			.maplibregl-ctrl-compass {
+				width: 100%;
+				height: 100%;
+				
+				.maplibregl-ctrl-icon {
+					background-color: color.$default-bg-light;
+					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23454545' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23dedede' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
+					border-radius: var.$block-radius;
+				}
+			}
 		}
 	}
-}
+}

src/styles/_page.project.panel.scss

@@ -125,12 +125,6 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 
 	.panel-control {
 		position: absolute;
-		background-color: color.$default-bg;
-		padding: var.$elem-spacing;
-		border-radius: var.$block-radius;
-		box-shadow: var.$map-shadow;
-		font-size: 12px;
-		line-height: 1.5;
 		
 		&.panel-control-top {
 			top: var.$block-spacing;
@@ -140,30 +134,41 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
 			bottom: var.$block-spacing;
 		}
 
-		&.panel-control-icon {
+		.panel-control-elem {
-			cursor: pointer;
+			background-color: color.$default-bg;
+			border-radius: var.$block-radius;
+			box-shadow: var.$map-shadow;
 
-			.spot-icon {
+			&.panel-control-icon {
-				color: color.$default;
+				cursor: pointer;
-			}
+				width: var(--button-width);
-
+				height: var(--button-width);
-			&:active {
+				display: flex;
-				background-color: color.$default-inv-bg;
+				align-items: center;
+				justify-content: center;
 
 				.spot-icon {
-					color: color.$default-inv;
+					color: color.$default;
 				}
-			}
 
-			@media (hover: hover) and (pointer: fine) {
+				&:active {
-				&:hover {
 					background-color: color.$default-inv-bg;
 
 					.spot-icon {
 						color: color.$default-inv;
 					}
 				}
+
+				@media (hover: hover) and (pointer: fine) {
+					&:hover {
+						background-color: color.$default-inv-bg;
+
+						.spot-icon {
+							color: color.$default-inv;
+						}
+					}
+				}
 			}
 		}
-	}
+	}	
 }

src/styles/_page.project.panel.settings.scss

@@ -169,29 +169,43 @@
 		left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
 		max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
 		transition: max-width 0.5s;
-		@include common.no-text-overflow();
 
-		span {
+		.panel-control-elem {
+			height: var(--button-width);
+			max-width: 100%;
+			min-width: 0;
+			padding: 0 var.$elem-spacing;
 			font-size: 1.3em;
-			line-height: calc(var.$block-spacing / 1.3);
+			line-height: normal;
-			vertical-align: center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			span {
+				@include common.no-text-overflow();
+				display: block;
+				max-width: 100%;
+				min-width: 0;
+			}
 		}
 	}
 
-	#legend {
+	#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: middle;
+				vertical-align: center;
 			}
 
 			.desc {
-				font-size: 1em;
+				margin-left: var.$elem-spacing;
-				margin-left: 0.5em;
-				color: color.$legend;
 			}
 		}
 	}

src/styles/_page.project.scss

@@ -13,7 +13,7 @@
 	--track-main: #{color.$main-track};
 	--track-off-track: #{color.$off-track};
 	--track-hitchhiking: #{color.$hitchhiking};
-	--button-width: 31px;
+	--button-width: 36px;
 
 	overflow: hidden;
 	position: absolute;