boards-tags.html

<style>
th.header {
    background-image: url(/static/bg.gif); 
    cursor: pointer; 
    background-repeat: no-repeat; 
    background-position: center right; 
    padding-left: 20px; 
    margin-left: -1px; 
}
th.headerSortUp { 
    background-image: url(/static/asc.gif); 
} 
th.headerSortDown { 
    background-image: url(/static/desc.gif); 
} 
table.modlog tr td.expand-td {
  position: relative;
}
table.modlog tr td.expand-td:hover div{
  background-color: #FFF;
  position: absolute;
  width: auto;
  box-shadow: 0px 0px 5px #000;
  padding: 0px 0 3px;
  top: 5px;
  left: 0;
  z-index: 100;
}
.flag-eo {
    background-image: url(/static/eo.png);
}
.flag-en {
    background-image: url(/static/en.png);
}
.flag-jbo {
    background-image: url(/static/jbo.png);
}
.uri {
overflow: hidden; width: 75px; white-space: nowrap;
}
.tags {
overflow: hidden; width: 150px; white-space: nowrap;
}
.board-name {
overflow: hidden; width: 200px; white-space: nowrap;
}
tr:nth-child(even) { background-color: #D6DAF0 }
</style>

<p style='text-align:center'>{% trans %}There are currently <strong>{{n_boards}}</strong> boards + <strong>{{hidden_boards_total}}</strong> unindexed boards = <strong>{{t_boards}}</strong> total boards. Site-wide, {{total_posts_hour}} posts have been made in the last hour, with {{total_posts}} being made on all active boards since October 23, 2013.{% endtrans %}</p>

{% if top2k %}
<p style='text-align:center'><a href="/boards_full.html">{% trans %}This list only shows the top 2000 boards. Until we can move tag searching onto the server side, click here for the full list.{% endtrans %}</a></p>
{% endif %}

<div style='height:100px; overflow-y:scroll' class="tags-container">
	<strong class="tags-strong">Tags:</strong>&nbsp;
	{% for tag, pop in tags %}
		{% if pop > 1000 %}
			<a class="tag" href="#" style="font-size:1.75em">{{ tag }}</a> 
		{% elseif pop > 500 %}
			<a class="tag" href="#" style="font-size:1.5em">{{ tag }}</a> 
		{% elseif pop > 100 %}
			<a class="tag" href="#" style="font-size:1.25em">{{ tag }}</a> 
		{% else %}
			<a class="tag" href="#">{{ tag }}</a> 
		{% endif %}
	{% endfor %}
</div>

<table class="modlog" style="width:auto"><thead>
<tr>
	<th>B</th>
	<th>{% trans %}Board{% endtrans %}</th>
	<th>{% trans %}Title{% endtrans %}</th>
	<th title="Posts per hour">{% trans %}PPH{% endtrans %}</th>
	<th>{% trans %}Total posts{% endtrans %}</th>
	<th title="Unique IPs to post in the last 72 hours">{% trans %}Active users{% endtrans %}</th>
	<th>{% trans %}Tags{% endtrans %}</th>
</tr></thead><tbody>
{% for board in boards %}
	<tr>
	<td>{{ board.img|raw }} {% if board['sfw'] %}<img src="/static/sfw.png" title="Safe for work">{% else %}<img src="/static/nsfw.png" title="Not safe for work">{% endif %}</td>
	<td><div class="uri"><a href='/{{board['uri']}}/'>/{{board['uri']}}/</a>{{lock|raw}}</div></td>
	<td class="expand-td" title="Created {{board['time']}} ({{board['ago']}} ago)"><div class="board-name">{{ board['title'] }}</div></td>
	<td style='text-align:right'>{{board['pph']}}</td>
	<td style='text-align:right'>{{board['max']}}</td>
	<td style='text-align:right'>{{board['uniq_ip']}}</td>
	<td class="expand-td"><div class="tags">{% for tag in board.tags %}<span class="board-tag">{{ tag }}</span>&nbsp;{% endfor %}</div></td>
{% endfor %}
</tbody></table>
<p style='text-align:center'><em>Page last updated: {{last_update}}</em></p>
<p style='text-align:center'>{{uptime_p}} without interruption (read)</p>
<script>

$(function() { 
	$('table').tablesorter({sortList: [[5,1]], 
	textExtraction: function(node) {
		childNode = node.childNodes[0];
		if (!childNode) { return node.innerHTML; }
		if (childNode.tagName == 'IMG') {
			return childNode.getAttribute('class');
		} else {
			return (childNode.innerHTML ? childNode.innerHTML : childNode.textContent);
		}
	}
	});

function filter_table(search) {
$("tbody>tr").css("display", "table-row");

if ($('#clear-selection').length === 0) {
$('.tags-strong').before('<a href="#" id="clear-selection">[clear selection]</a>');
$('#clear-selection').on('click', function(e){
e.preventDefault();
$("tbody>tr").css("display", "table-row");
window.location.hash = '';
});
}

window.location.hash = search;

var tags = $(".board-tag").filter(function() {
    return $(this).text() === search;
});

$("tbody>tr").css("display", "none");

tags.parents("tr").css("display", "table-row");

}

$("a.tag").on("click", function(e) {
e.preventDefault();
filter_table($(this).text());
});

$('.tags-strong').before('<label>Filter tags: <input type="text" id="filter-tags"></label> ');

$('#filter-tags').on('keyup', function(e) {
$("a.tag").css("display", "inline-block");

var search = $(this).val();

if (!search) return;

var tags = $("a.tag").filter(function() {
    return (new RegExp(search)).test($(this).text());
});

$("a.tag").css("display", "none");

tags.css("display", "inline-block");
});

if (window.location.hash) {
	filter_table(window.location.hash.replace('#',''));
}

}); 
</script>