finished thread mockup

html/css/global/img.css

@@ -57,8 +57,6 @@
 	color: #000000;
 }
 
-
-
 .setting-name {
 	width:50%;
 }
@@ -113,7 +111,7 @@
 	position: relative;
 	display: inline;
 	margin-top: 0px;
-	padding-left:0px;
+	padding-left:8px;
 	padding-right: 4px;
 	list-style-type: none;
 }
@@ -269,4 +267,22 @@ img.thumbnail {
 
 hr {
 	clear: both;
+}
+
+.spoiler {
+	background-color: #000000;
+	color: #000000;
+}
+
+.spoiler:hover {
+	color: #FFFFFF;
+}
+
+.thread-ddown-menu {
+	display: inline-block;
+	position:absolute;
+	margin-top: 8px;
+	margin-left: -4px;
+	padding: 4px;
+	float: left;
 }

html/css/pipes/img.css

@@ -77,7 +77,6 @@ a.permalink:hover {
 }
 
 a {
-	background: inherit;
 	color: #f90;
 	font-family: sans-serif;
 	text-decoration: none;
@@ -112,12 +111,47 @@ ul.boardmenu li:hover {
 }
 
 .postblock {
-	background-color:#404040;
+	background-color:#25272D;
-	border: 1px solid #202020;
 	font-weight: bold;
 }
 
 .post {
-	background-color:#404040;
+	border: 1px solid #8C94AB;
-	border: 1px solid #202020;
+	background-color:#25272D;
+	
+}
+
+.subject {
+	color: #FF9900;
+}
+
+.postername a {
+	text-decoration: underline;
+	color: #FFCC00!important;
+}
+
+.postername {
+	color: #FFCC00;
+	font-weight: bold;	
+}
+
+.tripcode {
+	color: #FFCC00;
+}
+
+input,textarea,button {
+	border: 1px solid #8C94AB;
+	background-color:#25272D;
+	color: #FFFFFF;
+}
+
+.thread-ddown a {
+	font-size: 75%;
+	vertical-align: middle;
+}
+
+.thread-ddown-menu {
+	border: 1px solid #8C94AB;
+	background-color:#25272D;
+	color: #FFFFFF;
 }

html/javascript/gochan.js

@@ -125,6 +125,10 @@ function changeFrontPage(page_name) {
 	});
 }
 
+function deletePost(id) {
+	var password = prompt("Password")
+}
+
 function getArg(name) {
 	var href = window.location.href;
 	var args = href.substr(href.indexOf("?")+1, href.length);
@@ -212,6 +216,15 @@ function getStaffMenuHTML() {
 	return s+"</ul>";
 }
 
+function hidePost(id) {
+	var posttext = $jq("div#"+id+".post .posttext");
+	if(posttext.length > 0) posttext.remove();
+	var fileinfo = $jq("div#"+id+".post .file-info")
+	if(fileinfo.length > 0) fileinfo.remove();
+	var postimg = $jq("div#"+id+".post img")
+	if(postimg.length > 0) postimg.remove();
+}
+
 function isFrontPage() {
 	var page = window.location.pathname;
 	return page == "/" || page == "/index.html" || page == "/template.html";
@@ -283,6 +296,10 @@ function preparePostPreviews(is_inline) {
 	}
 }
 
+function reportPost(id) {
+	var reason = prompt("Reason");
+}
+
 $jq(document).ready(function() {
 	current_staff = getStaff()
 
@@ -291,7 +308,7 @@ $jq(document).ready(function() {
 	for(var i = 0; i < styles.length; i++) {
 		settings_html += "<option value=\""+styles[i]+"\">"+styles[i][0].toUpperCase()+styles[i].substring(1,styles[i].length);
 	}
-	settings_html+="</select></td><tr><tr><td><b>Pin top bar:</b></td><td><input type=\"checkbox\" /></td></tr></table><div class=\"lightbox-footer\"><hr /><button id=\"save-settings-button\">Save Settings</button></div>"
+	settings_html+="</select></td><tr><tr><td><b>Pin top bar:</b></td><td><input type=\"checkbox\" /></td></tr><tr><td><b>Enable post previews on hover</b></td><td><input type=\"checkbox\" /></td></tr></table><div class=\"lightbox-footer\"><hr /><button id=\"save-settings-button\">Save Settings</button></div>"
 
  	settings_menu = new TopBarButton("Settings",function(){
  		showLightBox("Settings",settings_html)
@@ -321,6 +338,24 @@ $jq(document).ready(function() {
 			block.hide();
 			$jq(this).html("+");
 		}
+	});
 
+	$jq(".thread-ddown a").click(function(e) {
+		var post_id = $jq(this).parent().parent().parent().attr("id")
+		var is_op = $jq(this).parent().parent().parent().attr("class") == "thread"
+		
+		if($jq(this).parent().find("div.thread-ddown-menu").length == 0) {
+			$jq("div.thread-ddown-menu").remove();
+
+			menu_html = "<div class=\"thread-ddown-menu\" id=\""+post_id+"\">";
+			if(!is_op) menu_html += "<a href=\"javascript:hidePost("+post_id+");\" class=\"hide-post\">Hide post</a><br />";
+			menu_html +="<a href=\"javascript:deletePost("+post_id+");\" class=\"delete-post\">Delete post</a><br />" +
+				"<a href=\"javascript:reportPost("+post_id+");\" class=\"report-post\">Report Post</a>" +
+				"</div>";
+
+			$jq(this).parent().append(menu_html);
+		} else {
+			$jq("div.thread-ddown-menu").remove();
+		}
 	});
 });

html/thread.html

@@ -44,37 +44,38 @@
 		<a href="#">Open Quick Reply box</a>
 		<table id="postbox-static">
 			<form name="postform" action="/post" method="POST">
-				<tr><td class="postblock">Name</td><td><input type="text" maxlength="75" size="28" value="Name" onFocus="if(this.value=='Name') {this,value= ''}" onBlur="if(this.value == '') { this.value = 'Name' }"/><br /></tr>
+				<tr><td class="postblock">Name</td><td><input type="text" name="postname" maxlength="75" size="28" value="Name" onFocus="if(this.value=='Name') {this,value= ''}" onBlur="if(this.value == '') { this.value = 'Name' }"/></td></tr>
-				<tr><td class="postblock">Email</td><td><input type="text" maxlength="75" size="28" /></tr>
+				<tr><td class="postblock">Email</td><td><input type="text" name="postemail" maxlength="75" size="28" /></td></tr>
-				<tr><td class="postblock">Subject</td><td><input type="text" maxlength="75" size="35" /><input type="submit" value="Post"/></tr>
+				<tr><td class="postblock">Subject</td><td><input type="text" name="postsubject" maxlength="75" size="35" /><input type="submit" value="Post"/></td></tr>
-				<tr><td class="postblock">Message</td><td><textarea rows="4" cols="48"></textarea></tr>
+				<tr><td class="postblock">Message</td><td><textarea rows="4" cols="48" name="postmsg"></textarea></td></tr>
 				<tr><td class="postblock">File</td><td><input name="imagefile" size="31" type="file"><input type="checkbox" id="spoiler"/><label for="spoiler">Spoiler</label></td></tr>
+				<tr><td class="postblock">Password</td><td><input type="text" name="postpassword" size="14" /> (for post/file deletion)</td></tr>
 			</form>
 		</table>
 		</center>
 	</div>
 	<hr />
 	<div id="content">
-		<div class="thread">
+		<div class="thread" id="74769">
 			<span class="file-info">File: <a href="135710945820.jpg">135710945820.jpg</a> - (142.91KB , 756x888 , Chibi_Series___Flower_Forte_by_kubus_sama.jpg )</span><br />
 			<img src="135710945820s.jpg" width="170" height="200" class="thumbnail"/>
-			<label class="post-info"><input type="checkbox" id="74769" /> <span class="subject">Sup</span> <span class="postername">Zeke Roa</span><span class="tripcode">!ska.Jj.P5I</span> Tue, January 01, 2013 10:50 PM <a href="74769">No.</a> <a href="74769">74769</a></label> <span class="op-links">[<a href="reply" >Reply</a>]</span><br />
+			<label class="post-info"><input type="checkbox" id="74769" /> <span class="subject">Sup</span> <span class="postername"><a href="mailto:admin@lunachan.net">Zeke Roa</a></span><span class="tripcode">!ska.Jj.P5I</span> Tue, January 01, 2013 10:50 PM <a href="74769">No.</a> <a href="74769">74769</a></label> <span class="post-links"> <span class="thread-ddown">[<a href="javascript:void(0)">&#9660;</a>]</span></span><br />
 			<div class="posttext">
 				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 			</div>
-			<div class="post">
+			<div class="post" id="74770">
-				<label class="post-info"><input type="checkbox" id="135693079632" /> <span class="postername">Anonymous</span> Tue, January 02, 2013 1:55:PM <a href="135693079632">No.</a> <a href="74770i">74770</a></label> <span class="op-links">[<a href="reply">Reply</a>]</span><br />
+				<label class="post-info"><input type="checkbox" id="135693079632" /> <span class="postername">Anonymous</span> Tue, January 02, 2013 1:55:PM <a href="135693079632">No.</a> <a href="74770i">74770</a></label> <span class="post-links"><span class="thread-ddown">[<a href="javascript:void(0)">&#9660;</a>]</span></span><br />
 				<span class="file-info">File: <a href="135693079632s.png">135693079632s.png</a> - (100.01KB , 200,200, 135693079632s.png )</span><br />
 				<img src="135693079632s.png" width="94" height="125" class="thumbnail" />
 
 				<div class="posttext">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
-					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
+					<span class="spoiler">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
 				</div>
 			</div>
 
-			<div class="post">
+			<div class="post" id="74770">
-				<label class="post-info"><input type="checkbox" id="135693079632" /> <span class="postername">Anonymous</span> Tue, January 02, 2013 1:55:PM <a href="135693079632">No.</a> <a href="74770i">74770</a></label> <span class="op-links">[<a href="reply">Reply</a>]</span><br />
+				<label class="post-info"><input type="checkbox" id="135693079632" /> <span class="postername">Anonymous</span> Tue, January 02, 2013 1:55:PM <a href="135693079632">No.</a> <a href="74770i">74770</a></label> <span class="post-links"><span class="thread-ddown">[<a href="javascript:void(0)">&#9660;</a>]</span></span><br />
 				<div class="posttext">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 				</div>