Rebuild panel navigation
This commit is contained in:
@@ -64,5 +64,5 @@ export default {
|
||||
<div id="main">
|
||||
<component :is="currentView" />
|
||||
</div>
|
||||
<div id="mobile" class="mobile"></div>
|
||||
<div id="mobile"></div>
|
||||
</template>
|
||||
@@ -19,8 +19,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
server: this.spot.consts.server,
|
||||
feedPanelOpen: this.spot.isMobile(),
|
||||
settingsPanelOpen: true,
|
||||
feedPanelOpen: false,
|
||||
settingsPanelOpen: false,
|
||||
markerSize: {width: 32, height: 32},
|
||||
simpleBar: null,
|
||||
project: {},
|
||||
@@ -29,7 +29,10 @@ export default {
|
||||
nlFeedbacks: [],
|
||||
nlLoading: false,
|
||||
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: {
|
||||
@@ -50,6 +53,9 @@ export default {
|
||||
},
|
||||
nlAction() {
|
||||
return this.subscribed?'unsubscribe':'subscribe';
|
||||
},
|
||||
mobile() {
|
||||
return this.spot.isMobile();
|
||||
}
|
||||
},
|
||||
inject: ['spot'],
|
||||
@@ -74,8 +80,6 @@ export default {
|
||||
initProject() {
|
||||
this.project = this.spot.vars(['projects', this.$parent.hash.items[0]]);
|
||||
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
|
||||
|
||||
if(!this.spot.isMobile()) this.toggleFeedPanel(true, 'none');
|
||||
},
|
||||
initLightbox() {
|
||||
lightbox.option({
|
||||
@@ -156,56 +160,111 @@ export default {
|
||||
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
|
||||
*/
|
||||
},
|
||||
initMap() {
|
||||
const map = new Map({
|
||||
async initMap() {
|
||||
/*
|
||||
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',
|
||||
style: {
|
||||
version: 8,
|
||||
sources: {
|
||||
MIERUNEMAP: {
|
||||
satellite: {
|
||||
type: 'raster',
|
||||
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
|
||||
tileSize: 256,
|
||||
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."
|
||||
tiles: [aoMarkers.maps.satellite.pattern],
|
||||
tileSize: aoMarkers.maps.satellite.tile_size
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: 'MIERUNEMAP',
|
||||
id: 'satellite',
|
||||
type: 'raster',
|
||||
source: 'MIERUNEMAP',
|
||||
source: 'satellite',
|
||||
minzoom: 0,
|
||||
maxzoom: 18
|
||||
}
|
||||
]
|
||||
},
|
||||
center: [139.767, 35.681],
|
||||
zoom: 11
|
||||
center: [-122.45427081556572, 42.17865477384241],
|
||||
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) {
|
||||
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) {
|
||||
this.spot.onResize();
|
||||
|
||||
sMapAction = sMapAction || 'panTo';
|
||||
/* TODO
|
||||
switch(sMapAction) {
|
||||
case 'none':
|
||||
break;
|
||||
case 'panTo':
|
||||
this.spot.tmp('map').panBy(
|
||||
[(this.isFeedPanelOpen()?1:-1) * this.spot.tmp('$Feed').outerWidth(true) / 2, 0],
|
||||
{duration: 0.5}
|
||||
this.map.panBy(
|
||||
[(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0],
|
||||
{duration: 500}
|
||||
);
|
||||
break;
|
||||
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;
|
||||
case 'fitBounds':
|
||||
this.spot.tmp('map').fitBounds(
|
||||
/*
|
||||
this.map.fitBounds(
|
||||
this.spot.tmp('track').getBounds(),
|
||||
{
|
||||
paddingTopLeft: L.point(5, this.spot.tmp('marker_size').height + 5),
|
||||
@@ -213,8 +272,31 @@ export default {
|
||||
}
|
||||
);
|
||||
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) {
|
||||
@@ -241,8 +323,8 @@ export default {
|
||||
<div class="loader fa fa-fw fa-map flicker"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="settings">
|
||||
<div id="settings-panel">
|
||||
<div id="settings" class="map-container map-container-left" ref="settings">
|
||||
<div id="settings-panel" class="map-panel" ref="settingsPanel">
|
||||
<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>
|
||||
@@ -255,7 +337,12 @@ export default {
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<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 class="settings-section newsletter">
|
||||
<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')" />
|
||||
</a> {{ spot.lang('credits_license') }}</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 v-if="!mobile" id="legend" class="map-control settings-control map-control-bottom">
|
||||
<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">
|
||||
<div id="feed-panel" ref="feedPanel">
|
||||
<div id="feed" class="map-container map-container-right" ref="feed">
|
||||
<div id="feed-panel" class="map-panel" ref="feedPanel">
|
||||
<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')}" />
|
||||
@@ -294,6 +393,9 @@ export default {
|
||||
<ProjectPost :options="{type: 'loading', headerless: true}" />
|
||||
</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>
|
||||
</template>
|
||||
@@ -116,8 +116,8 @@
|
||||
<div :class="postClass" :id="postId">
|
||||
<div class="header">
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
import './jquery.helpers.js';
|
||||
|
||||
//Common
|
||||
import { copyArray, getElem, setElem, getDragPosition, copyTextToClipboard } from './common.js';
|
||||
window.copyArray = copyArray;
|
||||
window.getElem = getElem;
|
||||
window.setElem = setElem;
|
||||
window.getDragPosition = getDragPosition;
|
||||
window.copyTextToClipboard = copyTextToClipboard;
|
||||
import * as common from './common.js';
|
||||
window.copyArray = common.copyArray;
|
||||
window.getElem = common.getElem;
|
||||
window.setElem = common.setElem;
|
||||
window.getDragPosition = common.getDragPosition;
|
||||
window.copyTextToClipboard = common.copyTextToClipboard;
|
||||
window.getOuterWidth = common.getOuterWidth;
|
||||
|
||||
import Css from './../styles/spot.scss';
|
||||
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 {
|
||||
#feed, #settings {
|
||||
.map-container {
|
||||
width: calc(#{$panel-width});
|
||||
max-width: calc(#{$panel-width});
|
||||
}
|
||||
|
||||
#feed {
|
||||
right: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
|
||||
#settings {
|
||||
.map-container-left {
|
||||
left: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
|
||||
.map-container-right {
|
||||
right: calc((#{$panel-width}) * -1);
|
||||
}
|
||||
|
||||
#title {
|
||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
max-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} - 3 * #{$block-spacing});
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaflet-right, .leaflet-left {
|
||||
width: 100%;
|
||||
&.with-feed {
|
||||
.map-container-left {
|
||||
left: calc((#{$panel-width}) * -2);
|
||||
}
|
||||
}
|
||||
|
||||
&.with-settings {
|
||||
.map-container-right {
|
||||
right: calc((#{$panel-width}) * -2);
|
||||
}
|
||||
}
|
||||
|
||||
&.with-feed, &.with-settings {
|
||||
#submap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-top.leaflet-right {
|
||||
display: none;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#title {
|
||||
width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
max-width: calc(#{$panel-width} - #{$button-width} - 4 * #{$block-spacing});
|
||||
max-width: calc(#{$panel-width} - #{$button-width} - 3 * #{$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 {
|
||||
@@ -82,10 +64,8 @@
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 801px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
#mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
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-radius: 3px;
|
||||
$block-shadow: 3px;
|
||||
$panel-width: 30vw;
|
||||
$panel-width-max: "400px + 3 * #{$block-spacing}";
|
||||
$button-width: 44px;
|
||||
$button-width: 31px;
|
||||
|
||||
//Feed colors
|
||||
$post-input-bg: #ffffff; //#d9deff;
|
||||
$post-color: #333; //#323268;
|
||||
$post-input-bg: #ffffff;
|
||||
$post-color: #333;
|
||||
$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-hover: darken($message-color, 10%);
|
||||
$message-bg: #6DFF58;
|
||||
$media-color: #333; //#635C28;
|
||||
$media-bg: rgba(255,255,255,.8); //#F3EC9F;
|
||||
$media-color: #333;
|
||||
$media-bg: rgba(255, 255, 255, .8);
|
||||
|
||||
//Settings colors
|
||||
$title-color: $post-color;
|
||||
@@ -28,6 +26,10 @@ $track-off-track-color: #0000ff;
|
||||
$track-hitchhiking-color: #FF7814;
|
||||
$legend-color: $post-color;
|
||||
|
||||
@import 'page.project.panel';
|
||||
@import 'page.project.feed';
|
||||
@import 'page.project.settings';
|
||||
|
||||
#projects {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@@ -36,67 +38,6 @@ $legend-color: $post-color;
|
||||
width: 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: #666;
|
||||
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 */
|
||||
|
||||
a.drill {
|
||||
@@ -362,477 +216,4 @@ $legend-color: $post-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