Upgrade maplibre and fix goToPost

build/webpack.common.js

@@ -77,18 +77,22 @@ module.exports = {
 			jQuery: require.resolve('jquery')
 		}),
 		new CopyWebpackPlugin({
-			patterns: [{
+			patterns: [/*{
 				from: 'geo/',
 				to: path.resolve(DIST, 'geo')
-			}, {
-				from: path.resolve(LIB, 'index.php'),
-				to: 'index.php'
 			}, {
 				from: path.resolve(SRC, 'images/icons'),
 				to: 'images/icons'
+			}, */{
+				from: path.resolve(LIB, 'index.php'),
+				to: 'index.php'
 			}]
 		}),
-		new SymlinkWebpackPlugin({ origin: '../files/', symlink: 'files' }),
+		new SymlinkWebpackPlugin([
+			{ origin: '../files/', symlink: 'files' },
+			{ origin: '../geo/', symlink: 'geo' },
+			{ origin: '../src/images/icons/', symlink: 'images/icons' }
+		]),
 		new CleanWebpackPlugin(),
 		new webpack.DefinePlugin({
 			__VUE_OPTIONS_API__: 'true',

lib/Spot.php

@@ -173,7 +173,6 @@ class Spot extends Main
 		return parent::getMainPage(
 			array(
 				'vars' => array(
-					'chunk_size'				=> self::FEED_CHUNK_SIZE,
 					'default_project_codename'	=> $this->oProject->getProjectCodeName(),
 					'projects'					=> $this->oProject->getProjects(),
 					'user'						=> $this->oUser->getUserInfo()
@@ -181,7 +180,8 @@ class Spot extends Main
 				'consts' => array(
 					'modes'						=> Project::MODES,
 					'clearances'				=> User::CLEARANCES,
-					'default_timezone'			=> Settings::TIMEZONE
+					'default_timezone'			=> Settings::TIMEZONE,
+					'chunk_size'				=> self::FEED_CHUNK_SIZE
 				)
 			),
 			self::MAIN_PAGE,

package.json

@@ -1,13 +1,13 @@
 {
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-env": "^7.23.9",
     "babel-loader": "^9.1.3",
     "resolve-url-loader": "^5.0.0",
     "symlink-webpack-plugin": "^1.1.0",
-    "vue-loader": "^17.3.1",
+    "vue-loader": "^17.4.2",
-    "vue-template-compiler": "^2.7.15",
+    "vue-template-compiler": "^2.7.16",
-    "webpack": "^5.89.0",
+    "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4"
   },
   "name": "spot",
@@ -25,21 +25,21 @@
     "autosize": "^6.0.1",
     "blueimp-file-upload": "^10.32.0",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.10.0",
     "d3": "^7.8.5",
     "file-loader": "^6.2.0",
-    "html-loader": "^4.2.0",
+    "html-loader": "^5.0.0",
     "jquery": "^3.7.1",
     "jquery-mousewheel": "^3.1.13",
     "jquery.waitforimages": "^2.4.0",
     "lightbox2": "^2.11.4",
-    "maplibre-gl": "^3.6.2",
+    "maplibre-gl": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.69.4",
+    "sass": "^1.70.0",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^14.1.0",
-    "simplebar": "^6.2.5",
+    "simplebar-vue": "^2.3.3",
-    "style-loader": "^3.3.3",
+    "style-loader": "^3.3.4",
     "url-loader": "^4.1.1",
     "vue": "^3.3.8",
     "vue-style-loader": "^4.1.3"

src/Spot.vue

@@ -10,13 +10,12 @@ const aoRoutes = {
 export default {
 	data() {
 		return {
-			//spot: window.oSpot,
 			hash: {}
 		};
 	},
 	inject: ['spot'],
 	computed: {
-		currentView() {
+		page() {
 			this.spot.vars('page', this.hash.page);
 			return aoRoutes[this.hash.page];
 		}
@@ -62,7 +61,7 @@ export default {
 </script>
 <template>
 	<div id="main">
-		<component :is="currentView" />
+		<component :is="page" />
 	</div>
 	<div id="mobile"></div>
 </template>

src/components/project.vue

@@ -2,33 +2,37 @@
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { Map, NavigationControl, Marker } from 'maplibre-gl';
 
-import lightbox from '../scripts/lightbox.js';
+import simplebar from 'simplebar-vue';
 
-import SimpleBar from 'simplebar';
+import Lightbox from '../scripts/lightbox.js';
+
+//import SimpleBar from 'simplebar';
 
 import SpotIcon from './spotIcon.vue';
 import SpotButton from './spotButton.vue';
 import ProjectPost from './projectPost.vue';
+import { registerRuntimeCompiler } from 'vue';
 
 export default {
 	components: {
 		SpotIcon,
 		SpotButton,
-		ProjectPost
+		ProjectPost,
+		simplebar
 	},
 	data() {
 		return {
 			server: this.spot.consts.server,
+			feed: {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true},
 			feedPanelOpen: false,
+			feedSimpleBar: null,
 			settingsPanelOpen: false,
 			markerSize: {width: 32, height: 32},
-			simpleBar: null,
 			project: {},
 			modeHisto: false,
 			posts: [],
 			nlFeedbacks: [],
 			nlLoading: false,
-			feed: {loading:true, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0},
 			user: {name:'', email:''},
 			maps: {},
 			map: {},
@@ -58,6 +62,12 @@ export default {
 			return this.spot.isMobile();
 		}
 	},
+	provide() {
+		return {
+			user: this.user,
+			project: this.project
+		};
+	},
 	inject: ['spot'],
 	mounted() {
 		//Set default project
@@ -74,7 +84,15 @@ export default {
 	methods: {
 		initEvents() {
 			this.spot.addPage('project', {
-				//TODO
+				onResize() {
+					//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
+
+					/* TODO
+					if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
+						this.spot.tmp('elev').resize({width:this.getElevWidth()});
+					}
+					*/
+				}
 			});
 		},
 		initProject() {
@@ -82,7 +100,7 @@ export default {
 			this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
 		},
 		initLightbox() {
-			lightbox.option({
+			Lightbox.option({
 				alwaysShowNavOnTouchDevices: true,
 				albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',
 				fadeDuration: 300,
@@ -98,9 +116,8 @@ export default {
 			});
 		},
 		async initFeed() {
-			//Simplebar
+			//Simplebar event
-			this.simpleBar = new SimpleBar(this.$refs.feedPanel);
+			this.$refs.feedSimpleBar.scrollElement.addEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
-			this.simpleBar.getScrollElement().addEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
 
 			//Mobile Touchscreen Events
 			//TODO
@@ -108,38 +125,43 @@ export default {
 			//Add post Event handling
 			//TODO
 
-			await this.updateFeed(true, false);
+			await this.getNextFeed();
+
+			console.log('going to post');
 
 			//Scroll to post
-			if(this.$parent.hash.items.length == 3) this.goToPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
+			if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
 		},
 		initSettings() {
-			//Scrollbar
-			new SimpleBar(this.$refs.settingsPanel);
-
 			this.user = this.spot.vars('user');
 		},
-		async updateFeed(bFirstChunk, bShowLoading) {
+		async getNextFeed() {
-			bFirstChunk = bFirstChunk || false;
+			if(!this.feed.outOfData && !this.feed.loading) {
-			bShowLoading = bShowLoading || true;
-
-			if(!this.feed.outOfData || bFirstChunk) {
 				//Get next chunk
-				if(bShowLoading) this.feed.loading = true;
+				this.feed.loading = true;
 				let aoData = await this.spot.get2('next_feed', {id_project: this.project.id, id: this.feed.refIdLast});
 				let iPostCount = Object.keys(aoData.feed).length;
 				this.feed.loading = false;
+				this.feed.firstChunk = false;
 
 				//Update pointers
-				this.feed.outOfData = (iPostCount < this.spot.vars('chunk_size'));
+				this.feed.outOfData = (iPostCount < this.spot.consts.chunk_size);
 				if(iPostCount > 0) {
 					this.feed.refIdLast = aoData.ref_id_last;
-					if(bFirstChunk) this.feed.refIdFirst = aoData.ref_id_first;
+					if(this.feed.firstChunk) this.feed.refIdFirst = aoData.ref_id_first;
 				}
 
 				//Add posts
 				this.posts.push(...aoData.feed);
 			}
+
+			return true;
+		},
+		onFeedScroll(oEvent) {
+			//FIXME remvove jquery dependency
+			var $Box = $(oEvent.currentTarget);
+			var $BoxContent = $Box.find('.simplebar-content');
+			if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.getNextFeed();
 		},
 		async manageSubs() {
 			var regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -153,13 +175,6 @@ export default {
 					.catch((sDesc) => {this.nlFeedbacks.push('error', sDesc);});
 			}
 		},
-		onFeedScroll(oEvent) {
-			/* TODO
-			var $Box = $(oEvent.currentTarget);
-			var $BoxContent = $Box.find('.simplebar-content');
-			if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
-			*/
-		},
 		async initMap() {
 			/*
 			let asSources = {};
@@ -200,7 +215,8 @@ export default {
 					]
 				},
 				center: [-122.45427081556572, 42.17865477384241],
-				zoom: 5
+				zoom: 5,
+				attributionControl: false
 			});
 			
 			new Marker()
@@ -211,7 +227,7 @@ export default {
 
 			//Raster Tiles
 			this.map.once('load', async () => {
-				const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
+				//const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
 				this.maps = aoMarkers.maps;
 				for (const [sMapId, asMap] of Object.entries(this.maps)) {
 					if(sMapId=='satellite') continue;
@@ -241,6 +257,7 @@ export default {
 			//Legend
 			
 			
+
 		},
 		toggleFeedPanel(bShow, sMapAction) {
 			let bOldValue = this.feedPanelOpen;
@@ -299,18 +316,30 @@ export default {
 				}
 			}
 		},
-		goToPost(oPost) {
+		async findPost(oPost) {
-			/*
+			if(this.goToPost(oPost)) {
-			var sElemId = '#'+oPost.type+'-'+oPost.id;
+				//if(oPost.type=='media' || oPost.type=='message') $Post.find('a.drill').click();
-			var $Post = this.spot.tmp('$PostList').find(sElemId);
-			if($Post.length > 0) {
-				this.spot.tmp('simple-bar').getScrollElement().scrollTop += Math.round(
-					$Post.offset().top
-					- parseInt($('#feed-panel').css('padding-top'))
-				);
 			}
-			else console.log('Missing element ID '+sElemId);
+			else if(!this.feed.outOfData) {
-			*/
+				await this.getNextFeed();
+				this.findPost(oPost);
+			}
+			else console.log('Missing element ID "'+oPost.id+'" of type "'+oPost.type+'"');
+		},
+		goToPost(oPost) {
+			//TODO remove jquery deps
+			let bFound = false;
+			let aoRefs = this.$refs.posts.filter((post)=>{return post.postId == oPost.type+'-'+oPost.id;});
+			if(aoRefs.length == 1) {
+				this.$refs.feedSimpleBar.scrollElement.scrollTop += Math.round(
+					$(aoRefs[0].$el).offset().top
+					- parseInt($(this.$refs.feedSimpleBar.$el).css('padding-top'))
+				);
+				bFound = true;
+				this.spot.flushHash(['post', 'message']);
+			}
+
+			return bFound;
 		}
 	}
 }
@@ -324,13 +353,13 @@ export default {
 		</div>
 		<div id="map"></div>
 		<div id="settings" class="map-container map-container-left" ref="settings">
-			<div id="settings-panel" class="map-panel" ref="settingsPanel">
+			<div id="settings-panel" class="map-panel">
 				<div class="settings-header">
 					<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
 					<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
 				</div>
 				<div class="settings-sections">
-					<div ref="settingsPanel" id="settings-sections-scrollbox">
+					<simplebar id="settings-sections-scrollbox">
 						<div class="settings-section">
 							<h1><SpotIcon :icon="'project fa-fw'" :text="spot.lang('hikes')" /></h1>
 							<div id="settings-projects"></div>
@@ -360,7 +389,7 @@ export default {
 							<SpotButton :text="spot.lang('admin_config')" :icon="'config'" href="#admin" />
 							<SpotButton :text="spot.lang('admin_upload')" :icon="'upload'" href="#upload" />
 						</div>
-					</div>
+					</simplebar>
 				</div>
 				<div class="settings-footer">
 					<a href="https://git.lutran.fr/franzz/spot" :title="spot.lang('credits_git')" target="_blank" rel="noopener">
@@ -381,18 +410,18 @@ export default {
 			</div>
 		</div>
 		<div id="feed" class="map-container map-container-right" ref="feed">
-			<div id="feed-panel" class="map-panel" ref="feedPanel">
+			<simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
 				<div id="feed-header">
 					<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
 					<ProjectPost v-else :options="{type: 'poster', relative_time: spot.lang('post_new_message')}" />
 				</div>
 				<div id="feed-posts">
-					<ProjectPost v-for="post in posts" :options="post" />
+					<ProjectPost v-for="post in posts" :options="post" ref="posts" />
 				</div>
 				<div id="feed-footer" v-if="feed.loading">
 					<ProjectPost :options="{type: 'loading', headerless: true}" />
 				</div>
-			</div>
+			</simplebar>
 			<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
 				<SpotIcon :icon="feedPanelOpen?'next':'post'" />
 			</div>

src/components/projectPost.vue

@@ -20,9 +20,10 @@
 		},
 		data() {
 			return {
-				time: '',
+				mouseOverHeader: false,
 				absTime: this.options.formatted_time,
 				absTimeLocal: this.options.formatted_time_local,
+				timeDiff: (this.options.formatted_time && this.options.formatted_time_local != this.options.formatted_time),
 				anchorVisible: ['message', 'media', 'post'].includes(this.options.type),
 				anchorTitle: this.spot.lang('copy_to_clipboard'),
 				anchorIcon: 'link'
@@ -40,23 +41,21 @@
 				return this.options.subtype || this.options.type;
 			},
 			displayedId() {
-				return this.options.displayed_id?(' '+this.spot.lang('counter', this.options.displayed_id)):'';
+				return this.options.displayed_id?(this.spot.lang('counter', this.options.displayed_id)):'';
 			},
 			hash() {
 				let asHash = this.spot.getHash();
 				return '#'+[asHash.page, asHash.items[0], this.options.type, this.options.id].join(this.spot.consts.hash_sep);
 			},
-			timeDiff() {
-				return (this.options.formatted_time && this.options.formatted_time_local != this.options.formatted_time);
-			},
 			modeHisto() {
-				return (this.$parent.project.mode==this.spot.consts.modes.histo);
+				return (this.project.mode==this.spot.consts.modes.histo);
 			},
 			relTime() {
-				return this.modeHisto?this.options.formatted_time.substr(0, 10):this.options.relative_time;
+				return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
-			}
 			},
-		inject: ['spot'],
+			
+		},
+		inject: ['spot', 'project', 'user'],
 		methods: {
 			copyAnchor() {
 				copyTextToClipboard(this.spot.consts.server+this.spot.hash());
@@ -105,9 +104,7 @@
 		},
 		mounted() {
 			//Auto-adjust text area height
-			if(this.options.type == 'poster') {
+			if(this.options.type == 'poster') autosize(this.$refs.post);
-				autosize(this.$refs.post);
-			} 
 		}
 	}
 </script>
@@ -115,11 +112,18 @@
 <template>
 	<div :class="postClass" :id="postId">
 		<div class="header">
-			<span class="index">
+			<div class="index">
 				<spotIcon :icon="subType" :text="displayedId" />
-				<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle"><spotIcon :icon="anchorIcon" /></a>
+				<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle">
-			</span>
+					<spotIcon :icon="anchorIcon" />
-			<span class="time" @mouseover="time = relTime" @mouseleave="time = timeDiff?spot.lang('your_time', absTime):absTime">{{ time }}</span>
+				</a>
+			</div>
+			<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?spot.lang('local_time', absTimeLocal):''">
+				<Transition name="fade" mode="out-in">
+					<span v-if="mouseOverHeader">{{ timeDiff?spot.lang('your_time', absTime):absTime }}</span>
+					<span v-else>{{ relTime }}</span>
+				</Transition>
+			</div>
 		</div>
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
@@ -151,7 +155,7 @@
 			</div>
 			<p v-else-if="options.type == 'poster'" class="message">
 				<textarea ref="post" name="post" :placeholder="spot.lang('post_message')" class="autoExpand" rows="1" v-model="$parent.post"></textarea>
-				<input type="text" name="name" :placeholder="spot.lang('post_name')" v-model="$parent.user.name" />
+				<input type="text" name="name" :placeholder="spot.lang('post_name')" v-model="user.name" />
 				<spotButton name="submit" :aria-label="spot.lang('send')" :title="spot.lang('send')" :icon="'send'" />
 			</p>
 			<div v-else-if="options.type == 'archived'">

src/components/projectRelTime.vue

@@ -11,10 +11,6 @@ export default {
 <template>
 	<span>
 		{{ localTime.substr(-5) }}
-		<sup
+		<sup v-if="offset != '0'" :title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'">{{ ' '+offset }}</sup>
-			v-if="iOffset != '0'"
-			:title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'"
-
-		>{{ ' '+offset }}</sup>
 	</span>
 </template>

src/scripts/spot.js

@@ -117,12 +117,14 @@ export default class Spot {
 
 	lang(sKey, asParams) {
 		asParams = asParams || [];
-		if(typeof asParams == 'string') asParams = [asParams];
+		if(typeof asParams != 'object') asParams = [asParams];
 
 		var sLang = '';
 		if(sKey in this.consts.lang) {
 			sLang = this.consts.lang[sKey];
-			for(let i in asParams) sLang = sLang.replace('$'+i, asParams[i]);
+			for(let i in asParams) {
+				sLang = sLang.replace('$'+i, asParams[i]);
+			}
 		}
 		else {
 			console.log('missing translation: '+sKey);

src/styles/_fa.scss

@@ -95,7 +95,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
 .#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
 .#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); }
-.#{$fa-css-prefix}-link.copied:before { content: fa-content($fa-var-check); }
+.#{$fa-css-prefix}-copied:before { content: fa-content($fa-var-check); }
 
 /* Feed - Poster */
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }

src/styles/_page.project.feed.scss

@@ -65,7 +65,7 @@
 				padding: 0 $block-spacing;
 				position: relative;
 
-				span {
+				div {
 					display: inline-block;
 					font-size: 0.8em;
 					padding: $elem-spacing 0px;
@@ -73,7 +73,7 @@
 					&.index {
 						width: 25%;
 
-						.link, .link:visited, .link_copied {
+						.link {
 							margin-left: $elem-spacing;
 							padding: 0;
 							line-height: 1;

src/styles/_page.project.map.scss

@@ -0,0 +1,110 @@
+#map {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+
+	/* Leaflet Popup */
+	.leaflet-popup-content {
+
+		h1 {
+			font-size: 1.4em;
+			margin: 0;
+			font-weight: bold;
+		}
+
+		.separator {
+			border-top: 1px solid #CCC;
+			margin: $elem-spacing 0 $block-spacing 0;
+		}
+
+		/* Marker Popup */
+		.info-window {
+			h1 .message-type {
+				color: #CCC;
+				font-weight: normal;
+				font-size: calc(1em / 1.4);
+				margin-left: 0.5em;
+				vertical-align: text-bottom;
+			}
+
+			p {
+				font-size: 1.0em;
+				margin: $elem-spacing 0 0 0;
+
+				a {
+					color: $post-color;
+				}
+			}
+
+			.medias {
+				line-height: 0;
+
+				a {
+					display: inline-block;
+
+					margin: $block-spacing $block-spacing 0 0;
+					&:last-child {
+						margin-right: 0;
+					}
+
+					&.drill {
+						font-size: 2em;
+
+						.fa-drill-image {
+							color: transparent;
+						}
+						.fa-drill-video {
+							color: rgba(255, 255, 255, 0.5);
+						}
+
+						&:hover {
+							.fa-drill-video, .fa-drill-image {
+								color: rgba(255, 255, 255, 0.75);
+							}
+						}
+					}
+
+					img {
+						width: auto;
+						height: auto;
+						max-width: 200px;
+						max-height: 100px;
+						border-radius: $block-radius;
+						image-orientation: from-image;
+						transition: All 0.2s;
+					}
+				}
+			}
+		}
+
+		/* Track Popup */
+		.track_tooltip {
+			p {
+				margin: 0;
+
+				&.description {
+					font-size: 1.15em;
+				}
+			}
+
+			h1, .description {
+				@include no-text-overflow();
+			}
+			.body {
+				padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
+				
+				.details {
+					margin-top: -$block-spacing;
+
+					p.detail {
+						margin-top: $block-spacing;
+						width: 50%;
+						display: inline-block;
+					}
+				}
+			}
+		}
+	}
+}

src/styles/_page.project.scss

@@ -26,6 +26,7 @@ $track-off-track-color: #0000ff;
 $track-hitchhiking-color: #FF7814;
 $legend-color: $post-color;
 
+@import 'page.project.map';
 @import 'page.project.panel';
 @import 'page.project.feed';
 @import 'page.project.settings';
@@ -64,117 +65,6 @@ $legend-color: $post-color;
 		}
 	}
 
-	#map {
-		position: absolute;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: 100%;
-
-		/* Leaflet Popup */
-		.leaflet-popup-content {
-
-			h1 {
-				font-size: 1.4em;
-				margin: 0;
-				font-weight: bold;
-			}
-
-			.separator {
-				border-top: 1px solid #CCC;
-				margin: $elem-spacing 0 $block-spacing 0;
-			}
-
-			/* Marker Popup */
-			.info-window {
-				h1 .message-type {
-					color: #CCC;
-					font-weight: normal;
-					font-size: calc(1em / 1.4);
-					margin-left: 0.5em;
-					vertical-align: text-bottom;
-				}
-
-				p {
-					font-size: 1.0em;
-					margin: $elem-spacing 0 0 0;
-
-					a {
-						color: $post-color;
-					}
-				}
-
-				.medias {
-					line-height: 0;
-
-					a {
-						display: inline-block;
-
-						margin: $block-spacing $block-spacing 0 0;
-						&:last-child {
-							margin-right: 0;
-						}
-
-						&.drill {
-							font-size: 2em;
-
-							.fa-drill-image {
-								color: transparent;
-							}
-							.fa-drill-video {
-								color: rgba(255, 255, 255, 0.5);
-							}
-
-							&:hover {
-								.fa-drill-video, .fa-drill-image {
-									color: rgba(255, 255, 255, 0.75);
-								}
-							}
-						}
-
-						img {
-							width: auto;
-							height: auto;
-							max-width: 200px;
-							max-height: 100px;
-							border-radius: $block-radius;
-							image-orientation: from-image;
-							transition: All 0.2s;
-						}
-					}
-				}
-			}
-
-			/* Track Popup */
-			.track_tooltip {
-				p {
-					margin: 0;
-
-					&.description {
-						font-size: 1.15em;
-					}
-				}
-
-				h1, .description {
-					@include no-text-overflow();
-				}
-				.body {
-					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
-					
-					.details {
-						margin-top: -$block-spacing;
-
-						p.detail {
-							margin-top: $block-spacing;
-							width: 50%;
-							display: inline-block;
-						}
-					}
-				}
-			}
-		}
-	}
-
 	/* Drill & Map icons */
 
 	a.drill {

src/styles/_vue.scss

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/styles/spot.scss

@@ -5,7 +5,8 @@
 /* Modules */
 @import 'fa';
 @import 'lightbox';
-@import '../../node_modules/simplebar/dist/simplebar.css';
+@import '../../node_modules/simplebar-vue/dist/simplebar.min.css';
+@import 'vue';
 
 /* Pages Specific CSS */
 @import 'page.project';