on hover, display absolute time

masks/project.html

@@ -431,7 +431,7 @@ function getPost(asPost) {
 	$Post
 		.append($('<div>', {'class':'header'})
 			.append($('<span>', {'class':'index'}).addIcon('fa-'+asPost.type))
-			.append($('<span>', {'class':'time', 'title':sAbsTime+self.tmp('site_tz_notice')}).text(sRelTime)))
+			.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+self.tmp('site_tz_notice'))))
 		.append($('<div>', {'class':'body'}).append($Body));
 	
 	if(asPost.displayed_id) $Post.find('.index').append(' '+asPost.displayed_id);

script/spot.js

@@ -268,3 +268,22 @@ $.prototype.cascadingDown = function(sDuration)
 {
 	return $(this).slideDown(sDuration, function(){$(this).next().cascadingDown(sDuration);});
 };
+
+$.prototype.hoverSwap = function(sDefault, sHover)
+{
+	return $(this)
+		.data('default', sDefault)
+		.data('hover', sHover)
+		.hover(function(){
+			var	$This = $(this),
+				sHover = $This.data('hover');
+				sDefault = $This.data('default');
+			
+			if(sDefault!='' && sHover != '') {
+				$This.fadeOut('fast', () => {
+					$This.text((sDefault==$This.text())?sHover:sDefault).fadeIn('fast');
+			    });
+			}				
+		})
+		.text(sDefault);
+};

style/_mask_project.scss

@@ -201,18 +201,23 @@
 					font-style: italic;
 				}
 				.header {
-					padding: 0.5em 1em;
 					font-style: italic;
 					font-size: 0.8em;
-					text-align: right;
 					
-					.index {
+					span {
-						float: left;
+						padding: 0.5em 1em;
-						font-style: normal;
+						display: inline-block;
-					}
+						width: calc(50% - 2em);
-					
-					.time {
 						cursor: default;
+					
+						&.index {
+							float: left;
+							font-style: normal;
+						}
+						
+						&.time {
+							text-align: right;
+						}
 					}
 				}
 				.body {

todo

@@ -2,4 +2,3 @@ To Do List
 ----------
 - Device/Spot Class
 - Replace all images with FA icons
-- on hover on relative time: display absolute time