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

Rename Spot to Livetrail internally
Deploy Livetrail / deploy (push) Successful in 21s
Details

Browse Source
This commit is contained in:
franzz
2026-08-18 15:55:55 +02:00
parent ced5e87542
commit 2aac7ad5c4
55 changed files with 211 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+3 -3
View File
@@ -1,11 +1,11 @@
<script>
import { defineAsyncComponent } from 'vue';
import Project from '@components/project';
import Project from '@components/Project';
const aoRoutes = {
'project': Project, //Merge app.js and project.js calls to avoid extra http request on inital page
'admin': defineAsyncComponent(() => import('@components/admin')),
'upload': defineAsyncComponent(() => import('@components/upload'))
'admin': defineAsyncComponent(() => import('@components/Admin')),
'upload': defineAsyncComponent(() => import('@components/Upload'))
};
export default {
src/app.js
+1 -1
View File
@@ -10,7 +10,7 @@ import { createApp, reactive } from 'vue';
import App from './App.vue';
//Style
import '@styles/spot.scss';
import '@styles/livetrail.scss';
//App Configuration from PHP
const appConfig = JSON.parse(document.getElementById('app-config').textContent);
src/components/admin.vue → src/components/Admin.vue
+11 -11
View File
@@ -1,12 +1,12 @@
<script>
import SpotIcon from '@components/spotIcon';
import SpotButton from '@components/spotButton';
import AdminInput from '@components/adminInput';
import AppIcon from '@components/AppIcon';
import AppButton from '@components/AppButton';
import AdminInput from '@components/AdminInput';
export default {
components: {
SpotIcon,
SpotButton,
AppIcon,
AppButton,
AdminInput
},
inject: ['api', 'lang', 'getPrevAnchor'],
@@ -115,7 +115,7 @@ export default {
</script>
<template>
<div id="admin">
<a name="back" class="button" :href="getPrevAnchor()"><SpotIcon :icon="'back'" :text="l('action.back')" /></a>
<a name="back" class="button" :href="getPrevAnchor()"><AppIcon :icon="'back'" :text="l('action.back')" /></a>
<h1>{{ l('project.plural') }}</h1>
<div>
<table>
@@ -138,11 +138,11 @@ export default {
<td><AdminInput :type="'text'" :name="'codename'" :elem="project" /></td>
<td><AdminInput :type="'date'" :name="'active_from'" :elem="project" /></td>
<td><AdminInput :type="'date'" :name="'active_to'" :elem="project" /></td>
<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(project)" /></td>
<td><AppButton :icon="'close'" iconSize="lg" @click="deleteElem(project)" /></td>
</tr>
</tbody>
</table>
<SpotButton :classes="'new'" :text="l('project.new')" :icon="'new'" @click="createElem('project')" />
<AppButton :classes="'new'" :text="l('project.new')" :icon="'new'" @click="createElem('project')" />
</div>
<h1>{{ l('feed.plural') }}</h1>
<div>
@@ -168,11 +168,11 @@ export default {
<td>{{ feed.name }}</td>
<td>{{ feed.status }}</td>
<td>{{ feed.last_update }}</td>
<td><SpotButton :icon="'close'" iconSize="lg" @click="deleteElem(feed)" /></td>
<td><AppButton :icon="'close'" iconSize="lg" @click="deleteElem(feed)" /></td>
</tr>
</tbody>
</table>
<SpotButton :classes="'new'" :text="l('feed.new')" :icon="'new'" @click="createElem('feed')" />
<AppButton :classes="'new'" :text="l('feed.new')" :icon="'new'" @click="createElem('feed')" />
</div>
<h1>{{ l('spot.plural') }}</h1>
<div>
@@ -222,7 +222,7 @@ export default {
</div>
<h1>{{ l('admin.toolbox') }}</h1>
<div id="toolbox">
<SpotButton :classes="'refresh'" :text="l('project.update_messages')" :icon="'refresh'" @click="updateProject" />
<AppButton :classes="'refresh'" :text="l('project.update_messages')" :icon="'refresh'" @click="updateProject" />
</div>
<div id="feedback" class="feedback">
<p v-for="feedback in feedbacks" :class="feedback.type">{{ feedback.msg }}</p>
src/components/adminInput.vue → src/components/AdminInput.vue
View File
src/components/spotButton.vue → src/components/AppButton.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<script>
import SpotIcon from '@components/spotIcon';
import AppIcon from '@components/AppIcon';
export default {
components: {
SpotIcon
AppIcon
},
props: {
classes: String,
@@ -15,5 +15,5 @@ export default {
}
</script>
<template>
<button :class="classes"><SpotIcon :icon="icon" :text="text" :classes="iconClasses" :size="iconSize" /></button>
<button :class="classes"><AppIcon :icon="icon" :text="text" :classes="iconClasses" :size="iconSize" /></button>
</template>
src/components/spotIcon.vue → src/components/AppIcon.vue
+9 -9
View File
@@ -20,7 +20,7 @@ export default {
computed: {
iconClassNames() {
return [
'spot-icon',
'app-icon',
this.icon,
...(this.classes || '').split(/\s+/),
this.margin?'margin-'+this.margin:null
@@ -49,42 +49,42 @@ export default {
</script>
<template>
<span :title="title" :class="hasText?'spot-icon-with-text':null">
<span class="spot-icon-symbol">
<span :title="title" :class="hasText?'app-icon-with-text':null">
<span class="app-icon-symbol">
<FontAwesomeIcon
:icon="iconDefinition"
:class="['spot-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
:class="['app-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
:fixed-width="resolvedFixedWidth"
:width-auto="resolvedAutoWidth"
:size="resolvedSize"
:transform="resolvedTransform"
/>
</span>
<span v-if="hasText" :class="['spot-icon-text', textClasses]">{{ text }}</span>
<span v-if="hasText" :class="['app-icon-text', textClasses]">{{ text }}</span>
</span>
</template>
<style lang="scss">
@use "@styles/var";
.spot-icon-with-text {
.app-icon-with-text {
display: inline-flex;
align-items: flex-start;
gap: var.$text-spacing;
.spot-icon-symbol {
.app-icon-symbol {
flex: 0 0 auto;
align-self: center;
}
.spot-icon-text {
.app-icon-text {
flex: 1 1 auto;
min-width: 0;
align-self: center;
}
}
.spot-icon {
.app-icon {
&.margin-right {
margin-right: var.$text-spacing;
}
src/components/spotIconStack.vue → src/components/AppIconStack.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<script>
import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import spotIcon from '@components/spotIcon';
import appIcon from '@components/AppIcon';
export default {
components: {
FontAwesomeLayers,
spotIcon
appIcon
},
props: {
mainClasses: String,
@@ -18,7 +18,7 @@ export default {
},
computed: {
mainClass() {
return 'spot-icon-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
return 'app-icon-stack clickable'+(this.mainClasses?' '+this.mainClasses:'');
},
iconMainClass() {
return this.mergeClasses('main clickable', this.iconMainClasses);
@@ -44,8 +44,8 @@ export default {
<template>
<span :class="mainClass">
<FontAwesomeLayers>
<spotIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
<spotIcon v-if="iconSub" :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
<appIcon :icon="iconMain" :classes="iconMainClass" :transform="iconMainTransform" />
<appIcon v-if="iconSub" :icon="iconSub" :classes="iconSubClass" :transform="iconSubTransformValue" />
</FontAwesomeLayers>
</span>
</template>
src/components/project.vue → src/components/Project.vue
+8 -8
View File
@@ -7,11 +7,11 @@ import { createApp } from 'vue';
import Lightbox from '@scripts/lightbox';
import SpotIcon from '@components/spotIcon';
import SpotIconStack from '@components/spotIconStack';
import ProjectPopup from '@components/projectPopup';
import ProjectFeed from '@components/projectFeed';
import ProjectSettings from '@components/projectSettings';
import AppIcon from '@components/AppIcon';
import AppIconStack from '@components/AppIconStack';
import ProjectPopup from '@components/ProjectPopup';
import ProjectFeed from '@components/ProjectFeed';
import ProjectSettings from '@components/ProjectSettings';
setWorkerUrl(maplibreWorkerUrl);
@@ -39,7 +39,7 @@ class GroupedScaleControl {
export default {
components: {
SpotIcon,
AppIcon,
ProjectFeed,
ProjectSettings
},
@@ -412,7 +412,7 @@ export default {
},
addMarker(oMarker) {
const $Marker = document.createElement('div');
oMarker.app = createApp(SpotIconStack, this.markerProps[oMarker.subtype]);
oMarker.app = createApp(AppIconStack, this.markerProps[oMarker.subtype]);
oMarker.app.mount($Marker);
oMarker.marker = new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: oMarker.opacityWhenCovered ?? 0})
@@ -683,7 +683,7 @@ export default {
<div id="space"></div>
<div id="submap">
<div class="loader">
<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
<AppIcon :icon="'map'" :classes="'flicker'" width="fixed" />
</div>
</div>
<div id="map"></div>
src/components/projectAccount.vue → src/components/ProjectAccount.vue
+6 -6
View File
@@ -1,11 +1,11 @@
<script>
import SpotButton from '@components/spotButton';
import SpotIcon from '@components/spotIcon';
import AppButton from '@components/AppButton';
import AppIcon from '@components/AppIcon';
export default {
components: {
SpotButton,
SpotIcon
AppButton,
AppIcon
},
data() {
return {
@@ -99,7 +99,7 @@ export default {
<input type="email" name="email" id="email" :placeholder="lang.get('account.email_placeholder')" v-model="user.email" :disabled="loginLoading || loggedIn || passwordMode" @keyup.enter="manageLogin" />
<input v-if="passwordMode" type="password" name="password" id="password" :placeholder="lang.get('account.password')" v-model="password" :disabled="loginLoading" :autocomplete="settingPassword?'new-password':'current-password'" @keyup.enter="manageLogin" />
<input v-if="settingPassword" type="password" name="password_confirmation" id="password-confirmation" :placeholder="lang.get('account.confirm_password')" v-model="passwordConfirmation" :disabled="loginLoading" autocomplete="new-password" @keyup.enter="manageLogin" />
<SpotButton :classes="buttonClasses" :title="lang.get('account.'+action)" :icon="action" @click="manageLogin" />
<AppButton :classes="buttonClasses" :title="lang.get('account.'+action)" :icon="action" @click="manageLogin" />
</div>
<div class="sub-section newsletter radio" v-if="loggedIn">
<input type="checkbox" id="account-newsletter" v-model="user.subscribed" :true-value="1" :false-value="0" :disabled="newsletterLoading" @change="manageSubscription" />
@@ -107,7 +107,7 @@ export default {
</div>
<div v-if="feedbacks.length" class="sub-section feedback">
<p v-for="feedback in feedbacks" :key="feedback.type + '-' + feedback.msg" :class="feedback.type">
<SpotIcon :icon="feedback.type" :text="feedback.msg" />
<AppIcon :icon="feedback.type" :text="feedback.msg" />
</p>
</div>
</template>
src/components/projectFeed.vue → src/components/ProjectFeed.vue
+4 -4
View File
@@ -1,13 +1,13 @@
<script>
import Simplebar from 'simplebar-vue';
import SpotIcon from '@components/spotIcon';
import ProjectPost from '@components/projectPost';
import AppIcon from '@components/AppIcon';
import ProjectPost from '@components/ProjectPost';
import { faHistory, faThumbTackSlash } from '@fortawesome/free-solid-svg-icons';
export default {
components: {
SpotIcon,
AppIcon,
ProjectPost,
Simplebar
},
@@ -230,7 +230,7 @@ export default {
</Simplebar>
<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'" />
<AppIcon :icon="isOpen?'next':'post'" />
</div>
</div>
</div>
src/components/projectMapLink.vue → src/components/ProjectMapLink.vue
View File
src/components/projectMediaLink.vue → src/components/ProjectMediaLink.vue
+8 -8
View File
@@ -1,11 +1,11 @@
<script>
import spotIcon from '@components/spotIcon';
import projectRelTime from '@components/projectRelTime';
import projectMapLink from '@components/projectMapLink';
import appIcon from '@components/AppIcon';
import projectRelTime from '@components/ProjectRelTime';
import projectMapLink from '@components/ProjectMapLink';
export default {
components: {
spotIcon,
appIcon,
projectRelTime,
projectMapLink
},
@@ -54,20 +54,20 @@ export default {
:title="lang.get((options.subtype == 'video')?'media.click_watch':'media.click_zoom')"
class="clickable"
/>
<span class="drill-icon"><spotIcon :icon="'drill-'+options.subtype" /></span>
<span class="drill-icon"><appIcon :icon="'drill-'+options.subtype" /></span>
<div v-if="options.comment && type == 'post'" class="comment">
<p>
<spotIcon icon="post" :text="options.comment" size="lg" />
<appIcon icon="post" :text="options.comment" size="lg" />
</p>
<p v-if="!isMobile() && options.latitude && options.longitude">
<spotIcon icon="coords" margin="right" size="lg" />
<appIcon icon="coords" margin="right" size="lg" />
<projectMapLink :options="options" />
</p>
</div>
</a>
<div style="display:none">
<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
<spotIcon icon="post" width="fixed" size="lg" text-classes="comment-text" :text="options.comment" />
<appIcon icon="post" width="fixed" size="lg" text-classes="comment-text" :text="options.comment" />
</span>
<span ref="postedon" class="lb-caption-line">
<projectRelTime
src/components/projectPopup.vue → src/components/ProjectPopup.vue
+17 -17
View File
@@ -1,12 +1,12 @@
<script>
import projectMapLink from '@components/projectMapLink';
import spotIcon from '@components/spotIcon';
import projectRelTime from '@components/projectRelTime';
import projectMediaLink from '@components/projectMediaLink';
import projectMapLink from '@components/ProjectMapLink';
import appIcon from '@components/AppIcon';
import projectRelTime from '@components/ProjectRelTime';
import projectMediaLink from '@components/ProjectMediaLink';
export default {
components: {
spotIcon,
appIcon,
projectMapLink,
projectMediaLink,
projectRelTime
@@ -55,7 +55,7 @@ export default {
<div :class="options.type+' '+options.subtype">
<div class="header" v-if="options.type == 'track' || options.type == 'project'">
<h1>
<spotIcon v-if="options.type == 'project'" :icon="options.subtype" :classes="'track-'+options.subtype" size="lg" :text="this.options.name" width="auto" />
<appIcon 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>
@@ -66,37 +66,37 @@ export default {
</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" />
<appIcon :title="lang.get('stats.from')" icon="start" width="fixed" size="lg" :text="options.leg.from" />
<appIcon :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'" />
<appIcon :title="lang.get('stats.distance')" icon="distance" width="fixed" size="lg" :text="options.distance+'km'" />
<appIcon :title="lang.get('stats.duration')" icon="time" width="fixed" size="lg" :text="options.duration" />
<appIcon :title="lang.get('stats.elevation_gain')" icon="elev-gain" width="fixed" size="lg" :text="options.elev_gain+'m'" />
<appIcon :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>
<div v-else>
<div class="section" v-if="options.comment">
<spotIcon icon="post" width="fixed" size="lg" :text="options.comment" />
<appIcon icon="post" width="fixed" size="lg" :text="options.comment" />
</div>
<div class="section time">
<projectRelTime :icon="timeinfo.icon" :localTime="localTime" :siteTime="timeinfo.site_time" :offset="timeinfo.offset" />
</div>
<div v-if="!isMobile()" class="section coordinates">
<spotIcon icon="coords" width="fixed" size="lg" margin="right" />
<appIcon icon="coords" width="fixed" size="lg" margin="right" />
<projectMapLink :options="options" />
</div>
<div v-if="options.altitude" class="section altitude">
<spotIcon icon="altitude" width="fixed" size="lg" :text="options.altitude+'m'" />
<appIcon icon="altitude" width="fixed" size="lg" :text="options.altitude+'m'" />
</div>
<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" width="fixed" size="lg" :text="options.weather_temp+'°C'" />
<appIcon :icon="options.weather_icon" width="fixed" size="lg" :text="options.weather_temp+'°C'" />
</div>
<div v-if="options.medias" class="section medias">
<spotIcon v-if="options.type=='message'" icon="media" width="fixed" size="lg" :text="lang.get('media.nearby')" />
<appIcon v-if="options.type=='message'" icon="media" width="fixed" size="lg" :text="lang.get('media.nearby')" />
<div class="medias-list">
<projectMediaLink v-for="media in options?.medias" :options="media" :type="'marker'" />
</div>
src/components/projectPost.vue → src/components/ProjectPost.vue
+17 -17
View File
@@ -1,10 +1,10 @@
<script>
import spotIcon from '@components/spotIcon';
import spotIconStack from '@components/spotIconStack';
import spotButton from '@components/spotButton';
import projectMediaLink from '@components/projectMediaLink';
import projectMapLink from '@components/projectMapLink';
import projectRelTime from '@components/projectRelTime';
import appIcon from '@components/AppIcon';
import appIconStack from '@components/AppIconStack';
import appButton from '@components/AppButton';
import projectMediaLink from '@components/ProjectMediaLink';
import projectMapLink from '@components/ProjectMapLink';
import projectRelTime from '@components/ProjectRelTime';
import { LngLat } from 'maplibre-gl';
import { copyTextToClipboard } from '@scripts/common';
@@ -12,9 +12,9 @@
export default {
components: {
spotIcon,
spotIconStack,
spotButton,
appIcon,
appIconStack,
appButton,
projectMediaLink,
projectMapLink,
projectRelTime
@@ -175,9 +175,9 @@
<div :class="postClass" :id="postId">
<div class="header" v-if="!options.headerless">
<div class="index">
<spotIcon :icon="subType" :text="displayedId" width="auto" />
<appIcon :icon="subType" :text="displayedId" width="auto" />
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="anchorLink" :title="anchorTitle">
<spotIcon :icon="anchorIcon" />
<appIcon :icon="anchorIcon" />
</a>
</div>
<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?lang.get('time.local', absTimeLocal):''">
@@ -191,13 +191,13 @@
<div v-if="options.type == 'message'" class="body-box">
<div class="drill" @click.prevent="panMapToMarker" @pointerenter="onMouseEnter" @pointerleave="onMouseLeave">
<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
<appIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
</span>
<img class="staticmap clickable" :title="lang.get('media.click_zoom')" :src="options.static_img_url" />
<spotIconStack mainClasses="message drill-icon" :iconMain="drillMainIcon" :iconSub="drillSubIcon" icon-sub-transform="rotate-270" />
<appIconStack mainClasses="message drill-icon" :iconMain="drillMainIcon" :iconSub="drillSubIcon" icon-sub-transform="rotate-270" />
<div class="comment" @click.stop>
<p v-if="!isMobile()">
<spotIcon :icon="'coords'" margin="right" size="lg" />
<appIcon :icon="'coords'" margin="right" size="lg" />
<projectMapLink :options="options" />
</p>
<p>
@@ -221,15 +221,15 @@
<textarea ref="post" name="post" :placeholder="lang.get('post.message')" class="autoExpand" rows="1" v-model="postMessage"></textarea>
<div class="poster-actions">
<input type="text" name="name" :placeholder="lang.get('post.name')" v-model="user.name" />
<spotButton name="submit" :aria-label="lang.get('action.send')" :title="lang.get('action.send')" :icon="'send'" @click="send()" :iconClasses="sending?'flicker':''" />
<appButton name="submit" :aria-label="lang.get('action.send')" :title="lang.get('action.send')" :icon="'send'" @click="send()" :iconClasses="sending?'flicker':''" />
</div>
</div>
<div v-else-if="options.type == 'archived'">
<p><spotIcon :icon="'success'" /></p>
<p><appIcon :icon="'success'" /></p>
<p>{{ lang.get('project.modes.histo') }}</p>
</div>
<div v-else-if="options.type == 'loading'">
<p class="flicker"><spotIcon :icon="'post'" /></p>
<p class="flicker"><appIcon :icon="'post'" /></p>
</div>
</div>
</div>
src/components/projectRelTime.vue → src/components/ProjectRelTime.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<script>
import spotIcon from '@components/spotIcon';
import appIcon from '@components/AppIcon';
export default {
components: {
spotIcon
appIcon
},
props: {
localTime: String,
@@ -31,6 +31,6 @@ export default {
</script>
<template>
<spotIcon v-if="icon" :icon="icon" :title="title" :text="localTime" width="fixed" size="lg" />
<appIcon v-if="icon" :icon="icon" :title="title" :text="localTime" width="fixed" size="lg" />
<span v-else :class="classes" :title="title">{{ localTime }}</span>
</template>
src/components/projectSettings.vue → src/components/ProjectSettings.vue
+14 -14
View File
@@ -1,14 +1,14 @@
<script>
import Simplebar from 'simplebar-vue';
import SpotIcon from '@components/spotIcon';
import ProjectAccount from '@components/projectAccount';
import AppIcon from '@components/AppIcon';
import ProjectAccount from '@components/ProjectAccount';
import logoIconUrl from '@images/icons/favicon.svg';
import logoTitleUrl from '@images/logo_title.svg';
export default {
components: {
SpotIcon,
AppIcon,
ProjectAccount,
Simplebar
},
@@ -93,27 +93,27 @@ export default {
<img :src="logoIconUrl" class="logo-icon clickable" :title="lang.get('project.overview')" @click="hash.items = []" />
<img :src="logoTitleUrl" class="logo-title" :alt="consts.title" />
<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0" :title="lastUpdate.formatted_time">
<SpotIcon icon="find-me-spot" :text="lang.get('feed.last_update')+' '+lastUpdate.relative_time" />
<AppIcon icon="find-me-spot" :text="lang.get('feed.last_update')+' '+lastUpdate.relative_time" />
</div>
</div>
<div class="settings-sections">
<Simplebar id="settings-sections-scrollbox">
<div class="settings-section settings-box">
<h1><SpotIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
<h1><AppIcon :icon="'project'" width="fixed" :text="lang.get('project.hikes')" /></h1>
<div class="settings-section-body">
<div class="radio" v-for="project in projects" :key="'project-'+project.id">
<input type="radio" :id="'project-'+project.id" :value="project.codename" v-model="projectCodeNameModel" :disabled="mapInitializing" />
<label :for="'project-'+project.id">
<span>{{ project.name }}</span>
<a v-if="!isMobile() && project.gpxfilepath" class="download" :href="project.gpxfilepath" :download="project.codename + '.gpx'" :title="lang.get('track.download')" @click.stop="()=>{}">
<SpotIcon :icon="'download'" margin="left" />
<AppIcon :icon="'download'" margin="left" />
</a>
</label>
</div>
</div>
</div>
<div class="settings-section settings-box">
<h1><SpotIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
<h1><AppIcon :icon="'map'" width="fixed" :text="lang.get('map.title')" /></h1>
<div class="settings-section-body">
<div class="radio" v-for="bm in baseMaps" :key="'map-'+bm.id_map">
<input type="radio" :id="'map-'+bm.id_map" :value="bm.codename" v-model="baseMapModel" :disabled="mapInitializing" />
@@ -126,30 +126,30 @@ export default {
</div>
</div>
<div class="settings-section settings-box account">
<h1><SpotIcon :icon="'account'" width="fixed" :text="lang.get('account.title')" /></h1>
<h1><AppIcon :icon="'account'" width="fixed" :text="lang.get('account.title')" /></h1>
<div class="settings-section-body">
<ProjectAccount />
</div>
</div>
<div class="settings-section settings-box admin" v-if="user.hasClearance(consts.clearances.admin)">
<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
<h1><AppIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>
<div class="settings-section-body admin-actions">
<a class="button" href="#admin"><SpotIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
<a class="button" href="#upload"><SpotIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>
<a class="button" href="#admin"><AppIcon :icon="'config'" :text="lang.get('admin.config')" /></a>
<a class="button" href="#upload"><AppIcon :icon="'upload'" :text="lang.get('admin.upload')" /></a>
</div>
</div>
</Simplebar>
</div>
<div v-if="!isMobile()" class="settings-footer">
<a href="https://git.lutran.fr/franzz/spot" :title="lang.get('credits.git')" target="_blank" rel="noopener">
<SpotIcon :icon="'credits'" width="auto" :text="lang.get('credits.project', consts.title)" />
<a href="https://git.lutran.fr/franzz/livetrail" :title="lang.get('credits.git')" target="_blank" rel="noopener">
<AppIcon :icon="'credits'" width="auto" :text="lang.get('credits.project', consts.title)" />
</a>
<span>&nbsp;{{ lang.get('credits.license') }}</span>
</div>
</div>
<div :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
<div class="panel-control-elem panel-control-icon" @click="toggle">
<SpotIcon :icon="isOpen?'prev':'menu'" />
<AppIcon :icon="isOpen?'prev':'menu'" />
</div>
</div>
<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
src/components/upload.vue → src/components/Upload.vue
+6 -6
View File
@@ -4,12 +4,12 @@ import Uppy from '@uppy/core';
import XHRUpload from '@uppy/xhr-upload';
import '@uppy/core/css/style.min.css';
import SpotIcon from '@components/spotIcon';
import SpotButton from '@components/spotButton';
import AppIcon from '@components/AppIcon';
import AppButton from '@components/AppButton';
export default {
name: 'upload',
components: { SpotButton, SpotIcon },
components: { AppButton, AppIcon },
inject: ['api', 'lang', 'projects', 'consts', 'user', 'getPrevAnchor'],
data() {
return {
@@ -120,7 +120,7 @@ export default {
<template>
<div id="upload">
<div class="section header">
<a name="back" class="button" :href="getPrevAnchor()"><SpotIcon :icon="'back'" :text="lang.get('action.back')" /></a>
<a name="back" class="button" :href="getPrevAnchor()"><AppIcon :icon="'back'" :text="lang.get('action.back')" /></a>
<h1>{{ this.project.name }}</h1>
</div>
<div class="section" v-if="project.editable">
@@ -136,12 +136,12 @@ export default {
<div class="form">
<input class="content" name="content" type="text" v-model="file.content" />
<input class="id" name="id" type="hidden" :value="file.id" />
<SpotButton :classes="'save'" :icon="'save'" :text="lang.get('action.save')" @click="addComment(file)" />
<AppButton :classes="'save'" :icon="'save'" :text="lang.get('action.save')" @click="addComment(file)" />
</div>
</div>
<div class="section location" v-if="project.editable">
<h2>{{ lang.get('upload.position.title') }}</h2>
<SpotButton :icon="'marker'" :text="lang.get('upload.position.new')" @click="addPosition()" />
<AppButton :icon="'marker'" :text="lang.get('upload.position.new')" @click="addPosition()" />
</div>
<div class="section logs" v-if="logs.length > 0">
<p class="log" v-for="log in logs">{{ log }}.</p>
src/images/source/logo_icon_inkscape.svg
+1 -1
View File
@@ -43,7 +43,7 @@
transform="translate(-518.42466,-161.70322)">
<g
id="g1"
inkscape:label="Spot"
inkscape:label="Livetrail"
transform="translate(9.9387949)">
<path
d="m 512,258 c 0,-50.81 41.414,-92 92.5,-92 51.086,0 92.5,41.19 92.5,92 0,50.81 -41.414,92 -92.5,92 -51.086,0 -92.5,-41.19 -92.5,-92 z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

src/images/source/logo_icon_waves_inkscape.svg
+1 -1
View File
@@ -68,7 +68,7 @@
</g>
<g
id="g1"
inkscape:label="Spot"
inkscape:label="Livetrail"
transform="translate(9.9387949)">
<path
d="m 512,258 c 0,-50.81 41.414,-92 92.5,-92 51.086,0 92.5,41.19 92.5,92 0,50.81 -41.414,92 -92.5,92 -51.086,0 -92.5,-41.19 -92.5,-92 z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

src/images/source/logo_title_waves_inkscape.svg
+1 -1
View File
@@ -129,7 +129,7 @@
</g>
<g
id="g1"
inkscape:label="Spot"
inkscape:label="Livetrail"
transform="translate(9.9387949)">
<path
d="m 512,258 c 0,-50.81 41.414,-92 92.5,-92 51.086,0 92.5,41.19 92.5,92 0,50.81 -41.414,92 -92.5,92 -51.086,0 -92.5,-41.19 -92.5,-92 z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

src/images/source/ogp_inskape.svg
+1 -1
View File
@@ -111,7 +111,7 @@
</g>
<g
id="g1"
inkscape:label="Spot"
inkscape:label="Livetrail"
transform="matrix(1.9469599,0,0,1.9469599,-486.68371,-164.30074)">
<path
d="m 512,258 c 0,-50.81 41.414,-92 92.5,-92 51.086,0 92.5,41.19 92.5,92 0,50.81 -41.414,92 -92.5,92 -51.086,0 -92.5,-41.19 -92.5,-92 z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

src/scripts/lightbox.js
+1 -1
View File
@@ -64,7 +64,7 @@ export default class Lightbox {
}
renderIcon(name, sClass=null) {
return icon(getIcon(name), {classes: ['spot-icon', name, sClass]}).html;
return icon(getIcon(name), {classes: ['app-icon', name, sClass]}).html;
}
build() {
src/styles/_lightbox.scss
+1 -1
View File
@@ -169,7 +169,7 @@ body.lb-disable-scrolling {
color: color.$over-img-hover;
}
.spot-icon {
.app-icon {
vertical-align: inherit;
top: 50%;
transform: translate(-50%, -50%);
src/styles/_page.project.map.scss
+2 -2
View File
@@ -20,13 +20,13 @@ $thumbnail-max-size: 60px;
}
.maplibregl-marker {
.spot-icon-stack:is(.media, .message, .project) {
.app-icon-stack:is(.media, .message, .project) {
display: inline-block;
transform-origin: center bottom;
transition: transform var.$trans-quick;
}
&:hover .spot-icon-stack:is(.media, .message, .project) {
&:hover .app-icon-stack:is(.media, .message, .project) {
transform: scale(var.$zoom-scale);
}
}
src/styles/_page.project.panel.feed.scss
+3 -3
View File
@@ -134,7 +134,7 @@
p {
margin: 0;
.spot-icon {
.app-icon {
display: inline-block;
font-size: 2em;
margin: var.$elem-spacing 0;
@@ -170,10 +170,10 @@
top: var.$block-spacing;
right: var.$block-spacing;
.spot-icon-with-text {
.app-icon-with-text {
gap: 0;
.spot-icon {
.app-icon {
font-size: 1.3em;
vertical-align: middle;
height: var.$block-spacing;
src/styles/_page.project.panel.scss
+3 -3
View File
@@ -147,14 +147,14 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
align-items: center;
justify-content: center;
.spot-icon {
.app-icon {
color: color.$default;
}
&:active {
background-color: color.$default-inv-bg;
.spot-icon {
.app-icon {
color: color.$default-inv;
}
}
@@ -163,7 +163,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
&:hover {
background-color: color.$default-inv-bg;
.spot-icon {
.app-icon {
color: color.$default-inv;
}
}
src/styles/_page.project.panel.settings.scss
+1 -1
View File
@@ -127,7 +127,7 @@
background-color: color.$main;
color: color.$post-input-bg;
.spot-icon {
.app-icon {
@extend .flicker;
}
}
src/styles/_page.project.scss
+2 -2
View File
@@ -65,7 +65,7 @@
transform: translate(-50%, -100%);
}
.spot-icon {
.app-icon {
transition: color var.$trans-quick, text-shadow var.$trans-quick;
}
}
@@ -73,7 +73,7 @@
/* Icon Stack */
.spot-icon-stack {
.app-icon-stack {
&:not(.drill-icon) {
font-size: 2.5em;
filter: drop-shadow(var.$elem-shadow);
src/styles/spot.scss → src/styles/livetrail.scss
View File