Rebuild panel navigation
This commit is contained in:
@@ -64,5 +64,5 @@ export default {
|
|||||||
<div id="main">
|
<div id="main">
|
||||||
<component :is="currentView" />
|
<component :is="currentView" />
|
||||||
</div>
|
</div>
|
||||||
<div id="mobile" class="mobile"></div>
|
<div id="mobile"></div>
|
||||||
</template>
|
</template>
|
||||||
@@ -19,8 +19,8 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
server: this.spot.consts.server,
|
server: this.spot.consts.server,
|
||||||
feedPanelOpen: this.spot.isMobile(),
|
feedPanelOpen: false,
|
||||||
settingsPanelOpen: true,
|
settingsPanelOpen: false,
|
||||||
markerSize: {width: 32, height: 32},
|
markerSize: {width: 32, height: 32},
|
||||||
simpleBar: null,
|
simpleBar: null,
|
||||||
project: {},
|
project: {},
|
||||||
@@ -29,7 +29,10 @@ export default {
|
|||||||
nlFeedbacks: [],
|
nlFeedbacks: [],
|
||||||
nlLoading: false,
|
nlLoading: false,
|
||||||
feed: {loading:true, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0},
|
feed: {loading:true, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0},
|
||||||
user: {name:'', email:''}
|
user: {name:'', email:''},
|
||||||
|
maps: {},
|
||||||
|
map: {},
|
||||||
|
hikeTypes: ['main', 'off-track', 'hitchhiking']
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -50,6 +53,9 @@ export default {
|
|||||||
},
|
},
|
||||||
nlAction() {
|
nlAction() {
|
||||||
return this.subscribed?'unsubscribe':'subscribe';
|
return this.subscribed?'unsubscribe':'subscribe';
|
||||||
|
},
|
||||||
|
mobile() {
|
||||||
|
return this.spot.isMobile();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
inject: ['spot'],
|
inject: ['spot'],
|
||||||
@@ -74,8 +80,6 @@ export default {
|
|||||||
initProject() {
|
initProject() {
|
||||||
this.project = this.spot.vars(['projects', this.$parent.hash.items[0]]);
|
this.project = this.spot.vars(['projects', this.$parent.hash.items[0]]);
|
||||||
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
|
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
|
||||||
|
|
||||||
if(!this.spot.isMobile()) this.toggleFeedPanel(true, 'none');
|
|
||||||
},
|
},
|
||||||
initLightbox() {
|
initLightbox() {
|
||||||
lightbox.option({
|
lightbox.option({
|
||||||
@@ -156,56 +160,111 @@ export default {
|
|||||||
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
|
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
|
||||||
*/
|
*/
|
||||||
},
|
},
|
||||||
initMap() {
|
async initMap() {
|
||||||
const map = new Map({
|
/*
|
||||||
|
let asSources = {};
|
||||||
|
let asLayers = {};
|
||||||
|
for (const [sMapId, asMap] of Object.entries(aoMarkers.maps)) {
|
||||||
|
asSources.push({
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [asMap.pattern],
|
||||||
|
tileSize: asMap.tile_size
|
||||||
|
});
|
||||||
|
asLayers.push({
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
|
||||||
|
|
||||||
|
this.map = new Map({
|
||||||
container: 'map',
|
container: 'map',
|
||||||
style: {
|
style: {
|
||||||
version: 8,
|
version: 8,
|
||||||
sources: {
|
sources: {
|
||||||
MIERUNEMAP: {
|
satellite: {
|
||||||
type: 'raster',
|
type: 'raster',
|
||||||
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
|
tiles: [aoMarkers.maps.satellite.pattern],
|
||||||
tileSize: 256,
|
tileSize: aoMarkers.maps.satellite.tile_size
|
||||||
attribution:
|
|
||||||
"Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
layers: [
|
layers: [
|
||||||
{
|
{
|
||||||
id: 'MIERUNEMAP',
|
id: 'satellite',
|
||||||
type: 'raster',
|
type: 'raster',
|
||||||
source: 'MIERUNEMAP',
|
source: 'satellite',
|
||||||
minzoom: 0,
|
minzoom: 0,
|
||||||
maxzoom: 18
|
maxzoom: 18
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
center: [139.767, 35.681],
|
center: [-122.45427081556572, 42.17865477384241],
|
||||||
zoom: 11
|
zoom: 5
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Marker()
|
||||||
|
.setLngLat([-122.45427081556572, 42.17865477384241])
|
||||||
|
.addTo(this.map);
|
||||||
|
|
||||||
|
this.toggleFeedPanel(!this.mobile);
|
||||||
|
|
||||||
|
//Raster Tiles
|
||||||
|
this.map.once('load', async () => {
|
||||||
|
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;
|
||||||
|
|
||||||
|
this.map.addSource(sMapId, {
|
||||||
|
type: 'raster',
|
||||||
|
tiles: [asMap.pattern],
|
||||||
|
tileSize: asMap.tile_size
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.addLayer({
|
||||||
|
id: sMapId,
|
||||||
|
type: 'raster',
|
||||||
|
source: sMapId,
|
||||||
|
'layout': {
|
||||||
|
'visibility': 'none'
|
||||||
|
},
|
||||||
|
minZoom: asMap.min_zoom,
|
||||||
|
maxZoom: asMap.max_zoom
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.on('idle', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
//Legend
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
toggleFeedPanel(bShow, sMapAction) {
|
toggleFeedPanel(bShow, sMapAction) {
|
||||||
let bOldValue = this.feedPanelOpen;
|
let bOldValue = this.feedPanelOpen;
|
||||||
this.feedPanelOpen = (typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
|
this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
|
||||||
|
|
||||||
if(bOldValue != this.feedPanelOpen) {
|
if(bOldValue != this.feedPanelOpen) {
|
||||||
this.spot.onResize();
|
this.spot.onResize();
|
||||||
|
|
||||||
sMapAction = sMapAction || 'panTo';
|
sMapAction = sMapAction || 'panTo';
|
||||||
/* TODO
|
|
||||||
switch(sMapAction) {
|
switch(sMapAction) {
|
||||||
case 'none':
|
case 'none':
|
||||||
break;
|
break;
|
||||||
case 'panTo':
|
case 'panTo':
|
||||||
this.spot.tmp('map').panBy(
|
this.map.panBy(
|
||||||
[(this.isFeedPanelOpen()?1:-1) * this.spot.tmp('$Feed').outerWidth(true) / 2, 0],
|
[(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0],
|
||||||
{duration: 0.5}
|
{duration: 500}
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case 'panToInstant':
|
case 'panToInstant':
|
||||||
this.spot.tmp('map').panBy([(this.isFeedPanelOpen()?1:-1) * this.spot.tmp('$Feed').outerWidth(true) / 2, 0]);
|
this.map.panBy([(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0]);
|
||||||
break;
|
break;
|
||||||
case 'fitBounds':
|
case 'fitBounds':
|
||||||
this.spot.tmp('map').fitBounds(
|
/*
|
||||||
|
this.map.fitBounds(
|
||||||
this.spot.tmp('track').getBounds(),
|
this.spot.tmp('track').getBounds(),
|
||||||
{
|
{
|
||||||
paddingTopLeft: L.point(5, this.spot.tmp('marker_size').height + 5),
|
paddingTopLeft: L.point(5, this.spot.tmp('marker_size').height + 5),
|
||||||
@@ -213,9 +272,32 @@ export default {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
}
|
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggleSettingsPanel(bShow, sMapAction) {
|
||||||
|
let bOldValue = this.settingsPanelOpen;
|
||||||
|
this.settingsPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.settingsPanelOpen):bShow;
|
||||||
|
|
||||||
|
if(bOldValue != this.settingsPanelOpen) {
|
||||||
|
this.spot.onResize();
|
||||||
|
|
||||||
|
sMapAction = sMapAction || 'panTo';
|
||||||
|
switch(sMapAction) {
|
||||||
|
case 'none':
|
||||||
|
break;
|
||||||
|
case 'panTo':
|
||||||
|
this.map.panBy(
|
||||||
|
[(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) / 2, 0],
|
||||||
|
{duration: 500}
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case 'panToInstant':
|
||||||
|
this.map.panBy([(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) /2, 0]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
goToPost(oPost) {
|
goToPost(oPost) {
|
||||||
/*
|
/*
|
||||||
@@ -241,8 +323,8 @@ export default {
|
|||||||
<div class="loader fa fa-fw fa-map flicker"></div>
|
<div class="loader fa fa-fw fa-map flicker"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div id="settings">
|
<div id="settings" class="map-container map-container-left" ref="settings">
|
||||||
<div id="settings-panel">
|
<div id="settings-panel" class="map-panel" ref="settingsPanel">
|
||||||
<div class="settings-header">
|
<div class="settings-header">
|
||||||
<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
|
<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 id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
|
||||||
@@ -255,7 +337,12 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<h1><SpotIcon :icon="'map fa-fw'" :text="spot.lang('maps')" /></h1>
|
<h1><SpotIcon :icon="'map fa-fw'" :text="spot.lang('maps')" /></h1>
|
||||||
<div id="layers"></div>
|
<div id="settings-layers">
|
||||||
|
<div class="layer" v-for="map in maps">
|
||||||
|
<input type="radio" :id="map.id_map" :name="map.codename" :value="map.codename" :checked="map.default" />
|
||||||
|
<label :for="map.codename">{{ this.spot.lang('map_'+map.codename) }}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-section newsletter">
|
<div class="settings-section newsletter">
|
||||||
<h1><SpotIcon :icon="'newsletter fa-fw'" :text="spot.lang('newsletter')" /></h1>
|
<h1><SpotIcon :icon="'newsletter fa-fw'" :text="spot.lang('newsletter')" /></h1>
|
||||||
@@ -280,9 +367,21 @@ export default {
|
|||||||
<SpotIcon :icon="'credits'" :text="spot.lang('credits_project')" />
|
<SpotIcon :icon="'credits'" :text="spot.lang('credits_project')" />
|
||||||
</a> {{ spot.lang('credits_license') }}</div>
|
</a> {{ spot.lang('credits_license') }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div :class="'map-control map-control-icon settings-control map-control-'+(mobile?'bottom':'top')" @click="toggleSettingsPanel">
|
||||||
|
<SpotIcon :icon="settingsPanelOpen?'prev':'menu'" />
|
||||||
</div>
|
</div>
|
||||||
<div id="feed">
|
<div v-if="!mobile" id="legend" class="map-control settings-control map-control-bottom">
|
||||||
<div id="feed-panel" ref="feedPanel">
|
<div v-for="hikeType in hikeTypes" class="track">
|
||||||
|
<span :class="'line '+hikeType"></span>
|
||||||
|
<span class="desc">{{ spot.lang('track_'+hikeType) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="title" :class="'map-control settings-control map-control-'+(mobile?'bottom':'top')">
|
||||||
|
<span>{{ project.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="feed" class="map-container map-container-right" ref="feed">
|
||||||
|
<div id="feed-panel" class="map-panel" ref="feedPanel">
|
||||||
<div id="feed-header">
|
<div id="feed-header">
|
||||||
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
|
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
|
||||||
<ProjectPost v-else :options="{type: 'poster', relative_time: spot.lang('post_new_message')}" />
|
<ProjectPost v-else :options="{type: 'poster', relative_time: spot.lang('post_new_message')}" />
|
||||||
@@ -294,6 +393,9 @@ export default {
|
|||||||
<ProjectPost :options="{type: 'loading', headerless: true}" />
|
<ProjectPost :options="{type: 'loading', headerless: true}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
|
||||||
|
<SpotIcon :icon="feedPanelOpen?'next':'post'" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -116,8 +116,8 @@
|
|||||||
<div :class="postClass" :id="postId">
|
<div :class="postClass" :id="postId">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="index">
|
<span class="index">
|
||||||
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle"><spotIcon :icon="anchorIcon" /></a>
|
|
||||||
<spotIcon :icon="subType" :text="displayedId" />
|
<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>
|
||||||
<span class="time" @mouseover="time = relTime" @mouseleave="time = timeDiff?spot.lang('your_time', absTime):absTime">{{ time }}</span>
|
<span class="time" @mouseover="time = relTime" @mouseleave="time = timeDiff?spot.lang('your_time', absTime):absTime">{{ time }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,12 +2,13 @@
|
|||||||
import './jquery.helpers.js';
|
import './jquery.helpers.js';
|
||||||
|
|
||||||
//Common
|
//Common
|
||||||
import { copyArray, getElem, setElem, getDragPosition, copyTextToClipboard } from './common.js';
|
import * as common from './common.js';
|
||||||
window.copyArray = copyArray;
|
window.copyArray = common.copyArray;
|
||||||
window.getElem = getElem;
|
window.getElem = common.getElem;
|
||||||
window.setElem = setElem;
|
window.setElem = common.setElem;
|
||||||
window.getDragPosition = getDragPosition;
|
window.getDragPosition = common.getDragPosition;
|
||||||
window.copyTextToClipboard = copyTextToClipboard;
|
window.copyTextToClipboard = common.copyTextToClipboard;
|
||||||
|
window.getOuterWidth = common.getOuterWidth;
|
||||||
|
|
||||||
import Css from './../styles/spot.scss';
|
import Css from './../styles/spot.scss';
|
||||||
import LogoText from '../images/logo_black.png';
|
import LogoText from '../images/logo_black.png';
|
||||||
|
|||||||
@@ -66,3 +66,17 @@ export function copyTextToClipboard(text) {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getOuterWidth(element) {
|
||||||
|
var style = getComputedStyle(element);
|
||||||
|
var width = element.offsetWidth; // Width without padding and border
|
||||||
|
width += parseInt(style.marginLeft) + parseInt(style.marginRight); // Add margins
|
||||||
|
|
||||||
|
// Check if the box-sizing is border-box (includes padding and border in the width)
|
||||||
|
if (style.boxSizing === 'border-box') {
|
||||||
|
width += parseInt(style.paddingLeft) + parseInt(style.paddingRight); // Add padding
|
||||||
|
width += parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth); // Add border
|
||||||
|
}
|
||||||
|
|
||||||
|
return width;
|
||||||
|
}
|
||||||
@@ -139,3 +139,9 @@ h1 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
|
||||||
|
#mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -7,65 +7,47 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#projects {
|
#projects {
|
||||||
#feed, #settings {
|
.map-container {
|
||||||
width: calc(#{$panel-width});
|
width: calc(#{$panel-width});
|
||||||
max-width: calc(#{$panel-width});
|
max-width: calc(#{$panel-width});
|
||||||
}
|
}
|
||||||
|
|
||||||
#feed {
|
.map-container-left {
|
||||||
right: calc((#{$panel-width}) * -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings {
|
|
||||||
left: calc((#{$panel-width}) * -1);
|
left: calc((#{$panel-width}) * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.map-container-right {
|
||||||
|
right: calc((#{$panel-width}) * -1);
|
||||||
|
}
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
|
||||||
max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leaflet-right, .leaflet-left {
|
&.with-feed {
|
||||||
width: 100%;
|
.map-container-left {
|
||||||
|
left: calc((#{$panel-width}) * -2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.with-settings {
|
||||||
|
.map-container-right {
|
||||||
|
right: calc((#{$panel-width}) * -2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-feed, &.with-settings {
|
&.with-feed, &.with-settings {
|
||||||
#submap {
|
#submap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
left: 0;
|
||||||
|
|
||||||
.leaflet-control-container .leaflet-top.leaflet-right {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$block-spacing});
|
||||||
max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-feed {
|
|
||||||
.leaflet-right {
|
|
||||||
right: calc(#{$panel-width});
|
|
||||||
}
|
|
||||||
.leaflet-left {
|
|
||||||
left: calc((#{$panel-width}) * -1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.with-settings {
|
|
||||||
.leaflet-right {
|
|
||||||
right: calc((#{$panel-width}) * -1);
|
|
||||||
}
|
|
||||||
.leaflet-left {
|
|
||||||
left: calc(#{$panel-width});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-control-container .leaflet-top.leaflet-left {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lightbox .lb-outerContainer .lb-container .lb-nav {
|
.lightbox .lb-outerContainer .lb-container .lb-nav {
|
||||||
@@ -82,10 +64,8 @@
|
|||||||
right: 1em;
|
right: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 801px) {
|
#mobile {
|
||||||
.mobile {
|
display: block;
|
||||||
display: none !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
256
src/styles/_page.project.feed.scss
Normal file
256
src/styles/_page.project.feed.scss
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
#feed {
|
||||||
|
#feed-panel {
|
||||||
|
#feed-header {
|
||||||
|
.poster {
|
||||||
|
textarea[name=post] {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
width: calc(100% - 2em);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[name=name] {
|
||||||
|
width: calc(100% - 6em);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[name=submit] {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.archived {
|
||||||
|
background: #EEE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#feed-posts {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-box {
|
||||||
|
position:relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-item {
|
||||||
|
margin-bottom: $block-spacing;
|
||||||
|
background: $post-bg;
|
||||||
|
color: $post-color;
|
||||||
|
border-radius: $block-radius;
|
||||||
|
width: calc(100% - #{$block-spacing});
|
||||||
|
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $post-color;
|
||||||
|
&:hover {
|
||||||
|
color: $post-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.signature {
|
||||||
|
margin: $elem-spacing 0 0 0;
|
||||||
|
text-align: right;
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: baseline;
|
||||||
|
margin: 0 0.2em calc((1em - 24px)/2) 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
padding: 0 $block-spacing;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: $elem-spacing 0px;
|
||||||
|
|
||||||
|
&.index {
|
||||||
|
width: 25%;
|
||||||
|
|
||||||
|
.link, .link:visited, .link_copied {
|
||||||
|
margin-left: $elem-spacing;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.time {
|
||||||
|
width: 75%;
|
||||||
|
text-align: right;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
clear: both;
|
||||||
|
padding: 0em $block-spacing $block-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.headerless {
|
||||||
|
.header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-top: $block-spacing;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 2em;
|
||||||
|
margin: $elem-spacing 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.message {
|
||||||
|
background: $message-bg;
|
||||||
|
color: $message-color;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 0 0 $elem-spacing 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $message-color;
|
||||||
|
&:hover {
|
||||||
|
color: $message-color-hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.drill {
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
.drill-icon {
|
||||||
|
transform: translate(-16px, -32px);
|
||||||
|
|
||||||
|
.fa-message-in {
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.fa-message {
|
||||||
|
@extend .#{$fa-css-prefix}-drill-message;
|
||||||
|
top: 13px;
|
||||||
|
left: 3px;
|
||||||
|
}
|
||||||
|
.fa-message-in {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather {
|
||||||
|
position: absolute;
|
||||||
|
top: $block-spacing;
|
||||||
|
right: $block-spacing;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
font-size: 1.3em;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 1rem;
|
||||||
|
background: $message-color;
|
||||||
|
color: $message-bg;
|
||||||
|
border-radius: $block-radius 0 0 $block-radius;
|
||||||
|
padding: $elem-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: $elem-spacing;
|
||||||
|
background: $message-bg;
|
||||||
|
color: $message-color;
|
||||||
|
border-radius: 0 $block-radius $block-radius 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.staticmap {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: $block-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.post {
|
||||||
|
.body {
|
||||||
|
padding: 0em 1em 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.media {
|
||||||
|
background: $media-bg;
|
||||||
|
color: $media-color;
|
||||||
|
|
||||||
|
.body {
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
color: $media-color;
|
||||||
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
&.drill {
|
||||||
|
&:hover {
|
||||||
|
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
|
||||||
|
color: rgba($media-bg, 0.75);
|
||||||
|
}
|
||||||
|
.comment {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drill-icon {
|
||||||
|
font-size: 3em;
|
||||||
|
|
||||||
|
.fa-drill-image {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.fa-drill-video {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
image-orientation: from-image;
|
||||||
|
outline: none;
|
||||||
|
border-radius: $block-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
line-height: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: justify;
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
|
border-radius: 0 0 $block-radius $block-radius;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
200
src/styles/_page.project.panel.scss
Normal file
200
src/styles/_page.project.panel.scss
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
$panel-width: 30vw;
|
||||||
|
$panel-width-max: "400px + 3 * #{$block-spacing}";
|
||||||
|
|
||||||
|
#projects {
|
||||||
|
&.with-feed {
|
||||||
|
#submap {
|
||||||
|
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container-right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.with-settings {
|
||||||
|
#submap {
|
||||||
|
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
||||||
|
left: min(#{$panel-width}, #{$panel-width-max});
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container-left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.with-feed.with-settings {
|
||||||
|
#submap {
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container { //#feed, #settings
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1;
|
||||||
|
user-select: none;
|
||||||
|
width: #{$panel-width};
|
||||||
|
max-width: calc(#{$panel-width-max});
|
||||||
|
|
||||||
|
&.moving {
|
||||||
|
cursor: grabbing;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-panel { //#feed-panel, #settings-panel
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
background-color: $post-input-bg;
|
||||||
|
color: $post-color;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, a.button {
|
||||||
|
background-color: $post-color;
|
||||||
|
color: $post-bg;
|
||||||
|
|
||||||
|
&:hover, &:hover a, &:hover a:visited {
|
||||||
|
background-color: $post-input-bg;
|
||||||
|
color: $post-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
background-color: $post-color;
|
||||||
|
color: $post-bg;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&+ button, &+ a.button {
|
||||||
|
margin-left: $elem-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container-left { //#settings
|
||||||
|
//left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
|
||||||
|
left: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
|
||||||
|
transition: left 0.5s;
|
||||||
|
//width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
|
||||||
|
//max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
|
||||||
|
|
||||||
|
.map-panel { //#settings-panel
|
||||||
|
width: calc(100% - #{$block-spacing});
|
||||||
|
margin: $block-spacing;
|
||||||
|
border-radius: $block-radius;
|
||||||
|
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
|
||||||
|
color: $post-color;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container-right { //#feed
|
||||||
|
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
|
||||||
|
transition: right 0.5s;
|
||||||
|
|
||||||
|
.map-panel { //#feed-panel
|
||||||
|
width: 100%;
|
||||||
|
padding-top: $block-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-control {
|
||||||
|
position: absolute;
|
||||||
|
background-color: $post-bg;
|
||||||
|
padding: $elem-spacing;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&.map-control-top {
|
||||||
|
top: $block-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.map-control-bottom {
|
||||||
|
bottom: $block-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.map-control-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
@extend .fa-fw;
|
||||||
|
color: $post-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .fa {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feed-control {
|
||||||
|
right: calc(100% + $block-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-control {
|
||||||
|
left: calc(100% + $block-spacing);
|
||||||
|
}
|
||||||
|
|
||||||
|
#legend {
|
||||||
|
.track {
|
||||||
|
white-space: nowrap;
|
||||||
|
.line {
|
||||||
|
width: 2em;
|
||||||
|
height: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&.main {
|
||||||
|
background-color: $track-main-color;
|
||||||
|
}
|
||||||
|
&.off-track {
|
||||||
|
background-color: $track-off-track-color;
|
||||||
|
}
|
||||||
|
&.hitchhiking {
|
||||||
|
background-color: $track-hitchhiking-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
color: $legend-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
left: calc(100% + #{$button-width} + 2 * #{$block-spacing});
|
||||||
|
@include no-text-overflow();
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: $block-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -3,20 +3,18 @@ $elem-spacing: 0.5rem;
|
|||||||
$block-spacing: 1rem;
|
$block-spacing: 1rem;
|
||||||
$block-radius: 3px;
|
$block-radius: 3px;
|
||||||
$block-shadow: 3px;
|
$block-shadow: 3px;
|
||||||
$panel-width: 30vw;
|
$button-width: 31px;
|
||||||
$panel-width-max: "400px + 3 * #{$block-spacing}";
|
|
||||||
$button-width: 44px;
|
|
||||||
|
|
||||||
//Feed colors
|
//Feed colors
|
||||||
$post-input-bg: #ffffff; //#d9deff;
|
$post-input-bg: #ffffff;
|
||||||
$post-color: #333; //#323268;
|
$post-color: #333;
|
||||||
$post-color-hover: darken($post-color, 10%);
|
$post-color-hover: darken($post-color, 10%);
|
||||||
$post-bg: rgba(255,255,255,.8); //#B4BDFF;
|
$post-bg: rgba(255, 255, 255, .8);
|
||||||
$message-color: #326526;
|
$message-color: #326526;
|
||||||
$message-color-hover: darken($message-color, 10%);
|
$message-color-hover: darken($message-color, 10%);
|
||||||
$message-bg: #6DFF58;
|
$message-bg: #6DFF58;
|
||||||
$media-color: #333; //#635C28;
|
$media-color: #333;
|
||||||
$media-bg: rgba(255,255,255,.8); //#F3EC9F;
|
$media-bg: rgba(255, 255, 255, .8);
|
||||||
|
|
||||||
//Settings colors
|
//Settings colors
|
||||||
$title-color: $post-color;
|
$title-color: $post-color;
|
||||||
@@ -28,6 +26,10 @@ $track-off-track-color: #0000ff;
|
|||||||
$track-hitchhiking-color: #FF7814;
|
$track-hitchhiking-color: #FF7814;
|
||||||
$legend-color: $post-color;
|
$legend-color: $post-color;
|
||||||
|
|
||||||
|
@import 'page.project.panel';
|
||||||
|
@import 'page.project.feed';
|
||||||
|
@import 'page.project.settings';
|
||||||
|
|
||||||
#projects {
|
#projects {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -36,67 +38,6 @@ $legend-color: $post-color;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
/* Panels movements */
|
|
||||||
&.with-feed {
|
|
||||||
#submap {
|
|
||||||
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-right {
|
|
||||||
right: min(#{$panel-width}, #{$panel-width-max});
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed-button {
|
|
||||||
.fa {
|
|
||||||
@extend .fa-next;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
max-width: calc(100vw - max(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.with-settings {
|
|
||||||
#submap {
|
|
||||||
width: calc(100% - min(#{$panel-width}, #{$panel-width-max}));
|
|
||||||
left: min(#{$panel-width}, #{$panel-width-max});
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-left {
|
|
||||||
left: min(#{$panel-width}, #{$panel-width-max});
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings-button {
|
|
||||||
.fa {
|
|
||||||
@extend .fa-prev;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.with-feed.with-settings {
|
|
||||||
#submap {
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
max-width: calc(100vw - #{$block-spacing} * 2 - min(#{$panel-width}, #{$panel-width-max}) * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#background {
|
#background {
|
||||||
background: #666;
|
background: #666;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -234,93 +175,6 @@ $legend-color: $post-color;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Leaflet patches */
|
|
||||||
.leaflet-control {
|
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
|
||||||
font-family: Roboto, Arial, sans-serif;
|
|
||||||
border-radius: $block-radius;
|
|
||||||
border: none;
|
|
||||||
margin: $block-spacing;
|
|
||||||
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
|
|
||||||
|
|
||||||
&+ .leaflet-control:not(.leaflet-control-inline) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
&+ .leaflet-control.leaflet-control-inline {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.leaflet-control-scale {
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
.leaflet-control-scale-line {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.leaflet-control-inline {
|
|
||||||
clear: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pull right/left controls by $panel-width */
|
|
||||||
.leaflet-right, .leaflet-left {
|
|
||||||
transition: left 0.5s, right 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide default layer control */
|
|
||||||
.leaflet-top.leaflet-left .leaflet-control-layers .leaflet-control-layers-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#legend {
|
|
||||||
.track {
|
|
||||||
white-space: nowrap;
|
|
||||||
.line {
|
|
||||||
width: 2em;
|
|
||||||
height: 4px;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 2px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&.main {
|
|
||||||
background-color: $track-main-color;
|
|
||||||
}
|
|
||||||
&.off-track {
|
|
||||||
background-color: $track-off-track-color;
|
|
||||||
}
|
|
||||||
&.hitchhiking {
|
|
||||||
background-color: $track-hitchhiking-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
font-size: 1em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
color: $legend-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
@include no-text-overflow();
|
|
||||||
line-height: $button-width;
|
|
||||||
height: $button-width;
|
|
||||||
padding: 0 $block-spacing;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
span#project_name {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed-button .fa {
|
|
||||||
@extend .fa-post;
|
|
||||||
}
|
|
||||||
#settings-button .fa {
|
|
||||||
@extend .fa-menu;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Drill & Map icons */
|
/* Drill & Map icons */
|
||||||
|
|
||||||
a.drill {
|
a.drill {
|
||||||
@@ -362,477 +216,4 @@ $legend-color: $post-color;
|
|||||||
color: $track-hitchhiking-color;
|
color: $track-hitchhiking-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Feed/Settings Panel */
|
|
||||||
|
|
||||||
#feed, #settings {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 999;
|
|
||||||
cursor: grab;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&.moving {
|
|
||||||
cursor: grabbing;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, textarea {
|
|
||||||
background-color: $post-input-bg;
|
|
||||||
color: $post-color;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, a.button {
|
|
||||||
background-color: $post-color;
|
|
||||||
color: $post-bg;
|
|
||||||
|
|
||||||
&:hover, &:hover a, &:hover a:visited {
|
|
||||||
background-color: $post-input-bg;
|
|
||||||
color: $post-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:visited {
|
|
||||||
background-color: $post-color;
|
|
||||||
color: $post-bg;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&+ button, &+ a.button {
|
|
||||||
margin-left: $elem-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed-panel, #settings-panel {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#feed {
|
|
||||||
right: calc(min(#{$panel-width}, #{$panel-width-max}) * -1);
|
|
||||||
transition: right 0.5s;
|
|
||||||
width: #{$panel-width};
|
|
||||||
max-width: calc(#{$panel-width-max});
|
|
||||||
|
|
||||||
#feed-panel {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: $block-spacing;
|
|
||||||
|
|
||||||
#feed-header {
|
|
||||||
.poster {
|
|
||||||
textarea[name=post] {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
width: calc(100% - 2em);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[name=name] {
|
|
||||||
width: calc(100% - 6em);
|
|
||||||
}
|
|
||||||
|
|
||||||
button[name=submit] {
|
|
||||||
margin-left: 1em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.archived {
|
|
||||||
background: #EEE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed-posts {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body-box {
|
|
||||||
position:relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-item {
|
|
||||||
margin-bottom: $block-spacing;
|
|
||||||
background: $post-bg;
|
|
||||||
color: $post-color;
|
|
||||||
border-radius: $block-radius;
|
|
||||||
width: calc(100% - #{$block-spacing});
|
|
||||||
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $post-color;
|
|
||||||
&:hover {
|
|
||||||
color: $post-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.signature {
|
|
||||||
margin: $elem-spacing 0 0 0;
|
|
||||||
text-align: right;
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
img {
|
|
||||||
vertical-align: baseline;
|
|
||||||
margin: 0 0.2em calc((1em - 24px)/2) 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header {
|
|
||||||
padding: 0 $block-spacing;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding: $elem-spacing 0px;
|
|
||||||
|
|
||||||
&.index {
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
.link, .link:visited, .link_copied {
|
|
||||||
margin-left: $elem-spacing;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.time {
|
|
||||||
width: 75%;
|
|
||||||
text-align: right;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.body {
|
|
||||||
clear: both;
|
|
||||||
padding: 0em $block-spacing $block-spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.headerless {
|
|
||||||
.header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.body {
|
|
||||||
padding-top: $block-spacing;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 2em;
|
|
||||||
margin: $elem-spacing 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.message {
|
|
||||||
background: $message-bg;
|
|
||||||
color: $message-color;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 0.9em;
|
|
||||||
margin: 0 0 $elem-spacing 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $message-color;
|
|
||||||
&:hover {
|
|
||||||
color: $message-color-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.drill {
|
|
||||||
line-height: 0;
|
|
||||||
|
|
||||||
.drill-icon {
|
|
||||||
transform: translate(-16px, -32px);
|
|
||||||
|
|
||||||
.fa-message-in {
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.fa-message {
|
|
||||||
@extend .#{$fa-css-prefix}-drill-message;
|
|
||||||
top: 13px;
|
|
||||||
left: 3px;
|
|
||||||
}
|
|
||||||
.fa-message-in {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather {
|
|
||||||
position: absolute;
|
|
||||||
top: $block-spacing;
|
|
||||||
right: $block-spacing;
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
font-size: 1.3em;
|
|
||||||
vertical-align: middle;
|
|
||||||
line-height: 1rem;
|
|
||||||
background: $message-color;
|
|
||||||
color: $message-bg;
|
|
||||||
border-radius: $block-radius 0 0 $block-radius;
|
|
||||||
padding: $elem-spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: $elem-spacing;
|
|
||||||
background: $message-bg;
|
|
||||||
color: $message-color;
|
|
||||||
border-radius: 0 $block-radius $block-radius 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.staticmap {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $block-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.post {
|
|
||||||
.body {
|
|
||||||
padding: 0em 1em 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.media {
|
|
||||||
background: $media-bg;
|
|
||||||
color: $media-color;
|
|
||||||
|
|
||||||
.body {
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
color: $media-color;
|
|
||||||
position: relative;
|
|
||||||
line-height: 0;
|
|
||||||
|
|
||||||
&.drill {
|
|
||||||
&:hover {
|
|
||||||
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
|
|
||||||
color: rgba($media-bg, 0.75);
|
|
||||||
}
|
|
||||||
.comment {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drill-icon {
|
|
||||||
font-size: 3em;
|
|
||||||
|
|
||||||
.fa-drill-image {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.fa-drill-video {
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
image-orientation: from-image;
|
|
||||||
outline: none;
|
|
||||||
border-radius: $block-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
line-height: normal;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-align: justify;
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
border-radius: 0 0 $block-radius $block-radius;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#settings {
|
|
||||||
left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
|
|
||||||
transition: left 0.5s;
|
|
||||||
width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
|
|
||||||
max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
|
|
||||||
|
|
||||||
#settings-panel {
|
|
||||||
width: calc(100% - #{$block-spacing} - #{$block-shadow}); //Remove box-shadow
|
|
||||||
margin: $block-spacing;
|
|
||||||
border-radius: $block-radius;
|
|
||||||
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
|
|
||||||
color: $post-color;
|
|
||||||
background: rgba(255, 255, 255, 0.8);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
|
|
||||||
.settings-header {
|
|
||||||
text-align: center;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
background: rgba(255, 255, 255, .4);
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
border-radius: $block-radius $block-radius 0 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-width: 180px;
|
|
||||||
transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#last_update {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: -2em;
|
|
||||||
padding: 0 1rem;
|
|
||||||
width: calc(100% - 2rem);
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.8em;
|
|
||||||
margin: 0;
|
|
||||||
color: $subtitle-color;
|
|
||||||
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
img {
|
|
||||||
width: 12px;
|
|
||||||
vertical-align: middle;
|
|
||||||
animation: spotlogo 20s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr {
|
|
||||||
text-decoration: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-footer {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
background: rgba(255, 255, 255, .4);
|
|
||||||
border-radius: 0 0 3px 3px;
|
|
||||||
font-size: 0.7em;
|
|
||||||
padding: 0.3rem;
|
|
||||||
text-align: center;
|
|
||||||
color: #888;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #777;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-sections {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
#settings-sections-scrollbox {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-section {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 1.5rem 1rem 0 1rem;
|
|
||||||
width: calc(100% - 2 * #{$block-spacing});
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0 0 $block-spacing;
|
|
||||||
color: $title-color;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-bottom: .3em;
|
|
||||||
display: block;
|
|
||||||
@extend .clickable;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
@include no-text-overflow();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.newsletter {
|
|
||||||
input#email {
|
|
||||||
width: calc(100% - 6em);
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
color: #999;
|
|
||||||
background: rgba(255,255,255,0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button#nl_btn {
|
|
||||||
margin-left: 1em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
|
|
||||||
&.subscribe .fa {
|
|
||||||
@extend .fa-send;
|
|
||||||
}
|
|
||||||
&.unsubscribe .fa {
|
|
||||||
@extend .fa-unsubscribe;
|
|
||||||
}
|
|
||||||
&.loading {
|
|
||||||
background-color: $message-color;
|
|
||||||
color: white;
|
|
||||||
span {
|
|
||||||
@extend .flicker;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#settings-projects {
|
|
||||||
a.fa-download {
|
|
||||||
color: $legend-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #0078A8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#elems {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
147
src/styles/_page.project.settings.scss
Normal file
147
src/styles/_page.project.settings.scss
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
#settings {
|
||||||
|
#settings-panel {
|
||||||
|
.settings-header {
|
||||||
|
text-align: center;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
background: rgba(255, 255, 255, .4);
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
border-radius: $block-radius $block-radius 0 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 180px;
|
||||||
|
transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#last_update {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -2em;
|
||||||
|
padding: 0 1rem;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8em;
|
||||||
|
margin: 0;
|
||||||
|
color: $subtitle-color;
|
||||||
|
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
img {
|
||||||
|
width: 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
animation: spotlogo 20s infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
text-decoration: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-footer {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
background: rgba(255, 255, 255, .4);
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 0.3rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #888;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #777;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-sections {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
#settings-sections-scrollbox {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-section {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1.5rem 1rem 0 1rem;
|
||||||
|
width: calc(100% - 2 * #{$block-spacing});
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0 0 $block-spacing;
|
||||||
|
color: $title-color;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-layers {
|
||||||
|
.layer {
|
||||||
|
label {
|
||||||
|
margin-left: .3rem;
|
||||||
|
@extend .clickable;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
@include no-text-overflow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: $elem-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.newsletter {
|
||||||
|
input#email {
|
||||||
|
width: calc(100% - 6em);
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: #999;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button#nl_btn {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
&.subscribe .fa {
|
||||||
|
@extend .fa-send;
|
||||||
|
}
|
||||||
|
&.unsubscribe .fa {
|
||||||
|
@extend .fa-unsubscribe;
|
||||||
|
}
|
||||||
|
&.loading {
|
||||||
|
background-color: $message-color;
|
||||||
|
color: white;
|
||||||
|
span {
|
||||||
|
@extend .flicker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-projects {
|
||||||
|
a.fa-download {
|
||||||
|
color: $legend-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #0078A8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user