diff --git a/src/Spot.vue b/src/Spot.vue index 3c06eb5..76c71d6 100644 --- a/src/Spot.vue +++ b/src/Spot.vue @@ -64,5 +64,5 @@ export default {
-
+
\ No newline at end of file diff --git a/src/components/project.vue b/src/components/project.vue index f416fff..9d484ad 100644 --- a/src/components/project.vue +++ b/src/components/project.vue @@ -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 MIERUNE, under CC BY. Data by OpenStreetMap 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} + case 'panTo': + 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 {
-
-
+
+

@@ -255,7 +337,12 @@ export default {

-
+
+
+ + +
+
+
+ +
+
+
+ + {{ spot.lang('track_'+hikeType) }} +
+
+
+ {{ project.name }} +
-
-
+
+
@@ -294,6 +393,9 @@ export default {
+
+ +
\ No newline at end of file diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue index a151bf5..b96a25f 100644 --- a/src/components/projectPost.vue +++ b/src/components/projectPost.vue @@ -116,8 +116,8 @@
- + {{ time }}
diff --git a/src/scripts/app.js b/src/scripts/app.js index 1e78442..bb589b3 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -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'; diff --git a/src/scripts/common.js b/src/scripts/common.js index a272e31..e049dc9 100644 --- a/src/scripts/common.js +++ b/src/scripts/common.js @@ -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; +} \ No newline at end of file diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 7db5ae3..6139ce2 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -139,3 +139,9 @@ h1 { } } } + +/* Mobile */ + +#mobile { + display: none; +} \ No newline at end of file diff --git a/src/styles/_mobile.scss b/src/styles/_mobile.scss index ac254e7..13aa4cd 100644 --- a/src/styles/_mobile.scss +++ b/src/styles/_mobile.scss @@ -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 { @@ -81,11 +63,9 @@ a.lb-next::before { right: 1em; } - } -} - -@media only screen and (min-width: 801px) { - .mobile { - display: none !important; } -} + + #mobile { + display: block; + } +} \ No newline at end of file diff --git a/src/styles/_page.project.feed.scss b/src/styles/_page.project.feed.scss new file mode 100644 index 0000000..908bee7 --- /dev/null +++ b/src/styles/_page.project.feed.scss @@ -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; + } + } + } + } + } + } +} diff --git a/src/styles/_page.project.panel.scss b/src/styles/_page.project.panel.scss new file mode 100644 index 0000000..6d21091 --- /dev/null +++ b/src/styles/_page.project.panel.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss index 3ee69eb..f588370 100644 --- a/src/styles/_page.project.scss +++ b/src/styles/_page.project.scss @@ -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; -} +} \ No newline at end of file diff --git a/src/styles/_page.project.settings.scss b/src/styles/_page.project.settings.scss new file mode 100644 index 0000000..96d8169 --- /dev/null +++ b/src/styles/_page.project.settings.scss @@ -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; + } + } + } + } + } + } +} \ No newline at end of file