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

adding customer sidebar + posts over map + add validity interval (histo)

Browse Source
This commit is contained in:
Franzz
2018-04-14 16:16:25 +02:00
parent 1c8c9a2175
commit ffc94cb85a
10 changed files with 463 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@@ -6,3 +6,9 @@
/.project
/style/.sass-cache/
/.settings/
/files/*.jpg
/files/*.JPG
/files/*.jpeg
/files/*.JPEG
/files/*.png
/files/*.PNG

52
inc/spot.php
View File

@@ -174,10 +174,18 @@ class Spot extends Main
private function getSpotMessages()
{
$asMessages = $this->oDb->selectRows(array('from'=>self::MSG_TABLE, 'orderBy'=>array('timestamp'=>'ASC')));
$asInfo = array('from'=>self::MSG_TABLE, 'orderBy'=>array('timestamp'=>'ASC'));
if(Settings::MODE==self::MODE_HISTO) {
$asInfo['constraint'] = array('timestamp'=>Settings::HISTO_SPAN);
$asInfo['constOpe'] = array('timestamp'=>"BETWEEN");
}
$asMessages = $this->oDb->selectRows($asInfo);
foreach($asMessages as $iKey=>$asMessage)
{
$iUnixTimeStamp = strtotime($asMessage['timestamp']);
$asMessages[$iKey]['latitude'] = floatval($asMessages[$iKey]['latitude']);
$asMessages[$iKey]['longitude'] = floatval($asMessages[$iKey]['longitude']);
$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
}
@@ -199,7 +207,7 @@ class Spot extends Main
}
//Pictures
$asPicPaths = glob('files/*.*');
$asPicPaths = glob('files/*.{jpg,JPG,jpeg,JPEG,png,PNG}', GLOB_BRACE);
foreach($asPicPaths as $iKey=>$sPicPath)
{
//Finding picture timestamp
@@ -207,11 +215,17 @@ class Spot extends Main
$iPicTimeStamp = $asPicInfo['timestamp'];
//Preparing pictures sorting key and related info
$asPics[($iPicTimeStamp*-1).'.1'.$iKey] = array( 'type' => 'picture',
'path' => $sPicPath,
'rotate' => $asPicInfo['rotate'],
'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
'relative_time' => Toolbox::getDateTimeDesc($iPicTimeStamp));
if( Settings::MODE!=self::MODE_HISTO ||
($iPicTimeStamp>=strtotime(Settings::HISTO_SPAN['from']) && $iPicTimeStamp<=strtotime(Settings::HISTO_SPAN['to']))) {
$asPics[($iPicTimeStamp*-1).'.1'.$iKey] = array(
'type' => 'picture',
'path' => $sPicPath,
'rotate' => $asPicInfo['rotate'],
'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
'relative_time' => Toolbox::getDateTimeDesc($iPicTimeStamp)
);
}
}
ksort($asPics);
$iCount = count($asPics);
@@ -222,7 +236,12 @@ class Spot extends Main
}
//Post
$asPosts = $this->oDb->selectRows(array('from'=>self::POST_TABLE));
$asInfo = array('from'=>self::POST_TABLE);
if(Settings::MODE==self::MODE_HISTO) {
$asInfo['constraint'] = array('led'=>Settings::HISTO_SPAN);
$asInfo['constOpe'] = array('led'=>"BETWEEN");
}
$asPosts = $this->oDb->selectRows($asInfo);
foreach($asPosts as $asPost)
{
$iUnixTimeStamp = strtotime($asPost['led']);
@@ -269,14 +288,17 @@ class Spot extends Main
//if($iPicTimeStamp >= self::HONEYMOON_DATE_BEG && $iPicTimeStamp <= self::HONEYMOON_DATE_END) $iPicTimeStamp -= 60*60*(12+1); //timezone + daylight saving
//Orientation
switch($asExif['IFD0']['Orientation'])
{
case 1: $sRotate = '0'; break; //None
case 3: $sRotate = '180'; break; //Flip over
case 6: $sRotate = '90'; break; //Clockwise
case 8: $sRotate = '-90'; break; //Trigo
default: $sRotate = $asExif['IFD0']['Orientation'];
if(array_key_exists('Orientation', $asExif['IFD0'])) {
switch($asExif['IFD0']['Orientation'])
{
case 1: $sRotate = '0'; break; //None
case 3: $sRotate = '180'; break; //Flip over
case 6: $sRotate = '90'; break; //Clockwise
case 8: $sRotate = '-90'; break; //Trigo
default: $sRotate = $asExif['IFD0']['Orientation'];
}
}
else $sRotate = '0';
return array('timestamp'=>$iPicTimeStamp, 'rotate'=>$sRotate);
}

2
masks/index.html
View File

@@ -22,4 +22,4 @@
<footer></footer>
</div>
</body>
</html>
</html>

276
masks/messages.html
View File

@@ -2,15 +2,16 @@
<div id="map">
<div class="loader fa fa-map"></div>
</div>
<div id="legend"></div>
<div id="legend">
<div class="line green">Te Araroa</div>
<div class="line blue">Routeburn Track</div>
<div class="line red">Hors rando</div>
</div>
<div id="feed">
<div id="poster">
<input id="post" name="post" type="text" />
<input id="name" name="name" type="text" /><button id="submit" name="submit" type="button" class="">+</button>
</div>
<div id="posts">
<div id="poster"></div>
<div id="posts_list"></div>
<div id="next_posts"><button id="add_posts" name="add_posts" type="button">Messages plus anciens</button>
<div id="next_posts"><button id="add_posts" name="add_posts" type="button" class="post">Messages plus anciens</button></div>
</div>
</div>
</div>
@@ -18,6 +19,7 @@
<script type="text/javascript">
oSpot.pageInit = function(asHash)
{
self.tmp('$Map', $('#map'));
$('#add_posts').click(updateFeed);
self.get('messages', function(oMessages){
@@ -25,11 +27,12 @@ oSpot.pageInit = function(asHash)
updateFeed(true);
//setInterval(updateFeed, 60 * 1000); //refresh every minute
//Centering map on last message
//Centering map
var agCenter = {lat:0, lng:0};
var iZoom = 0;
if(self.vars('mode')=='blog')
{
//on last message
var oLastMsg = oMessages[oMessages.length-1];
agCenter.lat = oLastMsg.latitude;
agCenter.lng = oLastMsg.longitude;
@@ -37,16 +40,50 @@ oSpot.pageInit = function(asHash)
}
else
{
agCenter.lat = -43.75;
agCenter.lng = 171;
iZoom = 7;
var iMapRatio = 0.7;
var iMinLat, iMaxLat, iMinLng, iMaxLng;
iMinLat = iMinLng = 180;
iMaxLat = iMaxLng = -180;
$.each(oMessages, function(iKey, oMsg){
iMinLat = Math.min(iMinLat, oMsg.latitude);
iMaxLat = Math.max(iMaxLat, oMsg.latitude);
iMinLng = Math.min(iMinLng, oMsg.longitude);
iMaxLng = Math.max(iMaxLng, oMsg.longitude);
});
//Get Marker bounds
var oSouthWest = {lat:iMinLat, lng:iMinLng};
var oNorthEast = {lat:iMaxLat, lng:iMaxLng};
oMarkerBounds = new google.maps.LatLngBounds(oSouthWest, oNorthEast);
agCenter = oMarkerBounds.getCenter();
//Calculate adequate zoom (map.fitBounds is dezooming too much)
var oMapDim = {height: self.tmp('$Map').height()*0.95, width: self.tmp('$Map').width()*(iMapRatio - 0.05)};
iZoom = getBoundsZoomLevel(oMarkerBounds, oMapDim);
}
var oMap = new google.maps.Map(document.getElementById('map'), {
var oMap = new google.maps.Map(self.tmp('$Map')[0], {
center: agCenter,
zoom: iZoom,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scaleControl: true
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
streetViewControl: false
});
var oKmlLayer = new google.maps.KmlLayer({
@@ -59,10 +96,10 @@ oSpot.pageInit = function(asHash)
$.each(oMessages, function(iKey, oMsg){
var oMarker = new google.maps.Marker({
id: oMsg.id_message,
position: {lat:Number(oMsg.latitude), lng:Number(oMsg.longitude)},
position: {lat:oMsg.latitude, lng:oMsg.longitude},
//animation: google.maps.Animation.DROP,
icon: (iKey%2==0)?'images/footprint_alt.png':'images/footprint.png',
map: oMap,
map: oMap,
draggable: false
});
@@ -83,46 +120,91 @@ oSpot.pageInit = function(asHash)
});
});
//Legend
var oLegend = document.getElementById('legend');
var asRoutes = {
teararoa: {'class': 'green', title: 'Te Araroa'},
routeburn: {'class': 'blue', title: 'Routeburn Track'},
offtrack: {'class': 'red', title: 'Hors rando'}
};
for(var sKey in asRoutes) {
var oDiv = document.createElement('div');
oDiv.className = 'line '+asRoutes[sKey]['class'];
oDiv.innerHTML = asRoutes[sKey].title;
oLegend.appendChild(oDiv);
//Recenter map once loaded to be at the center of 70% (iMapRatio) of the page
if(self.vars('mode')!='blog')
{
oProjListener = oMap.addListener('projection_changed', function() {
var iZoom = self.tmp('map').getZoom();
var oCenterLatLng = self.tmp('map').getCenter();
var oCenterPoint = self.tmp('map').getProjection().fromLatLngToPoint(oCenterLatLng);
var iOffsetX = self.tmp('$Map').width()*(iMapRatio - 1)/2;
var iOffsetPointX = new google.maps.Point(iOffsetX / Math.pow(2, iZoom), 0).x;
var oNewCenterPoint = new google.maps.Point(oCenterPoint.x - iOffsetPointX, oCenterPoint.y);
var oNewCenterLatLng = self.tmp('map').getProjection().fromPointToLatLng(oNewCenterPoint);
self.tmp('map').setCenter(oNewCenterLatLng);
oProjListener.remove();
});
}
oMap.controls[google.maps.ControlPosition.TOP_CENTER].push(oLegend);
//Legend
oMap.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push($('#legend')[0]);
self.tmp('map', oMap);
});
//Post
if(self.vars('mode')=='histo') $('#poster').hide();
else $('#posts').css('top', $('#poster').outerHeight());
$('#name').defaultVal('Nom...');
$('#post').defaultVal('Ton message...');
$('#submit').click(function(){
if($('#poster').checkForm())
{
self.get(
'add_post',
function()
{
$('#name').val('');
$('#post').val('');
updateFeed(true);
},
{name:$('#name').val(), content:$('#post').val()}
);
}
});
else {
var asPoster = {
type: 'poster',
formatted_time: '',
relative_time: 'Nouveau message'
};
getPost(asPoster).appendTo($('#poster'));
$('#name').defaultVal('Nom...');
$('#post').defaultVal('Ton message...');
$('#submit').click(function(){
if($('#poster').checkForm())
{
self.get(
'add_post',
function()
{
$('#name').val('');
$('#post').val('');
updateFeed(true);
},
{name:$('#name').val(), content:$('#post').val()}
);
}
});
}
};
function getBoundsZoomLevel(bounds, mapDim) {
var WORLD_DIM = { height: 256, width: 256 };
var ZOOM_MAX = 21;
function latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}
function zoom(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;
var lngDiff = ne.lng() - sw.lng();
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
return Math.min(latZoom, lngZoom, ZOOM_MAX);
}
function updateFeed(bFirstChunk)
{
bFirstChunk = bFirstChunk || false;
@@ -137,53 +219,69 @@ function updateFeed(bFirstChunk)
self.get('feed', function(asData){
$.each(asData, function(iKey, asPost){
var $Post = $('<div>', {'class':'post '+asPost.type});
var sRelTime = (self.vars('mode')=='histo')?asPost.formatted_time.substr(0, 10):asPost.relative_time;
var sAbsTime = asPost.formatted_time;
var $Body = {};
switch(asPost.type)
{
case 'message':
$Body = $('<div>')
.append($('<p>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude))
.append($('<p>').addIcon('fa-clock-o', true).append(sAbsTime))
.append(
$('<img>', {'class':'staticmap', src:'https://maps.googleapis.com/maps/api/staticmap?center='+asPost.latitude+','+asPost.longitude+'&zoom=13&size=400x300&maptype=satellite&markers=color:green|label:|'+asPost.latitude+','+asPost.longitude+'&key='+self.vars('google_api')})
.data('lat', asPost.latitude)
.data('lng', asPost.longitude)
.click(function(){
var $This = $(this);
self.tmp('map').panTo({lat: parseFloat($This.data('lat')), lng: parseFloat($This.data('lng'))});
self.tmp('map').setZoom(13);
})
);
sClass = 'compass';
break;
case 'picture':
var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
$Body = $('<a>', {href:asPost.path, 'data-lightbox':self.consts.title, 'data-title':sAbsTime}).append($Image);
sClass = 'image';
break;
case 'post':
$Body = $('<div>')
.append($('<p>', {'class':'message'}).text(asPost.post))
.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
sClass = 'comment';
break;
}
$Post
.append($('<div>', {'class':'header'})
.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
.append($('<div>', {'class':'body'}).append($Body))
.appendTo($Posts);
if(asPost.id) $Post.find('.index').append(' '+asPost.id);
//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
getPost(asPost).appendTo($Posts);
});
if(bFirstChunk===true) oSimpleBar = new SimpleBar($('#posts')[0]);
//else oSimpleBar.recalculate();
self.tmp('news_chunk', self.tmp('news_chunk') + 1);
$('#next_posts').toggle(Object.keys(asData).length == self.vars('chunk_size'));
}, {'chunk':self.tmp('news_chunk')});
}
function getPost(asPost) {
var $Post = $('<div>', {'class':'post '+asPost.type});
var sRelTime = (self.vars('mode')=='histo')?asPost.formatted_time.substr(0, 10):asPost.relative_time;
var sAbsTime = asPost.formatted_time;
var $Body = {};
switch(asPost.type)
{
case 'message':
$Body = $('<div>')
.append($('<p>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude))
.append($('<p>').addIcon('fa-clock-o', true).append(sAbsTime))
.append(
$('<img>', {'class':'staticmap', src:'https://maps.googleapis.com/maps/api/staticmap?center='+asPost.latitude+','+asPost.longitude+'&zoom=13&size=400x300&maptype=satellite&markers=color:green|label:|'+asPost.latitude+','+asPost.longitude+'&key='+self.vars('google_api')})
.data('lat', asPost.latitude)
.data('lng', asPost.longitude)
.click(function(){
var $This = $(this);
self.tmp('map').panTo({lat: parseFloat($This.data('lat')), lng: parseFloat($This.data('lng'))});
self.tmp('map').setZoom(13);
})
);
sClass = 'compass';
break;
case 'picture':
var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
$Body = $('<a>', {href:asPost.path, 'data-lightbox':self.consts.title, 'data-title':sAbsTime}).append($Image);
sClass = 'image';
break;
case 'post':
$Body = $('<div>')
.append($('<p>', {'class':'message'}).text(asPost.post))
.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
sClass = 'comment';
break;
case 'poster':
$Body = $('<p>', {'class':'message'})
.append($('<input>', {type:'text', id:'post', name:'post'}))
.append($('<input>', {type:'text', id:'name', name:'name'}))
.append($('<button>', {type:'button', id:'submit', name:'submit'}).addIcon('fa-send'));
sClass = 'comment';
break;
}
$Post
.append($('<div>', {'class':'header'})
.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
.append($('<div>', {'class':'body'}).append($Body));
if(asPost.id) $Post.find('.index').append(' '+asPost.id);
//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
return $Post;
}
</script>

7
script/jquery.mods.js
View File

File diff suppressed because one or more lines are too long

1
settings-sample.php
View File

@@ -11,6 +11,7 @@ class Settings
const TIMEZONE = 'Europe/Paris';
const API_KEY = '';
const MODE = Spot::MODE_BLOG; //Spot::MODE_HISTO/MODE_BLOG
const HISTO_SPAN = array('from'=>'2015-12-29 00:00:00', 'to'=>'2016-02-23 23:59:59');
const GOOGLE_MAPS_API_KEY = '';
const DEBUG = true;
}

105
style/_simplebar.scss Normal file
View File

@@ -0,0 +1,105 @@
/*!
*
* SimpleBar.js - v2.6.1
* Scrollbars, simpler.
* https://grsmto.github.io/simplebar/
*
* Made by Adrien Grsmto from a fork by Jonathan Nicol
* Under MIT License
*
*/
[data-simplebar] {
position: relative;
z-index: 0;
overflow: hidden!important;
max-height: inherit;
-webkit-overflow-scrolling: touch; /* Trigger native scrolling for mobile, if not supported, plugin is used. */
}
[data-simplebar="init"] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.simplebar-scroll-content {
overflow-x: hidden!important;
overflow-y: scroll;
min-width: 100%!important;
max-height: inherit!important;
-webkit-box-sizing: content-box!important;
box-sizing: content-box!important;
}
.simplebar-content {
overflow-y: hidden!important;
overflow-x: scroll;
-webkit-box-sizing: border-box!important;
box-sizing: border-box!important;
min-height: 100%!important;
}
.simplebar-track {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
width: 11px;
}
.simplebar-scrollbar {
position: absolute;
right: 2px;
width: 7px;
min-height: 10px;
}
.simplebar-scrollbar:before {
position: absolute;
content: "";
background: black;
border-radius: 7px;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.simplebar-track:hover .simplebar-scrollbar:before,
.simplebar-track .simplebar-scrollbar.visible:before {
/* When hovered, remove all transitions from drag handle */
opacity: 0.5;
-webkit-transition: opacity 0 linear;
transition: opacity 0 linear;
}
.simplebar-track.vertical {
top: 0;
}
.simplebar-track.vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.horizontal {
left: 0;
width: auto;
height: 11px;
}
.simplebar-track.horizontal .simplebar-scrollbar:before {
height: 100%;
left: 2px;
right: 2px;
}
.horizontal.simplebar-track .simplebar-scrollbar {
right: auto;
top: 2px;
height: 7px;
min-height: 0;
min-width: 10px;
width: auto;
}

11
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

201
style/spot.scss
View File

@@ -2,34 +2,37 @@
@import 'fa';
@import 'lightbox';
@import 'simplebar';
@import 'common';
#map {
position:absolute;
left:0;
top:0;
bottom:0;
width:70%;
background:#EEE;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
background: #EEE;
.loader {
position:absolute;
font-size:3em;
width:1em;
height:1em;
top:calc(50% - 0.5em);
left:calc(50% - 0.5em);
color:#666;
position: absolute;
font-size: 3em;
width: 1em;
height: 1em;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
color: #666;
@extend .flicker;
}
#legend {
background:white;
font-family:Roboto,Arial,sans-serif;
background: white;
font-family: Roboto, Arial, sans-serif;
background: rgba(255, 255, 255, 0.5);
border-radius:3px;
border-radius: 3px;
padding: 1px 0 0 0;
margin-top: 10px;
margin-bottom: 1em;
right: calc(30% + 3em) !important;
bottom: calc(1em - 10px) !important;
.line {
display: inline-block;
@@ -48,126 +51,138 @@
border-color: #0000ff;
}
&.red {
border-color:#FF7814;
border-color: #FF7814;
}
}
}
}
#feed {
position:absolute;
right:0;
top:0;
bottom:0;
width:30%;
overflow:auto;
position: absolute;
right: 1em;
top: 0em;
bottom: 0em;
width: calc(30% - 1em);
input, button {
border:none;
padding:0.5em 1em;
background:#F7F7F7;
border: none;
padding: 0.5em 1em;
background: #F7F7F7;
}
button {
background:#CCC;
cursor:pointer;
font-weight:bold;
background: #CCC;
cursor: pointer;
font-weight: bold;
}
button:hover {
background:#F7F7F7;
}
#poster {
padding:1em;
background:#EEE;
border-bottom:1px solid #DDD;
position:fixed;
width: calc(30% - 2em);
#post {
margin-bottom:1em;
width:calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left:1em;
width: 3em;
}
button: hover {
background: #F7F7F7;
}
#posts {
font-family: Arial;
overflow:auto;
position:absolute;
top:0;
bottom:0;
width:100%;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#poster {
input, button {
border-radius: 3px;
background-color: #d9deff;
color: #323268;
}
#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
#name {
width: calc(100% - 6em);
}
#submit {
margin-left: 1em;
background-color: #323268;
color: #B4BDFF;
margin-bottom: 0.5em;
&:hover {
background-color: #d9deff;
color: #323268;
}
}
}
.post {
margin:1em;
margin-bottom: 1em;
background: #B4BDFF;
color:#323268;
color: #323268;
border-radius: 0.5em;
width: calc(100% - 1em);
box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);
&:first-child {
margin-top: 2em;
}
.message {
margin:0.3em 0 0 0;
margin: 0.3em 0 0 0;
}
.signature {
margin:0.5em 0 0 0;
margin: 0.5em 0 0 0;
text-align: right;
font-style: italic;
}
.header {
padding: 0.5em 1em;
font-style: italic;
font-size:0.8em;
text-align:right;
font-size: 0.8em;
text-align: right;
.index {
float:left;
float: left;
font-style: normal;
}
.time {
cursor:default;
cursor: default;
}
}
.body {
padding: 0em 1em 0.5em;
}
&.picture {
background:#F3EC9F;
color:#635C28;
background: #F3EC9F;
color: #635C28;
a {
display:inline-block;
line-height:0;
margin:0;
display: inline-block;
line-height: 0;
margin: 0;
}
img {
width:100%;
image-orientation:from-image;
width: 100%;
image-orientation: from-image;
border: 1px solid white;
outline:none;
outline: none;
}
}
&.message {
background: #6DFF58;
color:#326526;
color: #326526;
p {
font-size:0.9em;
margin:0.5em 0;
font-size: 0.9em;
margin: 0.5em 0;
}
p:first-child {
margin-top:1em;
p: first-child {
margin-top: 1em;
}
.staticmap {
@@ -178,18 +193,21 @@
}
}
.fa.push {
margin-right:0.5em;
}
#next_posts {
margin: 1em;
display:none;
display: none;
button {
border-radius: 0.5em;
width:100%;
margin-top: 0;
background-color: #CCC;
color: #666;
}
button:hover {
color: #333;
}
}
.fa.push {
margin-right: 0.5em;
}
}
}
@@ -204,7 +222,7 @@
}
.info-window i {
padding-right:0.5em;
padding-right: 0.5em;
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
@@ -220,7 +238,4 @@
.bar {
height: 18px;
background: green;
}
/* Other */
}