comments + images

inc/spot.php

@@ -12,6 +12,9 @@ class Spot extends Main
 	const MSG_TABLE = 'messages';
 	const FEED_TABLE = 'feeds';
 	const SPOT_TABLE = 'spots';
+	const POST_TABLE = 'posts';
+	
+	const FORMAT_TIME = 'd/m/Y à H:i';
 	
 	public function __construct($oClassManagement, $sProcessPage)
 	{
@@ -35,7 +38,8 @@ class Spot extends Main
 			(
 					self::MSG_TABLE		=> array('ref_msg_id', MySqlManager::getId(self::FEED_TABLE), 'type', 'latitude', 'longitude', 'timestamp', 'unix_timestamp', 'content', 'battery_state'),
 					self::FEED_TABLE	=> array('ref_feed_id', MySqlManager::getId(self::SPOT_TABLE), 'name', 'description', 'status'),
-					self::SPOT_TABLE	=> array('ref_spot_id', 'name', 'model')
+					self::SPOT_TABLE	=> array('ref_spot_id', 'name', 'model'),
+					self::POST_TABLE	=> array('name', 'content')
 			),
 			'types' 			=>	array
 			(
@@ -52,7 +56,7 @@ class Spot extends Main
 					'model'			=> "VARCHAR(20)",
 					'ref_feed_id'	=> "VARCHAR(40)",
 					'description'	=> "VARCHAR(100)",
-					'status'		=> "VARCHAR(10)"
+					'status'		=> "VARCHAR(10)",
 			),
 			'constraints'		=>	array
 			(
@@ -80,8 +84,8 @@ class Spot extends Main
 	private function getFeed($sRefFeedId=self::FEED_ID)
 	{
 		$sUrl = self::FEED_HOOK.$sRefFeedId.self::FEED_TYPE_JSON;
-		$sContent = file_get_contents($sUrl);
+		//$sContent = file_get_contents($sUrl);
-		//$sContent = '{"response":{"feedMessageResponse":{"count":1,"feed":{"id":"0Y5LrvigElWeAieBGnFol0KBEuOTkFJmm","name":"Te Araroa","description":"Te Araroa","status":"ACTIVE","usage":0,"daysRange":7,"detailedMessageShown":false},"totalCount":1,"activityCount":0,"messages":{"message":{"@clientUnixTime":"0","id":477259564,"messengerId":"0-2489517","messengerName":"Francois","unixTime":1449002345,"messageType":"OK","latitude":48.85129,"longitude":2.40491,"modelId":"SPOT3","showCustomMsg":"N","dateTime":"2015-12-01T20:39:05+0000","messageDetail":"","batteryState":"GOOD","hidden":0,"messageContent":"Jusque là , tout va bien ! Click sur le lien en dessous pour voir où je suis :)\r\n\r\n@Clara: <3"}}}}}';
+		$sContent = '{"response":{"feedMessageResponse":{"count":1,"feed":{"id":"0Y5LrvigElWeAieBGnFol0KBEuOTkFJmm","name":"Te Araroa","description":"Te Araroa","status":"ACTIVE","usage":0,"daysRange":7,"detailedMessageShown":false},"totalCount":1,"activityCount":0,"messages":{"message":{"@clientUnixTime":"0","id":477259564,"messengerId":"0-2489517","messengerName":"Francois","unixTime":1449002345,"messageType":"OK","latitude":48.85129,"longitude":2.40491,"modelId":"SPOT3","showCustomMsg":"N","dateTime":"2015-12-01T20:39:05+0000","messageDetail":"","batteryState":"GOOD","hidden":0,"messageContent":"Jusque là , tout va bien ! Click sur le lien en dessous pour voir où je suis :)\r\n\r\n@Clara: <3"}}}}}';
 		return json_decode($sContent, true);
 	}
 	
@@ -91,8 +95,6 @@ class Spot extends Main
 		$asMsgs = $asData['response']['feedMessageResponse']['messages'];
 		$asFeed = $asData['response']['feedMessageResponse']['feed'];
 		
-		$this->oMySql->setTrace(true);
-		
 		if(!empty($asMsgs))
 		{
 			//Update Spot Info
@@ -138,35 +140,83 @@ class Spot extends Main
 		$this->oMySql->insertUpdateRow(self::MSG_TABLE, $test, array('ref_msg_id'));
 		*/
 		
-		$bSuccess = true;
-		$sDesc = '';
-		
 		//Check last message & update feed if necessary (max once a day)
 		$sLastMsg = $this->oMySql->selectValue(self::FEED_TABLE, 'led', array('ref_feed_id'=>$sRefFeedId));
-		if(mb_substr($sLastMsg, 0, 10) != date('Y-m-d'))
+		if(mb_substr($sLastMsg, 0, 10) != date('Y-m-d')) $this->updateFeed($sRefFeedId);
-		{
-			$this->updateFeed($sRefFeedId);
-		}
 
-		$asMessages = $this->oMySql->selectRows(array('from'=>self::MSG_TABLE));
+		//Extract messages
-		if(empty($asMessages))
+		$asMessages = $this->getSpotMessages();
-		{
+		$bSuccess = !empty($asMessages);
-			$bSuccess = false;
+		$sDesc = $bSuccess?'':self::NO_DATA;
-			$sDesc = self::NO_DATA;
-		}
-		else
-		{
-			foreach($asMessages as $iKey=>$asMessage)
-			{
-				$iUnixTimeStamp = strtotime($asMessage['timestamp']);
-				$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
-				$asMessages[$iKey]['formatted_time'] = date('d/m/Y à H:i', $iUnixTimeStamp);
-			}
-		}
 		
 		return self::getJsonResult($bSuccess, $sDesc, $asMessages);
 	}
 	
+	private function getSpotMessages()
+	{
+		$asMessages = $this->oMySql->selectRows(array('from'=>self::MSG_TABLE));
+		foreach($asMessages as $iKey=>$asMessage)
+		{
+			$iUnixTimeStamp = strtotime($asMessage['timestamp']);
+			$asMessages[$iKey]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
+			$asMessages[$iKey]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
+		}
+		return $asMessages;
+	}
+	
+	public function getNewsFeed()
+	{
+		$asFeed = array();
+		
+		//Messages
+		$asMessages = $this->getSpotMessages();
+		foreach($asMessages as $asMessage)
+		{
+			$iId = $asMessage['unix_timestamp'] * -1;
+			$asFeed[$iId] = $asMessage;// array('type'=>'message', 'time'=>$asMessage['relative_time'], 'text'=>$asMessage['relative_time']);
+			$asFeed[$iId]['type'] = 'message';
+			$asFeed[$iId]['id'] = $asMessage[MySqlManager::getId(self::MSG_TABLE)];
+		}
+		
+		//Pictures
+		$asPicPaths = glob('files/*.*');
+		foreach($asPicPaths as $iKey=>$sPicPath)
+		{
+			//Finding picture timestamp
+			$asPicInfo = self::getPicInfo($sPicPath);
+			$iPicTimeStamp = $asPicInfo['timestamp'];
+			
+			//Preparing pictures sorting key and related info
+			$asFeed[$iPicTimeStamp*-1] = array(	'type'			=> 'picture',
+												'id'			=> $iKey,
+												'path'			=> $sPicPath,
+												'rotate'		=> $asPicInfo['rotate'],
+												'formatted_time'=> date(self::FORMAT_TIME, $iPicTimeStamp),
+												'relative_time'	=> Toolbox::getDateTimeDesc($iPicTimeStamp));
+		}
+		
+		//Post
+		$asPosts = $this->oMySql->selectRows(array('from'=>self::POST_TABLE));
+		foreach($asPosts as $iKey=>$asPost)
+		{
+			$iUnixTimeStamp = strtotime($asPost['led']);
+			$iId = $iUnixTimeStamp * -1;
+			$asFeed[$iId] = array('name'=>Toolbox::mb_ucwords($asPost['name']), 'post'=>$asPost['content'], 'type'=>'post');;
+			$asFeed[$iId]['relative_time'] = Toolbox::getDateTimeDesc($iUnixTimeStamp);
+			$asFeed[$iId]['formatted_time'] = date(self::FORMAT_TIME, $iUnixTimeStamp);
+		}
+		
+		ksort($asFeed);
+		return self::getJsonResult(true, '', $asFeed);
+	}
+	
+	public function addPost($sName, $sPost)
+	{
+		$asData = array('name'=>mb_strtolower(trim($sName)), 'content'=>trim($sPost));
+		$iPostId = $this->oMySql->insertRow(self::POST_TABLE, $asData);
+		return self::getJsonResult(($iPostId > 0), '');
+	}
+	
 	public function upload()
 	{
 		$this->oClassManagement->incClass('uploader', true);
@@ -174,6 +224,31 @@ class Spot extends Main
 		$oUploader->init();
 		return $oUploader->getBody();
 	}
+	
+	public static function getPicInfo($sPicPath)
+	{
+		$iPicTimeStamp = 0;
+		$asExif = exif_read_data($sPicPath, 0, true);
+		
+		//Timestamp
+		if(array_key_exists('DateTimeOriginal', $asExif['EXIF'])) $iPicTimeStamp = strtotime($asExif['EXIF']['DateTimeOriginal']);
+		else $iPicTimeStamp = $asExif['FILE']['FileDateTime'];
+	
+		//Time Zone
+		//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'];
+		}
+		
+		return array('timestamp'=>$iPicTimeStamp, 'rotate'=>$sRotate);
+	}
 }
 
 ?>

index.php

@@ -18,6 +18,8 @@ ToolBox::fixGlobalVars(isset($argv)?$argv:array());
 //Available variables
 $sAction = isset($_REQUEST['a'])?$_REQUEST['a']:'';
 $sPage = isset($_GET['p'])?$_GET['p']:'index';
+$sName = isset($_GET['name'])?$_GET['name']:'';
+$sContent = isset($_GET['content'])?$_GET['content']:'';
 
 //Initiate class
 $oSpot = new Spot($oClassManagement, __FILE__);
@@ -30,9 +32,15 @@ if($sAction!='')
 		case 'messages':
 			$sResult = $oSpot->getMessages();
 			break;
+		case 'feed':
+			$sResult = $oSpot->getNewsFeed();
+			break;
 		case 'upload':
 			$sResult = $oSpot->upload();
 			break;
+		case 'add_post':
+			$sResult = $oSpot->addPost($sName, $sContent);
+			break;
 		default:
 			$sResult = Spot::getJsonResult(false, Spot::NOT_FOUND);
 	}

masks/messages.html

@@ -2,12 +2,24 @@
 	<div id="map">
 		<div class="loader fa fa-map"></div>
 	</div>
+	<div id="feed">
+		<div id="poster">
+			<input id="post" name="post" type="text" />
+			<input id="name" name="name" type="text" />
+			<input id="submit" name="submit" type="button" value="+" />
+		</div>
+		<div id="posts"></div>
+	</div>
 </div>
 <script type="text/javascript">
 oSpot.pageInit = function(asHash)
 {
 	self.get('messages', function(oMessages){
 		
+		//Build Feed
+		updateFeed();
+		//setInterval(updateFeed, 60 * 1000); //refresh every minute
+		
 		//Building messages
 		aoMessages = [];
 		$.each(oMessages, function(iKey, oMsg)
@@ -50,17 +62,6 @@ oSpot.pageInit = function(asHash)
 			{
 				values:aoMessages,
 				options:{draggable:false},
-				/*events:{click:function(marker, event, context)
-				{
-					var asHash = self.getHash();
-					var sDestHash = asHash.items[0] || '';
-					var sSafeDest = self.tmp(['safedest', sDestHash]);
-					if(context.id!=sSafeDest)
-					{
-						self.setHash('honeymoon', [self.tmp(['hash', context.id])]);
-					}
-					else self.zoomIn(marker, event, context);
-				}}*/
 				events:
 				{
 					mouseover: function(marker, event, context)
@@ -83,5 +84,65 @@ oSpot.pageInit = function(asHash)
 		});
 		self.tmp('map', $Map.gmap3("get"));
 	});
+	
+	//Post
+	$('#name').defaultVal('Nom...');
+	$('#post').defaultVal('Ton message...');
+	$('#submit').click(function(){
+		if($('#poster').checkForm())
+		{
+			self.get(
+				'add_post',
+				function()
+				{
+					$('#name').val('');
+					$('#post').val('');
+					updateFeed();
+				},
+				{name:$('#name').val(), content:$('#post').val()}
+			);
+		}
+	});
 };
+
+function updateFeed()
+{
+	self.get('feed', function(asData){
+		var $Posts = $('#posts').empty();
+		$.each(asData, function(iKey, asPost){
+			var $Post = $('<div>', {'class':'post '+asPost.type});
+			var sRelTime = asPost.relative_time;
+			var sAbsTime = asPost.formatted_time;
+			var $Body = {};
+			switch(asPost.type)
+			{
+				case 'message':
+					$Body = $('<span>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude);
+					sClass = 'compass';
+					break;
+				case 'picture':
+					var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
+					$Body = $('<a>', {href:asPost.path, 'data-lightbox':'image-'+asPost.id, 'data-title':asPost.formatted_time}).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());
+		});
+	});
+}
 </script>

script/spot.js

@@ -226,7 +226,44 @@ function setElem(aoAnchor, asPath, oValue)
 	}
 }
 
-$.prototype.addIcon = function(sIcon)
+$.prototype.addIcon = function(sIcon, bMargin)
 {
-	return $(this).prepend($('<i>', {'class':'fa '+sIcon}));
+	bMargin = bMargin || false;
+	return $(this).prepend($('<i>', {'class':'fa '+sIcon+(bMargin?' push':'')}));
+};
+
+$.prototype.defaultVal = function(sDefaultValue)
+{
+	$(this)
+		.data('default_value', sDefaultValue)
+		.val(sDefaultValue)
+		.addClass('defaultText')
+		.focus(function()
+		{
+			var $This = $(this);
+			if($This.val() == $This.data('default_value')) $This.val('').removeClass('defaultText');
+		})
+		.blur(function()
+		{
+			var $This = $(this);
+			if($This.val() == '') $This.val($This.data('default_value')).addClass('defaultText');
+		});
+};
+
+$.prototype.checkForm = function(sSelector)
+{
+	sSelector = sSelector || 'input[type="text"], textarea';
+	var $This = $(this);
+	var bOk = true;
+	$This.find(sSelector).each(function()
+	{
+		$This = $(this);
+		bOk = bOk && $This.val()!='' && $This.val()!=$This.data('default_value');
+	});
+	return bOk;
+};
+
+$.prototype.cascadingDown = function(sDuration)
+{
+	return $(this).slideDown(sDuration, function(){$(this).next().cascadingDown(sDuration);});
 };

style/_lightbox.scss

@@ -0,0 +1,206 @@
+/* Preload images */
+body:after {
+  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
+  display: none;
+}
+
+body.lb-disable-scrolling {
+  overflow: hidden;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+}
+
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  max-width: inherit;
+  border-radius: 3px;
+}
+
+.lightbox a img {
+  border: none;
+}
+
+.lb-outerContainer {
+  position: relative;
+  background-color: white;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  border-radius: 4px;
+}
+
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-container {
+  padding: 4px;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+}
+
+.lb-prev, .lb-next {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a.lb-prev {
+  width: 34%;
+  left: 0;
+  float: left;
+  background: url(../images/prev.png) left 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-prev:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-nav a.lb-next {
+  width: 64%;
+  right: 0;
+  float: right;
+  background: url(../images/next.png) right 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-next:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url(../images/close.png) top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}

style/spot.css

@@ -2746,7 +2746,7 @@
   left: 0;
   top: 0;
   bottom: 0;
-  width: 100%;
+  width: 70%;
   background: #EEE; }
 
 /* line 15, spot.scss */
@@ -2759,24 +2759,114 @@
   left: calc(50% - 0.5em);
   color: #666; }
 
+/* line 26, spot.scss */
+#feed {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 30%;
+  overflow: auto; }
+  /* line 34, spot.scss */
+  #feed #poster {
+    padding: 1em;
+    background: #EEE;
+    border-bottom: 1px solid #DDD; }
+    /* line 39, spot.scss */
+    #feed #poster #post, #feed #poster #name, #feed #poster #submit {
+      width: calc(100% - 2em);
+      border: none;
+      padding: 0.5em 1em; }
+    /* line 45, spot.scss */
+    #feed #poster #post {
+      margin-bottom: 1em; }
+    /* line 49, spot.scss */
+    #feed #poster #name {
+      width: calc(100% - 5.5em); }
+    /* line 53, spot.scss */
+    #feed #poster #submit {
+      width: 3em;
+      background: #CCC;
+      cursor: pointer;
+      font-weight: bold; }
+  /* line 61, spot.scss */
+  #feed #posts {
+    font-family: Arial; }
+    /* line 64, spot.scss */
+    #feed #posts .post {
+      margin: 1em;
+      background: #B4BDFF;
+      color: #323268;
+      border-radius: 0.5em; }
+      /* line 70, spot.scss */
+      #feed #posts .post .message {
+        margin: 0.3em 0 0 0; }
+      /* line 73, spot.scss */
+      #feed #posts .post .signature {
+        margin: 0.5em 0 0 0;
+        text-align: right; }
+    /* line 79, spot.scss */
+    #feed #posts .header {
+      padding: 0.5em 1em;
+      font-style: italic;
+      font-size: 0.8em;
+      text-align: right; }
+      /* line 85, spot.scss */
+      #feed #posts .header .index {
+        float: left;
+        font-style: normal; }
+    /* line 91, spot.scss */
+    #feed #posts .body {
+      padding: 0em 1em 0.5em; }
+    /* line 95, spot.scss */
+    #feed #posts .post.picture {
+      background: #F3EC9F;
+      color: #635C28; }
+      /* line 99, spot.scss */
+      #feed #posts .post.picture a {
+        display: inline-block;
+        line-height: 0;
+        margin: 0; }
+      /* line 105, spot.scss */
+      #feed #posts .post.picture img {
+        width: 100%;
+        image-orientation: from-image;
+        border: 1px solid white;
+        outline: none; }
+    /* line 113, spot.scss */
+    #feed #posts .post.message {
+      background: #6DFF58;
+      color: #326526; }
+    /* line 118, spot.scss */
+    #feed #posts .fa.push {
+      margin-right: 0.5em; }
+
 /* Info Window */
-/* line 28, spot.scss */
+/* line 126, spot.scss */
 .info-window h1 {
   font-size: 1.2em; }
 
-/* line 31, spot.scss */
+/* line 129, spot.scss */
 .info-window p {
   font-size: 1.0em; }
 
-/* line 35, spot.scss */
+/* line 133, spot.scss */
 .info-window i {
   padding-right: 0.5em;
   font-size: 1.33333333em;
   line-height: 0.75em;
   vertical-align: -15%; }
 
-/* line 43, spot.scss */
+/* line 141, spot.scss */
 .info-window .battery {
   text-transform: capitalize; }
 
+/* Upload */
+/* line 147, spot.scss */
+.bar {
+  height: 18px;
+  background: green; }
+
+/* Other */
+
 /*# sourceMappingURL=spot.css.map */

style/spot.scss

@@ -8,7 +8,7 @@
 	left:0;
 	top:0;
 	bottom:0;
-	width:100%;
+	width:70%;
 	background:#EEE;
 }
 
@@ -23,6 +23,104 @@
 	@extend .flicker;
 }
 
+#feed {
+	position:absolute;
+	right:0;
+	top:0;
+	bottom:0;
+	width:30%;
+	overflow:auto;
+	
+	#poster {
+		padding:1em;
+		background:#EEE;
+		border-bottom:1px solid #DDD;
+		
+		#post, #name, #submit {
+			width:calc(100% - 2em);
+			border:none;
+			padding:0.5em 1em;
+		}
+		
+		#post {
+			margin-bottom:1em;
+		}
+		
+		#name {
+			width: calc(100% - 5.5em);
+		}
+		
+		#submit {
+			width: 3em;
+			background:#CCC;
+			cursor:pointer;
+			font-weight:bold;
+		}
+	}
+	
+	#posts {
+		font-family: Arial;
+		
+		.post {
+			margin:1em;
+			background: #B4BDFF;
+			color:#323268;
+			border-radius: 0.5em;
+			
+			.message {
+				margin:0.3em 0 0 0;
+			}
+			.signature {
+				margin:0.5em 0 0 0;
+				text-align: right;
+			}
+		}
+		
+		.header {
+			padding: 0.5em 1em;
+			font-style: italic;
+			font-size:0.8em;
+			text-align:right;
+			
+			.index {
+				float:left;
+				font-style: normal;
+			}
+		}
+		
+		.body {
+			padding: 0em 1em 0.5em;
+		}
+		
+		.post.picture {
+			background:#F3EC9F;
+			color:#635C28;
+			
+			a {
+				display:inline-block;
+				line-height:0;
+				margin:0;
+			}
+			
+			img {
+				width:100%;
+				image-orientation:from-image;
+				border: 1px solid white;
+				outline:none;
+			}
+			
+		}
+		.post.message {
+			background: #6DFF58;
+			color:#326526;
+		}
+		
+		.fa.push {
+			margin-right:0.5em;
+		}
+	}
+}
+
 /* Info Window */
 
 .info-window h1 {
@@ -50,3 +148,6 @@
 	height: 18px;
 	background: green;
 }
+
+/* Other */
+