Layout ideas mod management tool
Just some ideas how I'll arrange a little tool I'm making to log my moderation stuff.
by mich
HTML
<div id="main">
<div class="box_outer">
<div class="box_title collapsible">Today
</div>
<div class="box_content">
<table>
<tbody>
<tr>
<th class="username">Username</th>
<th class="status">Status</th>
<th class="comment">Comment</th>
</tr>
<tr>
<td><a href="http://eraldocoil.newgrounds.com">EraldoCoil</a></td>
<td>APPROVED</td>
<td>one may be a midirip (but one with effort imo), other is original</td>
</tr>
<tr>
<td><a href="http://dannylovesduckz.newgrounds.com">dannylovesduckz</a></td>
<td>BANNED</td>
<td>'THIS IS NOT MY SONG!'</td>
</tr>
<tr>
<td><a href="http://iiskully.newgrounds.com">iiSKully</a></td>
<td>APPROVED</td>
<td>original neat "8-bit" tune</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box_outer">
<div class="box_title">Add entry</div>
<div clas="box_content">
<form action="." method="POST" onsubmit="return false;">
<fieldset>
<label for="username">Username:</label>
<input class="username" type="text" name="username", id="username" tabindex="1" />
<label for="status">Status:</label>
<select class="status" name="status" id="status" tabindex="2" />
<option value="-1">Select status</option>
<option value="1">APPROVED</option>
<option value="0">BANNED</option>
<option...
CSS
* {
margin: 0;
padding: 0;
}
#main {
font-family: Arial;
font-size: 13px;
}
.box_outer {
padding: 0 3px;
border: solid 1px #DDDDDD;
border-width: 1px;
margin-bottom: 3px;
}
.box_title {
margin-left: 8px;
margin-right: 12px;
border-bottom: solid 1px #CCCCD4;
font-weight: bold;
font-size: 13px;
color: #1111A6;
}
.box_content {
padding: 10px 5px;
}
.collapsible {
cursor: pointer;
}
td, th {
padding: 1px;
}
th {
border-bottom: solid 1px #999;
}
th.username {
width: 120px;
}
th.status {
width: 100px;
}
fieldset {
margin: 5px;
}
label {
font-weight: bold;
}
label.block {
display: block;
}
input, select {
border: solid 1px #777;
padding: 2px;
background-color: #FFF;
}
input.username, select {
width: 110px;
}
input.comment {
width: 100%;
}
JavaScript
$(function() {
$('.collapsible').click(function() {
var box = $(this).parent().find('.box_content');
if (box.is(':visible')) {
box.hide(200);
}
else {
box.show(200);
}
});
});