Upgrade maplibre and fix goToPost
This commit is contained in:
@@ -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',
|
||||
|
||||
@@ -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,
|
||||
|
||||
635
package-lock.json
generated
635
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@@ -1,13 +1,13 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.2",
|
||||
"@babel/preset-env": "^7.23.2",
|
||||
"@babel/core": "^7.23.9",
|
||||
"@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-template-compiler": "^2.7.15",
|
||||
"webpack": "^5.89.0",
|
||||
"vue-loader": "^17.4.2",
|
||||
"vue-template-compiler": "^2.7.16",
|
||||
"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",
|
||||
"css-loader": "^6.8.1",
|
||||
"copy-webpack-plugin": "^12.0.2",
|
||||
"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-loader": "^13.3.2",
|
||||
"simplebar": "^6.2.5",
|
||||
"style-loader": "^3.3.3",
|
||||
"sass": "^1.70.0",
|
||||
"sass-loader": "^14.1.0",
|
||||
"simplebar-vue": "^2.3.3",
|
||||
"style-loader": "^3.3.4",
|
||||
"url-loader": "^4.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-style-loader": "^4.1.3"
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
this.simpleBar = new SimpleBar(this.$refs.feedPanel);
|
||||
this.simpleBar.getScrollElement().addEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
|
||||
//Simplebar event
|
||||
this.$refs.feedSimpleBar.scrollElement.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) {
|
||||
bFirstChunk = bFirstChunk || false;
|
||||
bShowLoading = bShowLoading || true;
|
||||
|
||||
if(!this.feed.outOfData || bFirstChunk) {
|
||||
async getNextFeed() {
|
||||
if(!this.feed.outOfData && !this.feed.loading) {
|
||||
//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;
|
||||
@@ -240,6 +256,7 @@ export default {
|
||||
|
||||
//Legend
|
||||
|
||||
|
||||
|
||||
},
|
||||
toggleFeedPanel(bShow, sMapAction) {
|
||||
@@ -299,18 +316,30 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
goToPost(oPost) {
|
||||
/*
|
||||
var sElemId = '#'+oPost.type+'-'+oPost.id;
|
||||
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'))
|
||||
);
|
||||
async findPost(oPost) {
|
||||
if(this.goToPost(oPost)) {
|
||||
//if(oPost.type=='media' || oPost.type=='message') $Post.find('a.drill').click();
|
||||
}
|
||||
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>
|
||||
|
||||
@@ -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') {
|
||||
autosize(this.$refs.post);
|
||||
}
|
||||
if(this.options.type == 'poster') 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>
|
||||
</span>
|
||||
<span class="time" @mouseover="time = relTime" @mouseleave="time = timeDiff?spot.lang('your_time', absTime):absTime">{{ time }}</span>
|
||||
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle">
|
||||
<spotIcon :icon="anchorIcon" />
|
||||
</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'">
|
||||
|
||||
@@ -11,10 +11,6 @@ export default {
|
||||
<template>
|
||||
<span>
|
||||
{{ localTime.substr(-5) }}
|
||||
<sup
|
||||
v-if="iOffset != '0'"
|
||||
:title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'"
|
||||
|
||||
>{{ ' '+offset }}</sup>
|
||||
<sup v-if="offset != '0'" :title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'">{{ ' '+offset }}</sup>
|
||||
</span>
|
||||
</template>
|
||||
@@ -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);
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -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;
|
||||
|
||||
110
src/styles/_page.project.map.scss
Normal file
110
src/styles/_page.project.map.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
9
src/styles/_vue.scss
Normal file
9
src/styles/_vue.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user