Multiple boardlist enhancements.

#467 - Reduced and modified columns.
#467 - Styling changes across all supported stylesheets.
#467 - PPH now reflects last hour's posts count and has average in title.
#467 - Removed precision, except for boards that have between 0~1 posts.
#467 - Fixed issue where inline board tags pointed to the HTML file, rendering them nonfunctional for noJS users.
Misc - Fixed quote color in certain stylesheets.

Signed-off-by: 8n-tech <8n-tech@users.noreply.github.com>

board-search.php

@@ -174,9 +174,14 @@ foreach ($response['boards'] as $boardUri => &$board) {
 		$board['active'] = (int) $boardActivity['active'][ $boardUri ];
 	}
 	if (isset($boardActivity['average'][ $boardUri ])) {
-		$precision = 1;
+		$precision = 0;
 		
-		$board['pph'] = round( $boardActivity['average'][ $boardUri ], $precision );
+		if ($boardActivity['average'][ $boardUri ] > 0 && $boardActivity['average'][ $boardUri ] < 10) {
+			$precision = 1;
+		}
+		
+		$board['pph_average'] = round( $boardActivity['average'][ $boardUri ], $precision );
+		$board['pph'] = round( $boardActivity['average'][ $boardUri ], 0 );
 		$board['ppd'] = round( $boardActivity['today'][ $boardUri ], $precision );
 		
 		unset( $precision );

boards.php

@@ -43,7 +43,7 @@ $tagQueryGet    = $_GET;
 $tagQueryTags   = isset($tagQueryGet['tags']) ? $tagQueryGet['tags'] : "";
 unset($tagQueryGet['tags']);
 $tagQueryGet['tags'] = $tagQueryTags;
-$tag_query      = "?" . http_build_query( $tagQueryGet ) . ($tagQueryTags != "" ? "+" : "");
+$tag_query      = "/boards.php?" . http_build_query( $tagQueryGet ) . ($tagQueryTags != "" ? "+" : "");
 
 /* Create and distribute page */
 // buildJavascript();
@@ -106,7 +106,7 @@ if (php_sapi_name() == 'cli') {
 	
 	$topbar = array();
 	foreach ($boards as $i => $b) {
-		if (!in_array($b['uri'], $config['no_top_bar_boards'])) {
+		if (is_array($config['no_top_bar_boards']) && !in_array($b['uri'], $config['no_top_bar_boards'])) {
 			$topbar[] = $b;
 		}
 	}

inc/functions.php

@@ -873,6 +873,7 @@ function fetchBoardActivity( array $uris = array(), $forTime = false, $detailed
 		'active'  => array(),
 		'today'   => array(),
 		'average' => array(),
+		'last'    => array(),
 	);
 	
 	// Query for stats for these boards.
@@ -893,6 +894,10 @@ function fetchBoardActivity( array $uris = array(), $forTime = false, $detailed
 		
 		// Format the results.
 		foreach ($bsResult as $bsRow) {
+			if ($bsRow['stat_hour'] == $forHour) {
+				$boardActivity['last'][$bsRow['stat_uri']] = $bsRow['post_count'];
+			}
+			
 			// Do we need to define the arrays for this URI?
 			if (!isset($boardActivity['active'][$bsRow['stat_uri']])) {
 				if ($bsRow['stat_hour'] <= $forHour && $bsRow['stat_hour'] >= $yesterHour) {

inc/instance-config.php

@@ -228,6 +228,7 @@ $config['enable_antibot'] = false;
 $config['spam']['unicode'] = false;
 $config['twig_cache'] = false;
 $config['report_captcha'] = true;
+$config['no_top_bar_boards'] = false;
 
 $config['page_404'] = 'page_404';
 

js/board-directory.js

@@ -49,7 +49,7 @@
 				
 				// Content wrapper
 				// Used to help constrain contents to their <td>.
-				'board-content-wrap' : "<div class=\"board-cell\"></div>",
+				'board-content-wrap' : "<p class=\"board-cell\"></p>",
 				
 				// Individual items or parts of a single table cell.
 				'board-datum-lang'   : "<span class=\"board-lang\"></span>",
@@ -57,6 +57,7 @@
 				'board-datum-sfw'    : "<i class=\"fa fa-briefcase board-sfw\" title=\"SFW\"></i>",
 				'board-datum-nsfw'   : "<i class=\"fa fa-briefcase board-nsfw\" title=\"NSFW\"></i>",
 				'board-datum-tags'   : "<a class=\"tag-link\" href=\"#\"></a>",
+				'board-datum-pph'    : "<p class=\"board-cell board-pph-desc\" title=\"%1 made in the last hour, %2 on average\"></p>",
 				
 				
 				// Tag list.
@@ -164,9 +165,16 @@
 					var $content = boardlist.build.boardcell[column]( row, value );
 					
 					if ($content instanceof jQuery) {
-						// We use .append() instead of .appendTo() as we do elsewhere
+						if ($content.is("." + $wrap[0].class)) {
-						// because $content can be multiple elements.
+							// Our new content has the same classes as the wrapper.
-						$wrap.append( $content );
+							// Replace the old wrapper.
+							$wrap = $content;
+						}
+						else {
+							// We use .append() instead of .appendTo() as we do elsewhere
+							// because $content can be multiple elements.
+							$wrap.append( $content );
+						}
 					}
 					else if (typeof $content === "string") {
 						$wrap.html( $content );
@@ -199,7 +207,14 @@
 					else {
 						return $link[0].outerHTML;
 					}
-				}
+				},
+				'pph' : function(row, value) {
+					return $( boardlist.options.template['board-datum-pph'] )
+						.attr( 'title', function(index, value) {
+							return value.replace("%1", row['pph']).replace("%2", row['pph_average']);
+						} )
+						.text( row['pph'] );
+				},
 			},
 			
 			lastSearch : function(search) {
@@ -346,6 +361,14 @@
 				target = boardlist.options.selector.boardlist;
 			}
 			
+			// Parse ?GET parameters into lastSearch object.
+			if (window.location.search != "" && window.location.search.length > 0) {
+				// ?a=1&b=2 -> a=1&b=2 -> { a : 1, b : 2 }
+				window.location.search.substr(1).split("&").forEach( function(item) {
+					boardlist.lastSearch[item.split("=")[0]] = item.split("=")[1];
+				} );
+			}
+			
 			var $boardlist = $(target);
 			
 			if ($boardlist.length > 0 ) {

stylesheets/dark.css

@@ -8,7 +8,7 @@ body {
 	font-family: sans-serif;
 	font-size: 12px;
 }
-span.quote {
+.quote {
     color:#B8D962;
 }
 h1 {
@@ -223,9 +223,16 @@ table tbody tr:nth-of-type( even ) {
 }
 
 table.board-list-table .board-uri .board-sfw {
-	color: #446655;
+	color: #CCCCCC;
 }
 tbody.board-list-omitted td {
 	background: #333333;
 	border-color: #555555;
 }
+
+table.board-list-table .board-tags .board-cell:hover {
+	background: #1e1e1e;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #333333;
+}

stylesheets/photon.css

@@ -351,9 +351,17 @@ table tbody tr:nth-of-type( even ) {
 }
 
 table.board-list-table .board-uri .board-sfw {
-	color: #333333;
+	color: #8A8A8A;
 }
 tbody.board-list-omitted td {
 	background: transparent;
 	border: none;
 }
+
+table.board-list-table .board-tags .board-cell:hover {
+	line-height: 27px;
+	background: #EEEEEE;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #DDDDDD;
+}

stylesheets/redchanit.css

@@ -81,9 +81,17 @@ table tbody tr:nth-of-type( even ) {
 }
 
 table.board-list-table .board-uri .board-sfw {
-	color: #D00;
+	color: #8020FF;
 }
 tbody.board-list-omitted td {
 	background: #343C4E;
 	border: none;
 }
+
+table.board-list-table .board-tags .board-cell:hover {
+	line-height: 24px;
+	background: #3B4357;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #343C4E;
+}

stylesheets/style.css

@@ -1448,6 +1448,16 @@ table.board-list-table {
 	table-layout: fixed;
 }
 
+table.board-list-table .board-cell {
+	position: static;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 table.board-list-table .board-meta {
 	padding-right: 4px;
 	width: 70px;
@@ -1471,9 +1481,25 @@ table.board-list-table .board-unique {
 	padding: 4px;
 }
 table.board-list-table .board-tags {
+	position: relative;
+	height: 15px;
 	width: auto;
 	padding: 0 15px 0 4px;
 }
+table.board-list-table .board-tags .tag-link {
+	display: inline;
+}
+table.board-list-table .board-tags .board-cell:hover {
+	position: absolute;
+	background: #EEF2FF;
+	line-height: 23px;
+	top: 0;
+	bottom: 0;
+	width: 310px;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #D6DAF0;
+}
 
 table.board-list-table .board-uri .board-nsfw {
 	color: rgb(230,0,0);
@@ -1481,8 +1507,7 @@ table.board-list-table .board-uri .board-nsfw {
 	float: right;
 }
 table.board-list-table .board-uri .board-sfw {
-	/* I'm using blue instead of green to help users with Deuteranopia (most common form of colorblndness). */
+	color: #34345C;
-	color: rgb(0,0,230);
 	margin: 0 0 0 0.6em;
 	float: right;
 }

stylesheets/tomorrow.css

@@ -57,7 +57,7 @@ p.intro span.subject {
 p.intro span.name {
   color:#C5C8C6
 }
-span.quote {
+.quote {
   color:#adbd68
 }
 span.heading {
@@ -179,9 +179,16 @@ table tbody tr:nth-of-type( even ) {
 }
 
 table.board-list-table .board-uri .board-sfw {
-	color: #C5C8C6;
+	color: #81a2be;
 }
 tbody.board-list-omitted td {
 	background: #282a2e;
 	border-color: #111;
 }
+
+table.board-list-table .board-tags .board-cell:hover {
+	background: #1d1f21;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #282a2e;
+}

stylesheets/yotsuba.css

@@ -95,3 +95,10 @@ tbody.board-list-omitted td {
 	background: #fca;
 	border-color: #800;
 }
+
+table.board-list-table .board-tags .board-cell:hover {
+	background: #ffe;
+}
+table.board-list-table tr:nth-of-type( even ) .board-tags .board-cell {
+	background: #ede2d4;
+}

templates/8chan/boards-search.html

@@ -62,24 +62,32 @@
 		
 		<section class="board-list col col-10">
 			<table class="board-list-table">
+				<!--
+					If you are adding or removing columns to this file, there's a few steps.
+					1. Make sure the data is being supplied by the boards.php/board-search.php file.
+					2. Add or remove the <col /> tag and <th /> tag.
+					3. If ADDING, please-please-please add a unique class to your cells and specify information in style.css! Don't duplicate class names.
+					4. If ADDING, open js/board-directory.js and 'board-datum-xxx' definition that matches your data-column <th> attribute.
+					5. Change the colspan="" attributes to be the new total of cells.
+				-->
 				<colgroup>
-					<col class="board-meta" />
+					<!-- <col class="board-meta" /> -->
 					<col class="board-uri" />
 					<col class="board-title" />
 					<col class="board-pph" />
-					<col class="board-max" />
 					<col class="board-unique" />
 					<col class="board-tags" />
+					<col class="board-max" />
 				</colgroup>
 				<thead class="board-list-head">
 					<tr>
-						<th class="board-meta" data-column="meta"></th>
+						<!-- <th class="board-meta" data-column="meta"></th> -->
 						<th class="board-uri" data-column="uri">{% trans %}Board{% endtrans %}</th>
 						<th class="board-title" data-column="title">{% trans %}Title{% endtrans %}</th>
 						<th class="board-pph" data-column="pph" title="Posts per hour">{% trans %}PPH{% endtrans %}</th>
-						<th class="board-max" data-column="posts_total">{% trans %}Total posts{% endtrans %}</th>
 						<th class="board-unique" data-column="active" title="Unique IPs to post in the last 72 hours">{% trans %}Active users{% endtrans %}</th>
 						<th class="board-tags" data-column="tags">{% trans %}Tags{% endtrans %}</th>
+						<th class="board-max" data-column="posts_total">{% trans %}Total posts{% endtrans %}</th>
 					</tr>
 				</thead>
 				
@@ -87,13 +95,13 @@
 				
 				<tbody class="board-list-loading">
 					<tr>
-						<td colspan="7" class="loading"></td>
+						<td colspan="6" class="loading"></td>
 					</tr>
 				</tbody>
 				
 				<tbody class="board-list-omitted" data-omitted="{{boards_omitted}}">
 					<tr>
-						<td colspan="7" id="board-list-more">Displaying results <span class="board-page-num">{{search.page + 1}}</span> through <span class="board-page-count">{{ boards|count + search.page}}</span> out of <span class="board-page-total">{{ boards|count + boards_omitted }}</span>. <span class="board-page-loadmore">Click to load more.</span></td>
+						<td colspan="6" id="board-list-more">Displaying results <span class="board-page-num">{{search.page + 1}}</span> through <span class="board-page-count">{{ boards|count + search.page}}</span> out of <span class="board-page-total">{{ boards|count + boards_omitted }}</span>. <span class="board-page-loadmore">Click to load more.</span></td>
 						
 						{% if boards_omitted > 0 %}
 						<script type="text/javascript">

templates/8chan/boards-table.html

@@ -1,14 +1,14 @@
 {% for board in boards %}
 <tr>
-	<td class="board-meta">{{ board.locale }}</td>
+	<!-- <td class="board-meta">{{ board.locale }}</td> -->
-	<td class="board-uri"><div class="board-cell">
+	<td class="board-uri"><p class="board-cell">
 		<a href='/{{board['uri']}}/'>/{{board['uri']}}/</a>
 		{% if board['sfw'] %}<i class="fa fa-briefcase board-sfw" title="SFW"></i>{% endif %}
-	</div></td>
+	</p></td>
-	<td class="board-title"><div class="board-cell" title="Created {{board['time']}}">{{board['title']|e}}</div></td>
+	<td class="board-title"><p class="board-cell" title="Created {{board['time']}}">{{board['title']|e}}</p></td>
-	<td class="board-pph"><div class="board-cell">{{board['pph']}}</td>
+	<td class="board-pph"><p class="board-cell">{{board['pph']}}</td>
-	<td class="board-max"><div class="board-cell">{{board['posts_total']}}</td>
+	<td class="board-unique"><p class="board-cell">{{board['active']}}</td>
-	<td class="board-unique"><div class="board-cell">{{board['active']}}</td>
+	<td class="board-tags"><p class="board-cell">{% for tag in board.tags %}<a class="tag-link" href="{{tag_query}}{{tag|e}}">{{tag|e}}</a>{% endfor %}</p></td>
-	<td class="board-tags"><div class="board-cell">{% for tag in board.tags %}<a class="tag-link" href="{{tag_query}}{{tag|e}}">{{tag|e}}</a>{% endfor %}</div></td>
+	<td class="board-max"><p class="board-cell">{{board['posts_total']}}</td>
 </tr>
 {% endfor %}

templates/8chan/boards.html

@@ -1,80 +0,0 @@
-<main id="boardlist">
-	<section class="description box col col-12">
-		<h2 class="box-title">Global Statistics</h2>
-		<p class="box-content">{% trans %}There are currently <strong>{{boards_public}}</strong> public boards, <strong>{{boards_total}}</strong> total. Site-wide, {{posts_hour}} posts have been made in the last hour, with {{posts_total}} being made on all active boards since {{founding_date}}.{% endtrans %}</p>
-		{% if uptime %}<p class="box-content">{{uptime}} without interruption</p>{% endif %}
-		<p class="box-content">This page last updated {{page_updated}}.</p>
-	</section>
-	
-	<div class="board-list">
-		<aside class="search-container col col-2">
-			<form id="search-form" class="box" method="post" target="/board-search.php">
-				<h2 class="box-title">Search</h2>
-				
-				<div class="board-search box-content">
-					<label class="search-item search-sfw">
-						<input type="checkbox" id="search-sfw-input" name="sfw" checked="checked" />&nbsp;NSFW boards
-					</label>
-					
-					<div class="search-item search-title">
-						<input type="text" id="search-title-input" name="title" placeholder="Search titles..." />
-					</div>
-					
-					<div class="search-item search-lang">
-						<select id="search-lang-input" name="lang">
-							<optgroup label="Popular">
-								<option>All languages</option>
-								<option>English</option>
-								<option>Spanish</option>
-							</optgroup>
-							<optgroup label="All">
-								<option>Chinese</option>
-							</optgroup>
-						</select>
-					</div>
-					
-					<div class="search-item search-tag">
-						<input type="text" id="search-tag-input" name="tag" placeholder="Search tags..." />
-					</div>
-					
-					<div class="search-item search-submit">
-						<button id="search-submit">Search</button>
-					</div>
-				</div>
-				
-				<ul class="tag-list box-content">
-					<li class="tag-item">
-						<a class="tag-link" href="#">{{html_tags}}</a> 
-					</li>
-				</ul>
-			</form>
-		</aside>
-		
-		<section class="board-list col col-10">
-			<table class="board-list-table">
-				<colgroup>
-					<col class="board-meta" />
-					<col class="board-uri" />
-					<col class="board-title" />
-					<col class="board-pph" />
-					<col class="board-max" />
-					<col class="board-unique" />
-					<col class="board-tags" />
-				</colgroup>
-				<thead>
-					<tr>
-						<th class="board-meta" data-column="meta"></th>
-						<th class="board-uri" data-column="uri">{% trans %}Board{% endtrans %}</th>
-						<th class="board-title" data-column="title">{% trans %}Title{% endtrans %}</th>
-						<th class="board-pph" data-column="pph" title="Posts per hour">{% trans %}PPH{% endtrans %}</th>
-						<th class="board-max" data-column="max">{% trans %}Total posts{% endtrans %}</th>
-						<th class="board-unique" data-column="unique" title="Unique IPs to post in the last 72 hours">{% trans %}Active users{% endtrans %}</th>
-						<th class="board-tags" data-column="tags">{% trans %}Tags{% endtrans %}</th>
-					</tr>
-				</thead>
-				
-				<tbody class="board-list-tbody">{{html_boards}}</tbody>
-			</table>
-		</section>
-	</div>
-</main>