Mozilla Reps Dashboard

reps.mozilla.org

by Wray Bowling

HTML

<h1>Needs You</h1>
<table>
	<thead>
		<tr><th colspan="4">Your suggested next item...</th></tr>
		<tr>
			<td><a href="#">Approve budget</a></td>
			<td>closing tomorrow</td>
			<td class="priority-4"></td>
			<td><a href="#">10500</a></td>
		</tr>
		<tr>
			<th>Summary</th>
			<th>Timing</th>
			<th class="priority">Priority</th>
			<th>ID</th>
		</tr>
	</thead>
	<tbody>
		
		<tr>
			<td><a href="#">Provide info on bug</a></td>
			<td>closing after 2 days</td>
			<td class="priority-4"></td>
			<td><a href="#">2345</a></td>
		</tr>
		<tr>
			<td><a href="#">Vote in a poll</a></td>
			<td>closing after 2 days</td>
			<td class="priority-3"></td>
			<td><a href="#">946782</a></td>
		</tr>
		<tr>
			<td><a href="#">Ask mentee wbowling to complete profile</a></td>
			<td>n/a</td>
			<td class="priority-2"></td>
			<td><a href="#">wbowling</a></td>
		</tr>
		<tr>
			<td><a href="#">View recruitment reported by mentee</a></td>
			<td>closing in 2 weeks</td>
			<td class="priority-2"></td>
			<td><a href="#">72345</a></td>
		</tr>
		<tr>
			<td><a href="#">add post-event metrics</a></td>
			<td>closing in 1 week</td>
			<td class="priority-1"></td>
			<td><a href="#">2646437</a></td>
		</tr>
		<tr>
			<td><a href="#">View comment on mentee's activity</a></td>
			<td>closing in 2 weeks</td>
			<td class="priority-neutral"></td>
			<td><a href="#">346346</a></td>
		</tr>
		<tr>
			<td><a href="#">View mentee's budget request status</a></td>
			<td>closing in 3 weeks</td>
			<td class="priority-neutral"></td>
			<td><a href="#">24572</a></td>
		</tr>
		<tr>
			<td><a href="#">View mentee's budget request status</a></td>
			<td>closing in 3 weeks</td>
			<td class="priority-neutral"></td>
			<td><a href="#">346346</a></td>
		</tr>
		<tr>
			<td><a href="#">view new comment on an event Rep is organizing or attending</a></td>
			<td>closing in 3 weeks</td>
			<td class="priority-neutral"></td>
			<td><a href="#">2457</a></td>
		</tr>
		<tr>
			<td><a href="#">view new...

CSS

body{
	margin: 40px;
	font-family:Open Sans;
	font-weight:100;
}

h1{

}

table{
	border:solid 1px black;
	width:100%;

}

tr:nth-child(even){
	background-color:#FAFDFF;
}

thead tr:nth-child(1){
	color:indianred;
	font-style: italic;
}

thead tr:nth-child(2){
	height:100px;
	font-weight:500;
}

thead tr:nth-child(3){
	background-color:#d6e7de;
}

th,td{
	text-align:left;
	padding: 0 0.2em;
}

/* priority */

[class^='priority']{
	width:45px;
	height:32px;
	background-size:32px 32px;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
.priority-minus-4{
	background-image: url('../graphics/-4_ignore.png');
}
.priority-minus-3{
	background-image: url('../graphics/-3.png');
}
.priority-minus-2{
	background-image: url('../graphics/-2.png');
}
.priority-minus-1{
	background-image: url('../graphics/-1.png');
}
.priority-neutral{}
.priority-1{
	background-image: url('../graphics/1.png');
}
.priority-2{
	background-image: url('../graphics/2.png');
}
.priority-3{
	background-image: url('../graphics/3.png');
}
.priority-4{
	background-image: url('../graphics/4_blocker.png');
}

[class $= 'performant']{
	height:1em;
	float:left;
}
.non-performant{
	background-color:#e7d2d2;
}
.performant{
	background-color:#85e74d;
}