adding read page and side calendar

inc/mythoughts.php

@@ -34,6 +34,7 @@ class MyThoughts extends Main
 	const SIZE_16 = '16';
 	const SIZE_18 = '18';
 	const SIZE_20 = '20';
+	const LAST_THOUGHT_LIMIT = 60*60*24;
 	
 	//Format
 	const OBJ = 'object';
@@ -140,7 +141,7 @@ class MyThoughts extends Main
 		);
 		
 		//Pages
-		$asPages = array('logon', 'logoff', 'write', 'settings', 'template');
+		$asPages = array('logon', 'logoff', 'write', 'read', 'settings', 'template');
 		foreach($asPages as $sPage) $asGlobalVars['consts']['pages'][$sPage] = $this->getPageContent($sPage);
 		
 		//Main Page
@@ -163,7 +164,7 @@ class MyThoughts extends Main
 		return array(
 			'tables' =>	array(
 				self::USER_TABLE		=> array(Db::getText(self::USER_TABLE), 'nickname', 'pass', 'cookie'),
-				Thought::THOUGHT_TABLE	=> array(Db::getId(self::USER_TABLE), Db::getText(Thought::THOUGHT_TABLE)),
+				Thought::THOUGHT_TABLE	=> array(Db::getId(self::USER_TABLE), Db::getText(Thought::THOUGHT_TABLE), 'created'),
 				self::SETTINGS_TABLE	=> array(Db::getId(self::USER_TABLE), Db::getText(self::SETTINGS_TABLE), 'value')
 			),
 			'types'	=>	array(
@@ -172,6 +173,7 @@ class MyThoughts extends Main
 				'pass'								=> "varchar(256) NOT NULL",
 				'cookie'							=> "varchar(255)",
 				Db::getText(Thought::THOUGHT_TABLE)	=> "longtext",
+				'created'							=> "timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP",
 				Db::getText(self::SETTINGS_TABLE)	=> "varchar(20) NOT NULL",
 				'value'								=> "varchar(20) NOT NULL"
 			),
@@ -188,13 +190,9 @@ class MyThoughts extends Main
 	
 	public function getThought($iThoughtId, $sFormat=self::OBJ)
 	{
-		$oThought = new Thought($this->oDb);
+		$oThought = new Thought($this->oDb, $this->oAuth->getUserId());
 		
-		if($iThoughtId=='last')
+		if($iThoughtId=='last') $oThought->openLast(self::LAST_THOUGHT_LIMIT);
-		{
-			$oThought->setUserId($this->oAuth->getUserId());
-			$oThought->openLast();
-		}
 		else $oThought->open($iThoughtId);
 		
 		switch($sFormat)
@@ -208,15 +206,9 @@ class MyThoughts extends Main
 		}
 	}
 
-	public function updateThought($asOps, $iThoughtId=0, $iUserId=-1)
+	public function updateThought($asOps, $iThoughtId=0)
 	{
-		$oThought = new Thought($this->oDb, $iThoughtId);
+		$oThought = new Thought($this->oDb, $this->oAuth->getUserId(), $iThoughtId);
-		
-		if($oThought->getId() == 0) {
-			if($iUserId==-1) $iUserId = $this->oAuth->getUserId();
-			if($iUserId!=0) $oThought->setUserId($iUserId);
-			else $this->addError('Adding a thought with no user id');
-		}
 		
 		$oThought->setOps($asOps);
 		$iThoughtId = $oThought->save();
@@ -226,12 +218,26 @@ class MyThoughts extends Main
 		return self::getJsonResult($bSuccess, $sDesc, $this->getThought($iThoughtId, self::ARRAY));
 	}
 	
+	public function getThoughtDates()
+	{
+		$asThoughts = Thought::getThoughtDates($this->oDb, $this->oAuth->getUserId());
+		foreach($asThoughts as &$asThought) $asThought['created_f'] = self::formatDate($asThought['created'], 'j M');
+		return self::getJsonResult(true, '', $asThoughts);
+	}
+	
 	/* Static toolbox functions */
 
 	public static function getSafeNickName($sNickName)
 	{
 		return $sNickName;
 	}
+	
+	private static function formatDate($iTime, $sFormat, $sField='')
+	{
+		$iTime = ($sField == '')?$iTime:$iTime[$sField];
+		$iTime = is_numeric($iTime)?$iTime:strtotime($iTime);
+		return date($sFormat, $iTime);
+	}
 }
 
 ?>

inc/thought.php

@@ -7,6 +7,7 @@ class Thought extends PhpObject
 	private $iId;
 	private $iUserId;
 	private $asOps;
+	private $iCreateTimestamp;
 	private $sLed;
 	
 	/**
@@ -15,10 +16,11 @@ class Thought extends PhpObject
 	 */
 	private $oDb;
 	
-	public function __construct(&$oDb, $iId=0)
+	public function __construct(&$oDb, $iUserId, $iId=0)
 	{
 		parent::__construct(__CLASS__, Settings::DEBUG);
 		$this->oDb = $oDb;
+		$this->setUserId($iUserId);
 		$this->setId($iId);
 	}
 	
@@ -33,7 +35,7 @@ class Thought extends PhpObject
 		if($this->iId > 0 && $bOpen) $this->open($this->iId);
 	}
 	
-	public function setUserId($iUserId)
+	private function setUserId($iUserId)
 	{
 		$this->iUserId = $iUserId;
 	}
@@ -44,26 +46,34 @@ class Thought extends PhpObject
 		if($bSave) return $this->save();
 	}
 	
-	public function openLast()
+	public function openLast($iLimit=0)
 	{
 		$iId = $this->oDb->selectValue(
 			self::THOUGHT_TABLE,
 			"MAX(".Db::getId(self::THOUGHT_TABLE).")",
 			array(Db::getId(MyThoughts::USER_TABLE) => $this->iUserId));
 		
-		$this->open($iId);
+		$bSuccess = ($iId > 0);
+		if($bSuccess) $this->open($iId);
+		return $bSuccess;
 	}
 	
 	public function open($iId)
 	{
-		if($iId>0)
+		if($iId > 0)
 		{
-			$asInfo = $this->oDb->selectRow(self::THOUGHT_TABLE, $iId);
+			if($this->iUserId > 0) {
+				$asWhere = array(Db::getId(self::THOUGHT_TABLE)=>$iId, Db::getId(MyThoughts::USER_TABLE) => $this->iUserId);
+				$asInfo = $this->oDb->selectRow(self::THOUGHT_TABLE, $asWhere);
+				
 				$this->iId = $asInfo[Db::getId(self::THOUGHT_TABLE)];
 				$this->iUserId = $asInfo[Db::getId(MyThoughts::USER_TABLE)];
 				$this->asOps = self::decodeThought($asInfo[Db::getText(self::THOUGHT_TABLE)]);
+				$this->iCreateTimestamp = strtotime($asInfo['created']);
 				$this->sLed = $asInfo['led'];
 			}
+			else $this->addError('getting thought info with no user id');
+		}
 		else $this->addError('getting thought info with no thought id');
 	}
 	
@@ -86,10 +96,24 @@ class Thought extends PhpObject
 			'id'		=> $this->iId,
 			'id_user'	=> $this->iUserId,
 			'ops'		=> $this->asOps,
+			'created'	=> $this->iCreateTimestamp,
+			'created_f'	=> date('l, j F', $this->iCreateTimestamp),
 			'led'		=> $this->sLed
 		);
 	}
 	
+	public static function getThoughtDates(Db $oDb, int $iUser)
+	{
+		$asInfo = array(
+			'select'	=> array(Db::getId(self::THOUGHT_TABLE), 'created'),
+			'from'		=> self::THOUGHT_TABLE,
+			'constraint'=> array(Db::getId(MyThoughts::USER_TABLE) => $iUser),
+			'orderBy'	=> array('created'=>'DESC')
+		);
+			
+		return $oDb->selectRows($asInfo);
+	}
+	
 	private static function encodeThought($sthought)
 	{
 		return base64_encode(serialize(explode("\n", self::shuffleText(json_encode($sthought)))));
@@ -102,7 +126,7 @@ class Thought extends PhpObject
 	
 	private static function shuffleText($sText)
 	{
-		$sRandomText = "let's_mess%a&bit;with~it,!just§for¨the^sake*of-it";
+		$sRandomText = Settings::RAND_TEXT;
 		for($iIndex=0; $iIndex < strlen($sText); $iIndex++)
 		{
 			$sText[$iIndex] = $sRandomText[$iIndex%strlen($sRandomText)] ^ $sText[$iIndex];

index.php

@@ -55,6 +55,9 @@ elseif($sAction!='' && $bLoggedIn)
 		case 'update':
 			$sResult = $oMyThoughts->updateThought($sContent, $iId);
 			break;
+		case 'thoughts':
+			$sResult = $oMyThoughts->getThoughtDates();
+			break;
 		default:
 			$sResult = MyThoughts::getJsonResult(false, MyThoughts::NOT_FOUND);
 	}

masks/index.html

@@ -8,7 +8,7 @@
 	<script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script>
 	<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
 	<script type="text/javascript" src="scripts/quill.min.js"></script>
-	<script type="text/javascript" src="scripts/functions.js"></script>
+	<script type="text/javascript" src="scripts/common.js"></script>
 	<script type="text/javascript" src="scripts/mythoughts.js"></script>
 	<link rel="shortcut icon" href="images/favicon2.ico" />
 	<title>My Thoughts</title>

masks/logoff.html

@@ -3,7 +3,6 @@
 oMyThoughts.pageInit = function(asHash, bFirstPage)
 {
 	document.cookie = self.consts.cookie+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
-	
 	location.href = self.consts.root;
 };
 </script>

masks/read.html

@@ -1,14 +1,22 @@
-<p class="date">Thoughts on #date#.</p>
+<div id="read">
-<div class="read round_right">
+	<div class="header date"></div>
-	<!-- [PART] THOUGHT [START] -->
+	<div class="body"></div>
-	<div class="thought">
-		<div class="time">At #time#</div>
-		<div class="paragraphs">
-			<!-- [PART] THOUGHT_PARA [START] -->
-			<p>#thought_paragraph#</p>
-			<!-- [PART] THOUGHT_PARA [END] -->
-			<p style="text-align:center;text-indent:0;font-family:Comic sans MS;">*&nbsp;*&nbsp;*</p>
-		</div>
-	</div>
-	<!-- [PART] THOUGHT [END] -->
 </div>
+<script type="text/javascript">
+oMyThoughts.pageInit = function(asHash, bFirstPage)
+{
+	Tools.ajax(
+		'load',
+		function(asData){
+			var $Read = $('#read');
+			$Read.find('.header').append('Thoughts on '+asData.created_f);
+			$Read.find('.body').html(Tools.quill2Html(asData.ops));
+		},
+		{id: asHash.items[0]},
+	);
+}
+
+oMyThoughts.onSamePageMove = function(asHash) {
+	return true;
+}
+</script>

masks/template.html

@@ -7,6 +7,9 @@
 	</ul>
 </div>
 <div id="main"></div>
+<div id="side">
+	<div class="tag write"><a href="#write" class="fal fa-write"></a></div>
+</div>		
 <footer>
 	<span>Designed and powered by Franzz &amp; Clarita. </span>
 	<span>My Thoughts Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License.</span>

masks/write.html

@@ -2,13 +2,14 @@
 	<div id="write_feedback"></div>
 	<div id="editor_container">
 		<div id="editor_content">
+			<div id="context"></div>
 			<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
 		</div>
 	</div>
 	<div id="nav">
-		<div class="nav-elem"><a class="fal fa-fw fa-prev"></a></div>
+		<div class="nav-elem prev"><a class="fal fa-fw fa-prev"></a></div>
-		<div class="nav-elem"><span class="page_nb"></span></div>
+		<div class="nav-elem curr"></div>
-		<div class="nav-elem"><a class="fal fa-fw fa-next"></a></div>
+		<div class="nav-elem next"><a class="fal fa-fw fa-next"></a></div>
 	</div>
 </div>
 <script type="text/javascript">
@@ -16,7 +17,7 @@
 	{
 		self.vars('id', 0);
 		self.vars('default_text', "\n");
-		self.vars('page', 0);
+		self.vars('quill_page', 0);
 		self.vars('keystrokes', 0);
 		self.vars('saving', false);
 		
@@ -26,6 +27,7 @@
 		//Quill Engine
 		oQuill = new Quill('#editor', {
 			theme: 'bubble',
+			placeholder: 'What\'s on your mind?',
 			modules:
 			{
 				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
@@ -41,19 +43,19 @@
 		//Key strokes & mouse Events
 		$('#editor').keydown(function(e){
 			if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
-			else if(e.which==33) $('.fa-prev').click();
+			else if(e.which==33) $('.prev').click();
-			else if(e.which==34) $('.fa-next').click();
+			else if(e.which==34) $('.next').click();
 		});
 		oQuill.on('text-change', onChange);
 		$(window).mousewheel(function(turn, iDelta) {
-			var iNewPage = self.vars('page') + ((iDelta > 0)?-1:1);
+			var iNewPage = self.vars('quill_page') + ((iDelta > 0)?-1:1);
 			moveToPage(iNewPage);
 			return false;
 		});
 		
 		//Page buttons
-		$('.fa-prev').click(function(){moveToPage(self.vars('page')-1);});
+		$('.prev').click(function(){moveToPage(self.vars('quill_page')-1);});
-		$('.fa-next').click(function(){moveToPage(self.vars('page')+1);});
+		$('.next').click(function(){moveToPage(self.vars('quill_page')+1);});
 		
 		//Init
 		oQuill.focus();
@@ -82,7 +84,7 @@
 		var $Page = $('#editor_container');
 		var iHeight = $Page.height();
 		
-		var iLineHeight = parseInt($('#editor_container p').css('line-height'));
+		var iLineHeight = parseInt($('#editor p').css('line-height'));
 		var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
 		$Page.height(iMaxHeight+'px');
 		
@@ -97,10 +99,22 @@
 			'load', 
 			function(sDesc, asData)
 			{
-				self.vars('id', asData.id);
+				if(asData.ops.length != 1 || asData.ops[0].insert != '' && false) {
+					var $Date = $('<p>', {'class':'entry_date'}).text(asData.created_f);
+		
+					var $Sep = $('<div>', {'class':'entry_sep'})
+								.text('~')
+								.click(function(){oQuill.focus();});
+					
 					oQuill.setContents(asData.ops);
-				//$('#context').append($('#editor .ql-editor').html());
+					$('#context')
-				//oQuill.setContents([]);
+						.append($('#editor .ql-editor').html())
+						.append($Date)
+						.append($Sep);
+						
+					oQuill.setContents([]);
+				}
+				else oQuill.focus();
 				if(typeof fCallback == 'function') fCallback();
 			},
 			{id: 'last'}
@@ -118,8 +132,8 @@
 				var bSelection = (typeof e != 'undefined')?e.shiftKey:false;
 				var oSelBound = oQuill.getBounds(range.index, range.length);
 				
-				var oEditorCurBound = {	top:	self.vars('page-height') * self.vars('page'),
+				var oEditorCurBound = {	top:	self.vars('page-height') * self.vars('quill_page'),
-										bottom:	self.vars('page-height') * (self.vars('page') + 1)};
+										bottom:	self.vars('page-height') * (self.vars('quill_page') + 1)};
 				
 				//console.log('oEditorCurBound: top='+oEditorCurBound.top+' bottom='+oEditorCurBound.bottom);
 				//console.log('---------------------');
@@ -177,7 +191,7 @@
 				
 				//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
 			
-				var sNewPage = self.vars('page');
+				var sNewPage = self.vars('quill_page');
 				if(	oSelBound.top < oEditorCurBound.top && (!bSelection || sCursorPos == 'first') ||
 					oSelBound.bottom < oEditorCurBound.top && (!bSelection || sCursorPos == 'last')) {
 					sNewPage--;
@@ -200,22 +214,22 @@
 		
 		if(iNewPage >= 0 && iNewPage <= iLastPage)
 		{
-			if(iNewPage!=self.vars('page'))
+			if(iNewPage!=self.vars('quill_page'))
 			{
-				var iOldPage = self.vars('page');
+				var iOldPage = self.vars('quill_page');
-				self.vars('page', iNewPage);
+				self.vars('quill_page', iNewPage);
 				
 				//Page Position
-				var iOffset = self.vars('page') * self.vars('page-height') * -1;
+				var iOffset = self.vars('quill_page') * self.vars('page-height') * -1;
 				self.vars('editor').css('top', iOffset);
 			}
 			
 			//Page Number
-			$('.page_nb').text(self.vars('page') + 1);
+			//$('.curr').text(self.vars('quill_page') + 1);
 			
 			//Detect First/Last Page
-			$('.fa-prev').toggle(self.vars('page')!=0);
+			$('.prev').toggleClass('visible', self.vars('quill_page')!=0);
-			$('.fa-next').toggle(self.vars('page')!=iLastPage);
+			$('.next').toggleClass('visible', self.vars('quill_page')!=iLastPage);
 		}
 	}
 	
@@ -237,13 +251,14 @@
 			else {
 				self.vars('saving', true);
 				var sContent =  oQuill.getContents().ops;
-				if(sContent[0] != self.vars('default_text')) {
+				if(!isQuillEmpty() || self.vars('id') != 0) {
 					oMyThoughts.onFeedback('info', 'Saving...');
 					getInfo(
 						'update', 
 						function(sDesc, asData) {
+							if(self.vars('id') == 0) oMyThoughts.updateSideMenu();
 							self.vars('id', asData.id);
-							oMyThoughts.feedback('notice', 'Saved ('+asData.led.substr(11, 5)+')');
+							oMyThoughts.feedback('notice', 'Thought saved ('+asData.led.substr(11, 5)+')');
 							self.vars('saving', false);
 						},
 						{
@@ -265,4 +280,9 @@
 		}
 		return true;
 	}
+	
+	function isQuillEmpty() {
+		const rEmpty = /^(<p>(<br>|<br\/>|<br\s\/>|\s+|)<\/p>|)$/gm;
+	    return rEmpty.test(oQuill.getText().trim());
+	}
 </script>

scripts/common.js

@@ -74,6 +74,12 @@ var Tools = {
 			.slideDown('fast')
 			.delay(5000)
 			.slideUp('fast', function(){$(this).remove();});
+	},
+	
+	quill2Html: function(asDelta) {
+	    var tempCont = document.createElement("div");
+	    (new Quill(tempCont)).setContents(asDelta);
+	    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
 	}
 };
 

scripts/mythoughts.js

@@ -56,6 +56,34 @@ function MyThoughts(asGlobals)
 	this.initMenu = function()
 	{
 		self.elem.$Menu.show('fast');
+		
+		//Thoughts on side menu
+		self.updateSideMenu();
+	};
+	
+	this.updateSideMenu = function() {
+		Tools.ajax(
+			'thoughts',
+			function(asData){
+				self.elem.$Side.find('.tag:not(.write)').remove();
+				$.each(asData, function(iKey, asThought) {
+					$Tile = $('<div>', {'class': 'tag'}).appendTo(self.elem.$Side);
+					var $Link = $('<a>', {'href': '#read-'+asThought.id_thought}).html(asThought.created_f.replace(' ', '<br />')).appendTo($Tile);
+				});
+				self.elem.$Side.slideDown('fast', self.setSideElemVisibility);
+			}
+		);
+	};
+	
+	this.setSideElemVisibility =  function() {
+		if(self.elem.$Side) {
+			var iHeight = 0;
+			var iMaxHeight = self.elem.$Side.height();
+			self.elem.$Side.children().each(function(){
+				$(this).toggle(iMaxHeight - iHeight > 0);
+				iHeight += $(this).outerHeight(true);
+			});
+		}
 	};
 	
 	/* Events */
@@ -63,6 +91,7 @@ function MyThoughts(asGlobals)
 	this.onResize = function()
 	{
 		self.vars('mobile', $('body').css('min-width')=='120px');
+		self.setSideElemVisibility();
 		//self.scrollbar();
 	};
 	
@@ -77,7 +106,7 @@ function MyThoughts(asGlobals)
 		self.pageInit = function(asHash, bFirstPage){console.log('no init for the page: '+asHash.page)};
 		self.onSamePageMove = function(asHash){return false};
 		self.onQuitPage = function(){return true};
-		self.onFeedback = function(sType, sMsg){Tools.feedback(sType, sMsg, self.elem.$Container);};
+		self.onFeedback = function(sType, sMsg){Tools.feedback(sType, sMsg);};
 	};
 	
 	this.feedback = function(sType, sMsg) {
@@ -174,7 +203,7 @@ function MyThoughts(asGlobals)
 		}
 		else
 		{
-			var bSamePage = (sCurrPage==sNextPage);
+			var bSamePage = (sCurrPage == sNextPage);
 			if(self.onQuitPage(bSamePage) && !bSamePage || self.onSamePageMove(asHash))
 			{
 				//Delete tmp variables
@@ -184,7 +213,7 @@ function MyThoughts(asGlobals)
 				self.resetTmpFunctions();
 				
 				//Officially a new page
-				var bFirstPage = (sCurrPage=='');
+				var bFirstPage = (sCurrPage == '');
 				self.vars('page', sNextPage);
 				
 				//Update Page Title
@@ -199,6 +228,7 @@ function MyThoughts(asGlobals)
 					self.elem.$Main = self.elem.$Container.find('#main');
 					
 					self.elem.$Menu = self.elem.$Container.find('#menu');
+					self.elem.$Side = self.elem.$Container.find('#side');
 					if(self.vars.log_in) self.initMenu();
 					
 					self.splash(self.elem.$Main, $Dom, asHash, bFirstPage); //first page

settings-sample.php

@@ -10,6 +10,7 @@ class Settings
 	const TEXT_ENC = 'UTF-8';
 	const TIMEZONE = 'Pacific/Auckland';
 	const API_KEY = 'MY_API_KEY';
+	const RAND_TEXT = "let's_mess%a&bit;with~it,!just§for¨the^sake*of-it";
 	const DEBUG = true; //prod: false, dev: true
 }
 

style/_bootstrap.scss

@@ -1,5 +1,5 @@
 $gray-100: lighten($col_main_1, 80%); 	//#ffffff
-$gray-200: lighten($col_main_1, 65%); 	//#efe6db
+$gray-200: #e2ccb2;						//Background
 $gray-300: lighten($col_main_1, 50%); 	//#d8c1a6
 $gray-400: lighten($col_main_1, 35%); 	//#c09b71
 $gray-500: lighten($col_main_1, 20%); 	//#9f7546

style/_font-awesome.scss

@@ -16,7 +16,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-password:before { content: fa-content($fa-var-key); }
 
 //Menu
-.#{$fa-css-prefix}-write:before { content: fa-content($fa-var-pen-fancy); }
+.#{$fa-css-prefix}-write:before { content: fa-content($fa-var-pen); }
 .#{$fa-css-prefix}-settings:before { content: fa-content($fa-var-cog); }
 .#{$fa-css-prefix}-logoff:before { content: fa-content($fa-var-sign-out); }
 

style/_quill.scss

@@ -1 +1,6 @@
 @import 'quill/quill.bubble';
+
+.ql-editor.ql-blank::before {
+	left: 1.5em;
+	color: $gray-400;
+}

style/_read.scss

@@ -0,0 +1,10 @@
+#read {
+	@extend .thought;
+	
+	.header {
+	}
+
+	.body {
+		
+	}
+}

style/_template.scss

@@ -4,9 +4,9 @@ body {
 	min-width: 700px;
 	font-family: $font_para, sans-serif;
 	font-size:1em;
-	background-color:#e2ccb2;
+	background-color: $gray-200;
 	margin:0;
-	color:$col_main_1;
+	color: $col_main_1;
 }
 
 /* Typography */
@@ -54,7 +54,7 @@ a.button {
 	height:50px;
 	width:50px;
 	line-height:50px;
-	font-size: 1.1em;
+	font-size: 1.0em;
 	text-align:center;
 	background:	url("../images/minicloud.png") 0 0 no-repeat;
 	color: $gray-600;
@@ -78,10 +78,11 @@ a.button:active {
 	position: absolute;
 	width: 100%;
 	z-index: 1000;
-}
 	
-#feedback .alert {
+	.alert {
 		top: 1em;
+		background: $gray-200;
+	}
 }
 
 /* Header */
@@ -113,7 +114,7 @@ a.button:active {
 
 #main {
 	display: none;
-	margin-top:1em;
+	margin-top: 1em;
 	position: absolute;
 	top:203px;
 	bottom: 2rem;
@@ -127,47 +128,67 @@ a.button:active {
 	}
 }
 
-/* Read */
+/* Side */
 
-div.read {
+#side {
-	position:relative;
+	position: absolute;
-	padding-bottom:30px;
+	left: 100%;
+	top: 203px;
+	padding: 1em;
+	bottom: 2rem;
+	overflow: hidden;
+	display: none;
+	
+	.tag {
+		margin-bottom: 1em;
+		
+		a {
+			@extend .shadow;
+			display: inline-block;
+			text-align: center;
+			width: 50px;
+			background: $gray-200;
+			border-radius: 0.5em;
+			font-size: 0.8rem;
+			line-height: 25px;
+			
+			&:hover {
+				color: $gray-200;
+				background: $gray-400;
+			}
+		}
+		
+		&.write a {
+			font-size: 1rem;
+			padding: 0;
+			line-height: 50px;
+		}
+	}
 }
 
-div.thought {
+/* Thought */
-	font-size:16px;
-	line-height:20px;
-}
 
-p.date {
+.thought {
-	font-size:20px;
+	padding: 0;
-}
+	font-family: $font_para;
+	font-size: 14px;
 	
-div.time {
+	div {
-	position:absolute;
+		margin: 0;
-	margin-left:-100px;
+	}
-}
 
-div.paragraphs p {
+	p {
-	margin:0 0 20px 0;
+		text-indent: 1.5em;
-}
+		margin: 0;
+		padding: 0;
+		text-align: justify;
+		line-height: 1.5em;
+	}
 
-div.paragraphs p:first-letter {
+	.date {
-	font-size:59px;
+		color: $gray-500;
-	line-height:16px;
+		font-size: 0.8em;
-	margin-right:5px;
+	}
-	font-weight:400;
-	float:left;
-	text-transform:uppercase;
-}
-
-div.paragraphs p + p, div.paragraphs p + p:first-letter {
-	font-size:inherit;
-	line-height:inherit;
-	margin-right:inherit;
-	font-weight:normal;
-	float:none;
-	text-indent:40px;
 }
 
 /* Settings */

style/_write.scss

@@ -20,20 +20,19 @@
 			}
 		
 			.ql-editor, #context {
-				padding:0;
+				@extend .thought;
-				font-family: $font_para;
-				font-size: 14px;
-				
-				div {
-					margin:0;
 			}
 		
-				p {
+			#context {
-					text-indent: 1.5em;
+				.entry_date {
-					margin: 0;
+					text-align: right;
-					padding: 0;
+				}
-					text-align: justify;
+			
-					line-height: 1.5em;
+				.entry_sep {
+					font-size: 1.5em;
+					text-align: center;
+					letter-spacing: 0.3em;
+					padding: 1em;
 				}
 			}
 		}
@@ -42,26 +41,29 @@
 	/* Write - Navbar */
 	
 	#nav {
-		position:absolute;
+		position: absolute;
-		bottom:0;
+		bottom: 0;
-		right:0;
+		right: 0;
-		left:0;
+		left: 0;
-		text-align: center;
 		
 		.nav-elem {
 			color: $gray-500;
-			width: 1.25em;
 			display: inline-block;
-			text-align: center;
-		}
-	
-		.fa-prev, .fa-next {
 			cursor: pointer;
-			display: none;
+			width: 1.25em;
+			font-size: 1.25em;
 			
 			&:hover {
 				color: $gray-700;
 			}
+			
+			&.prev, &.curr, &.next {
+				visibility: hidden;
+			}
+
+			&.next {
+				float: right;
+			}
 		}
 	}
 

style/mythoughts.scss

@@ -20,3 +20,4 @@
 
 @import 'logon';
 @import 'write';
+@import 'read';