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

Make control buttons bigger, add pitch
All checks were successful
Deploy Spot / deploy (push) Successful in 38s
Details

Browse Source
This commit is contained in:
Franzz
2026-06-08 23:15:17 +02:00
parent c738fe8d50
commit 7b2962be15
10 changed files with 137 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/project.vue
View File

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

6
src/components/projectFeed.vue
View File

@@ -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">
<SpotIcon :icon="isOpen?'next':'post'" />
<div v-if="project" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<div class="panel-control-elem panel-control-icon">
<SpotIcon :icon="isOpen?'next':'post'" />
</div>
</div>
</div>
</template>

16
src/components/projectSettings.vue
View File

@@ -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">
<SpotIcon :icon="isOpen?'prev':'menu'" />
<div :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
<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">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
<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="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>

1
src/styles/_color.scss
View File

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

7
src/styles/_common.scss
View File

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

10
src/styles/_mobile.scss
View File

@@ -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);
max-width: calc(100vw - 1rem - (var(--button-width) + 2rem) * 2);
left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
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 {

41
src/styles/_page.project.map.scss
View File

@@ -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;
border-color: color.$default;
color: color.$default;
padding: var.$elem-spacing;
& + .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;
}
}
}
}
}
}

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

@@ -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 {
cursor: pointer;
.panel-control-elem {
background-color: color.$default-bg;
border-radius: var.$block-radius;
box-shadow: var.$map-shadow;
.spot-icon {
color: color.$default;
}
&:active {
background-color: color.$default-inv-bg;
&.panel-control-icon {
cursor: pointer;
width: var(--button-width);
height: var(--button-width);
display: flex;
align-items: center;
justify-content: center;
.spot-icon {
color: color.$default-inv;
color: color.$default;
}
}
@media (hover: hover) and (pointer: fine) {
&:hover {
&:active {
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;
}
}
}
}
}
}
}
}

32
src/styles/_page.project.panel.settings.scss
View File

@@ -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);
vertical-align: center;
line-height: normal;
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: 0.5em;
color: color.$legend;
margin-left: var.$elem-spacing;
}
}
}

2
src/styles/_page.project.scss
View File

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