franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

foldable feed panel

Browse Source
This commit is contained in:
Franzz
2019-03-10 15:50:58 +01:00
parent 930cf74d34
commit 0717001a08
7 changed files with 138 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
masks/index.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png?v=GvmqYyKwbb">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png?v=GvmqYyKwbb">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png?v=GvmqYyKwbb">

60
masks/project.html
View File

@@ -1,4 +1,4 @@
<div id="messages">
<div id="projects">
<div id="submap">
<div class="loader fa fa-fw fa-map flicker" id="map_loading"></div>
</div>
@@ -11,6 +11,7 @@
</div>
</div>
<div id="elems">
<div id="post-button"><i class="fa fa-fw"></i></div>
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="line main">Trajet principal</div>
<div class="line off-track">Variante</div>
@@ -18,6 +19,7 @@
</div>
</div>
</div>
<div id="mobile" class="mobile"></div>
<script type="text/javascript" src="script/lightbox.min.js"></script>
<script type="text/javascript">
oSpot.onSamePageMove = function(asHash) {
@@ -42,6 +44,7 @@ function initPage(asHash) {
self.tmp('$Map', $('#map'));
self.tmp('updatable', true);
self.tmp('out-of-data', false);
self.tmp('mobile', $('#mobile').is(':visible'));
self.tmp('feed_width', $('#feed').outerWidth(true));
self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
self.tmp('tile_api', '?a=tile&id={id}&z={z}&x={x}&y={y}');
@@ -133,15 +136,23 @@ function initPosts() {
}
//Feed auto-update
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate();
self.tmp('simple-bar').getScrollElement().scrollTop = 0;
if(self.vars(['project', 'mode']) != self.consts.modes.histo) onAutoUpdate(true);
else updateFeed(true);
}
function onAutoUpdate() {
if(self.tmp('simple-bar').scrollContentEl.scrollTop == 0) updateFeed(true, true);
function onAutoUpdate(bFirstExec) {
bFirstExec = bFirstExec || false;
if(bFirstExec) updateFeed(true);
else if(self.tmp('simple-bar').getScrollElement().scrollTop == 0) updateFeed(true, true);
setFeedUpdateTimer(60, onAutoUpdate);
}
function toggleFeedPanel(bShow) {
if(typeof bShow === 'undefined') $('#projects').toggleClass('with-feed');
else $('#projects').toggleClass('with-feed', bShow);
}
function initSpotMessages(aoMessages, aoTracks) {
//Tile layers
@@ -159,6 +170,14 @@ function initSpotMessages(aoMessages, aoTracks) {
});
self.tmp('map', oMap);
//Controls: Feed Panel
var oFeedPanel = L.control({position: 'topright'});
var $PostButton = $('#post-button').clone();
$PostButton.click(toggleFeedPanel);
toggleFeedPanel(!self.tmp('mobile'));
oFeedPanel.onAdd = function(oMap) {return $PostButton[0];};
oFeedPanel.addTo(oMap);
//Controls: Legend
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
@@ -255,7 +274,7 @@ function initSpotMessages(aoMessages, aoTracks) {
}
else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)});
//Building messages
//Spot Messages
$.each(aoMessages, function(iKey, oMsg){
//Marker
@@ -277,7 +296,7 @@ function initSpotMessages(aoMessages, aoTracks) {
.append('Message '+oMsg.type+' '+oMsg.displayed_id))
.append($('<p>', {'class':'time'})
.addIcon('fa-time')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')))
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice')))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
@@ -296,7 +315,7 @@ function initSpotMessages(aoMessages, aoTracks) {
oMarker.bindPopup($Tooltip[0], {
maxWidth: 1000,
keepInView: true,
autoPan: false,
closeOnClick: true,
offset: new L.Point(0, -30)
});
@@ -367,12 +386,12 @@ function updateFeed(bFirstChunk, bDiscrete)
if(bFirstChunk===true) {
self.tmp('news_chunk', 0);
$('#submap').removeClass('with_feed');
$('#projects').removeClass('with-feed');
}
self.get('feed', function(asData) {
$('#loading').hide();
$('#submap').addClass('with_feed');
$('#projects').addClass('with-feed');
$.each(asData, function(iKey, asPost){
$Posts.append(getPost(asPost));
@@ -411,24 +430,27 @@ function getPost(asPost) {
{
case 'message':
$Body = $('<div>')
.data('id', asPost.id_message)
.append($('<p>').addIcon('fa-coords', true).append(asPost.lat_dms+' '+asPost.lon_dms))
.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
.append(
$('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getStaticMapUrl(asPost.latitude, asPost.longitude)})
.data('lat', asPost.latitude)
.data('lng', asPost.longitude)
.click(function(){
var $This = $(this);
var oCenter = L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng')));
self.tmp('map').setOffsetView(self.tmp('map_offset'), oCenter, 13);
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
self.tmp('map').setOffsetView(self.tmp('map_offset'), oMarker.getLatLng(), 13);
if(!oMarker.isPopupOpen()) oMarker.openPopup();
})
)
.data('id', asPost.id_message)
.hover(function(){
.hover(
function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng())) oMarker.togglePopup();
else if(oMarker.isPopupOpen()) oMarker.closePopup();
});
if(oSpot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
},
function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oMarker.isPopupOpen()) oMarker.closePopup();
}
);
break;
case 'picture':
var $Image = $('<img>', {'src': asPost.thumb_path, title: 'Click pour zoomer'/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});

121
style/_mask_project.scss
View File

@@ -1,6 +1,7 @@
//Feed width
$feed-width: "30% - 1rem";
$feed-width-max: "400px + 3rem";
$block-spacing: 1rem;
$feed-width: 30%;
$feed-width-max: "400px + 3 * #{$block-spacing}";
//Feed colors
$post-input-bg: #d9deff;
@@ -17,7 +18,30 @@ $track-off-track-color: #0000ff;
$track-hitchhiking-color: #FF7814;
$legend-color: #222;
#messages {
#projects {
&.with-feed {
#submap {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.leaflet-right {
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
}
#post-button {
.fa {
@extend .fa-next;
}
}
}
&:not(.with-feed) {
#feed #posts {
right: -100%;
}
}
#submap {
position: absolute;
@@ -26,11 +50,6 @@ $legend-color: #222;
bottom: 0;
width: 100%;
&.with_feed {
width: calc(100% - #{$feed-width});
min-width: calc(100% - #{$feed-width-max});
}
.loader {
position: absolute;
font-size: 3em;
@@ -82,7 +101,7 @@ $legend-color: #222;
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border: none;
margin: 1em;
margin: $block-spacing;
&+ .leaflet-control {
margin-top: 0;
@@ -104,8 +123,9 @@ $legend-color: #222;
/* Pull right controls by $feed-width % */
.leaflet-right {
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
transition: all 0.5s;
width: 0;
max-width: 0;
.leaflet-control {
left: -100%;
@@ -149,6 +169,23 @@ $legend-color: #222;
}
}
#post-button {
cursor: pointer;
text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
width: 44px;
text-align: center;
&:hover .fa {
color: white;
}
.fa {
color: #CCC;
@extend .control-icon;
@extend .fa-post;
}
}
#feed {
position: absolute;
right: 0;
@@ -157,14 +194,7 @@ $legend-color: #222;
width: calc(#{$feed-width});
max-width: calc(#{$feed-width-max});
z-index: 999;
#posts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
overflow: hidden;
input, textarea, button {
border: none;
@@ -174,40 +204,48 @@ $legend-color: #222;
color: $post-color;
}
#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left: 1em;
button {
background-color: $post-color;
color: $post-bg;
margin-bottom: 0.5em;
&:hover {
background-color: $post-input-bg;
color: $post-color;
}
}
#posts {
position: absolute;
transition: all 0.5s;
top: $block-spacing;
bottom: 0;
right: 0;
width: 100%;
#poster {
textarea#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
input#name {
width: calc(100% - 6em);
}
button#submit {
margin-left: 1em;
margin-bottom: 0.5em;
}
}
.post {
margin-bottom: 1em;
margin-bottom: $block-spacing;
background: $post-bg;
color: $post-color;
border-radius: 3px;
width: calc(100% - 1em);
width: calc(100% - #{$block-spacing});
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
&:first-child {
margin-top: 1em;
}
.message {
margin: 0.3em 0 0 0;
}
@@ -219,15 +257,14 @@ $legend-color: #222;
.header {
font-style: italic;
font-size: 0.8em;
padding: 0.5em 1em;
span {
padding: 0.5em 1em;
display: inline-block;
width: calc(50% - 2em);
width: 50%;
cursor: default;
&.index {
float: left;
font-style: normal;
}
@@ -275,10 +312,6 @@ $legend-color: #222;
margin: 0.5em 0;
}
p: first-child {
margin-top: 1em;
}
.staticmap {
width: 100%;
border-radius: 3px;

11
style/_mobile.scss Normal file
View File

@@ -0,0 +1,11 @@
@media only screen and (max-width: 800px) {
.desktop, .leaflet-control-container {
display: none;
}
}
@media only screen and (min-width: 801px) {
.mobile {
display: none;
}
}

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

4
style/spot.css.map
View File

File diff suppressed because one or more lines are too long

2
style/spot.scss
View File

@@ -11,3 +11,5 @@
/* Pages Specific CSS (masks) */
@import 'mask_project';
@import 'mask_upload';
@import 'mobile';