Add an infirmation panel for archived projects

masks/project.html

@@ -254,7 +254,7 @@ function initProject(sProjectCodeName, oFocusPost){
 
 	//Show/Hide Poster Panel
 	var bHistoMode = (self.vars(['project', 'mode']) == self.consts.modes.histo);
-	self.tmp('$Poster').toggle(!bHistoMode);
+	self.tmp('$Poster').toggleClass('histo-mode', bHistoMode);
 
 	//Feed auto-update
 	updateFeed(true, false, function(){focusOnPost(oFocusPost);});
@@ -264,12 +264,10 @@ function initProject(sProjectCodeName, oFocusPost){
 
 function initPosts() {
 	//Add post form
-	var asPoster = {
-		type: 'poster',
-		formatted_time: '',
-		relative_time: oSpot.lang('post_new_message')
-	};
-	self.tmp('$Poster').append(getPost(asPoster));
+	self.tmp('$Poster').append(getPost({type: 'poster', formatted_time: '', relative_time: oSpot.lang('post_new_message')}));
+
+	//Add archived Project Notice
+	self.tmp('$Poster').append(getPost({type: 'archived', headerless: true}));
 
 	//Auto-adjust text area height
 	autosize($('#post'));
@@ -797,9 +795,14 @@ function focusOnPost(oFocusPost) {
 			var bGetToTop = (oSpot.tmp('$PostList').height() - (($Post.length > 0)?$Post.position().top:0) >= $(window).height());
 			if($Post.length > 0 && (bGetToTop || self.tmp('out-of-data'))) {
 				self.tmp('simple-bar').getScrollElement().scrollTop = Math.round(
-					$Post.position().top +
-					parseInt($Post.css('margin-top')) +
-					(self.tmp('$Poster').is(':visible')?self.tmp('$Poster').outerHeight(true):0)
+					$Post.offset().top
+					- parseInt($('#feed-panel').css('padding-top'))
+					/*
+					$Post.position().top
+					+ parseInt($Post.css('margin-top'))
+					+ self.tmp('$Poster').outerHeight(true)
+					+ parseInt($('#feed-panel').css('padding-top'))
+					*/
 				);
 
 				if(oFocusPost.type=='media' || oFocusPost.type=='message') $Post.find('a.drill').click();
@@ -895,6 +898,11 @@ function getPost(asPost) {
 						.append($('<input>', {type:'text', id:'name', name:'name', placeholder:oSpot.lang('post_name')}))
 						.append($('<button>', {type:'button', id:'submit', name:'submit'}).addIcon('fa-send'));
 			break;
+		case 'archived':
+			$Body = $('<div>')
+					.append($('<p>').addIcon('fa-success'))
+					.append($('<p>').text(oSpot.lang('mode_histo')));
+			break;
 		case 'loading':
 			$Body = $('<p>', {'class':'flicker'}).addIcon('fa-post');
 			break;

style/_mask_project.scss

@@ -388,17 +388,18 @@ $legend-color: $post-color;
 
 		#feed-panel {
 			width: 100%;
+			padding-top: $block-spacing;
 			
 			#posts_list {
 				position: relative;
 			}
 
 			#poster {
-				display: inline-block;
-
-				.post-item {
-					margin-bottom: 0;
+				&.histo-mode .poster, &:not(.histo-mode) .archived {
+					display: none;
+				}
 
+				.poster {
 					textarea#post {
 						margin-bottom: 1em;
 						width: calc(100% - 2em);
@@ -413,6 +414,10 @@ $legend-color: $post-color;
 						margin-bottom: 0.5em;
 					}
 				}
+
+				.archived {
+					background: #EEE;
+				}
 			}
 
 			.body-box {
@@ -429,10 +434,6 @@ $legend-color: $post-color;
 				width: calc(100% - #{$block-spacing});
 				box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
 
-				&:first-child {
-					margin-top: $block-spacing;
-				}
-
 				a {
 					color: $post-color;
 					&:hover {
@@ -473,6 +474,8 @@ $legend-color: $post-color;
 
 							.link, .link:visited, .link_copied {
 								margin-left: $elem-spacing;
+								padding: 0;
+								line-height: 1;
 							}
 						}
 
@@ -493,7 +496,18 @@ $legend-color: $post-color;
 						display: none;
 					}
 					.body {
-						padding-top: $elem-spacing;
+						padding-top: $block-spacing;
+						text-align: center;
+
+						p {
+							margin: 0;
+							
+							.fa {
+								display: inline-block;
+								font-size: 2em;
+								margin: $elem-spacing 0;
+							}
+						}
 					}
 				}
 
@@ -637,18 +651,6 @@ $legend-color: $post-color;
 						}
 					}
 				}
-
-				&.loading {
-					.body {
-						text-align: center;
-
-						p {
-							display: inline-block;
-							font-size: 2em;
-							color: $post-color;
-						}
-					}
-				}
 			}
 		}
 	}