From 59191124770d3591ffedac88da735b1b63b0e8a6 Mon Sep 17 00:00:00 2001
From: im-mi <im.mi.mail.mi@gmail.com>
Date: Tue, 6 Sep 2016 03:18:36 -0400
Subject: [PATCH] Use tables for tag lists

---
 ext/tag_list/theme.php     | 106 +++++++++++++++++++++----------------
 themes/danbooru/style.css  |   9 ++++
 themes/danbooru2/style.css |  10 ++++
 themes/default/style.css   |  10 ++++
 themes/futaba/style.css    |  14 +++++
 themes/lite/style.css      |  10 ++++
 themes/material/style.css  |   9 ++++
 themes/warm/style.css      |  11 ++++
 8 files changed, 132 insertions(+), 47 deletions(-)

diff --git a/ext/tag_list/theme.php b/ext/tag_list/theme.php
index 0e97abb5..886f1730 100644
--- a/ext/tag_list/theme.php
+++ b/ext/tag_list/theme.php
@@ -35,6 +35,29 @@ class TagListTheme extends Themelet {
 
 	// =======================================================================
 
+	protected function get_tag_list_preamble() {
+		global $config;
+
+		$tag_info_link_is_visible = !is_null($config->get_string('info_link'));
+		$tag_count_is_visible = $config->get_bool("tag_list_numbers");
+
+		return '
+			<table class="tag_list sortable">
+				<colgroup>' .
+					($tag_info_link_is_visible ? '<col class="tag_info_link_column">' : '') .
+					('<col class="tag_name_column">') .
+					($tag_count_is_visible ? '<col class="tag_count_column">' : '') . '
+				</colgroup>
+				<thead>
+					<tr>' .
+						($tag_info_link_is_visible ? '<th class="tag_info_link_cell"></th>' : '') .
+						('<th class="tag_name_cell">Tag</th>') .
+						($tag_count_is_visible ? '<th class="tag_count_cell">#</th>' : '') . '
+					</tr>
+				</thead>
+				<tbody>';
+	}
+
 	/*
 	 * $tag_infos = array(
 	 *                 array('tag' => $tag, 'count' => $number_of_uses),
@@ -61,9 +84,9 @@ class TagListTheme extends Themelet {
 			$category = $split[0];
 			$tag_html = $split[1];
 			if(!isset($tag_categories_html[$category])) {
-				$tag_categories_html[$category] = '';
+				$tag_categories_html[$category] = $this->get_tag_list_preamble();
 			}
-			$tag_categories_html[$category] .= $tag_html . '<br />';
+			$tag_categories_html[$category] .= "<tr>$tag_html</tr>";
 
 			if(!isset($tag_categories_count[$category])) {
 				$tag_categories_count[$category] = 0;
@@ -71,6 +94,10 @@ class TagListTheme extends Themelet {
 			$tag_categories_count[$category] += 1;
 		}
 
+		foreach(array_keys($tag_categories_html) as $category) {
+			$tag_categories_html[$category] .= '</tbody></table>';
+		}
+
 		asort($tag_categories_html);
 		if(isset($tag_categories_html[' '])) $main_html = $tag_categories_html[' ']; else $main_html = null;
 		unset($tag_categories_html[' ']);
@@ -99,10 +126,8 @@ class TagListTheme extends Themelet {
 	 *                 ...
 	 *              )
 	 */
-	public function display_related_block(Page $page, $tag_infos) {
-		global $config;
-
-		if($config->get_string('tag_list_related_sort') == 'alphabetical') asort($tag_infos);
+	private function get_tag_list_html($tag_infos, $sort) {
+		if($sort == 'alphabetical') asort($tag_infos);
 
 		if(class_exists('TagCategories')) {
 			$this->tagcategories = new TagCategories;
@@ -111,15 +136,32 @@ class TagListTheme extends Themelet {
 		else {
 			$tag_category_dict = array();
 		}
-		$main_html = '';
+		$main_html = $this->get_tag_list_preamble();
 
 		foreach($tag_infos as $row) {
 			$split = $this->return_tag($row, $tag_category_dict);
 			//$category = $split[0];
 			$tag_html = $split[1];
-			$main_html .= $tag_html . '<br />';
+			$main_html .= "<tr>$tag_html</tr>";
 		}
 
+		$main_html .= '</tbody></table>';
+
+		return $main_html;
+	}
+
+	/*
+	 * $tag_infos = array(
+	 *                 array('tag' => $tag, 'count' => $number_of_uses),
+	 *                 ...
+	 *              )
+	 */
+	public function display_related_block(Page $page, $tag_infos) {
+		global $config;
+
+		$main_html = $this->get_tag_list_html(
+			$tag_infos, $config->get_string('tag_list_related_sort'));
+
 		if($config->get_string('tag_list_image_type')=="tags") {
 			$page->add_block(new Block("Tags", $main_html, "left", 10));
 		}
@@ -138,25 +180,10 @@ class TagListTheme extends Themelet {
 	public function display_popular_block(Page $page, $tag_infos) {
 		global $config;
 
-		if($config->get_string('tag_list_popular_sort') == 'alphabetical') asort($tag_infos);
-
-		if(class_exists('TagCategories')) {
-			$this->tagcategories = new TagCategories;
-			$tag_category_dict = $this->tagcategories->getKeyedDict();
-		}
-		else {
-			$tag_category_dict = array();
-		}
-		$main_html = '';
-
-		foreach($tag_infos as $row) {
-			$split = self::return_tag($row, $tag_category_dict);
-			//$category = $split[0];
-			$tag_html = $split[1];
-			$main_html .= $tag_html . '<br />';
-		}
-
+		$main_html = $this->get_tag_list_html(
+			$tag_infos, $config->get_string('tag_list_popular_sort'));
 		$main_html .= "&nbsp;<br><a class='more' href='".make_link("tags")."'>Full List</a>\n";
+
 		$page->add_block(new Block("Popular Tags", $main_html, "left", 60));
 	}
 
@@ -170,25 +197,10 @@ class TagListTheme extends Themelet {
 	public function display_refine_block(Page $page, $tag_infos, $search) {
 		global $config;
 
-		if($config->get_string('tag_list_popular_sort') == 'alphabetical') asort($tag_infos);
-
-		if(class_exists('TagCategories')) {
-			$this->tagcategories = new TagCategories;
-			$tag_category_dict = $this->tagcategories->getKeyedDict();
-		}
-		else {
-			$tag_category_dict = array();
-		}
-		$main_html = '';
-
-		foreach($tag_infos as $row) {
-			$split = self::return_tag($row, $tag_category_dict);
-			//$category = $split[0];
-			$tag_html = $split[1];
-			$main_html .= $tag_html . '<br />';
-		}
-
+		$main_html = $this->get_tag_list_html(
+			$tag_infos, $config->get_string('tag_list_popular_sort'));
 		$main_html .= "&nbsp;<br><a class='more' href='".make_link("tags")."'>Full List</a>\n";
+
 		$page->add_block(new Block("refine Search", $main_html, "left", 60));
 	}
 
@@ -217,13 +229,13 @@ class TagListTheme extends Themelet {
 		// if($n++) $display_html .= "\n<br/>";
 		if(!is_null($config->get_string('info_link'))) {
 			$link = html_escape(str_replace('$tag', $tag, $config->get_string('info_link')));
-			$display_html .= ' <a class="tag_info_link'.$tag_category_css.'" '.$tag_category_style.'href="'.$link.'">?</a>';
+			$display_html .= ' <td class="tag_info_link_cell"><a class="tag_info_link'.$tag_category_css.'" '.$tag_category_style.'href="'.$link.'">?</a></td>';
 		}
 		$link = $this->tag_link($row['tag']);
-		$display_html .= ' <a class="tag_name'.$tag_category_css.'" '.$tag_category_style.'href="'.$link.'">'.$h_tag_no_underscores.'</a>';
+		$display_html .= ' <td class="tag_name_cell"><a class="tag_name'.$tag_category_css.'" '.$tag_category_style.'href="'.$link.'">'.$h_tag_no_underscores.'</a></td>';
 
 		if($config->get_bool("tag_list_numbers")) {
-			$display_html .= " <span class='tag_count'>$count</span>";
+			$display_html .= " <td class='tag_count_cell'><span class='tag_count'>$count</span></td>";
 		}
 
 		return array($category, $display_html);
diff --git a/themes/danbooru/style.css b/themes/danbooru/style.css
index 96dd79f3..480aba71 100644
--- a/themes/danbooru/style.css
+++ b/themes/danbooru/style.css
@@ -132,6 +132,15 @@ overflow:hidden;
 text-align:left;
 width:150px;
 }
+TABLE.tag_list {
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
 .tag_count {
 color:#AAAAAA;
 }
diff --git a/themes/danbooru2/style.css b/themes/danbooru2/style.css
index efa39edf..09771b8d 100644
--- a/themes/danbooru2/style.css
+++ b/themes/danbooru2/style.css
@@ -152,6 +152,16 @@ max-width:150px;
 width:15rem;
 text-align:left;
 }
+TABLE.tag_list {
+	width: auto;
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
 .tag_count {
 display:inline-block;
 margin-left:0.4rem;
diff --git a/themes/default/style.css b/themes/default/style.css
index 816e47a6..d79a9f4f 100644
--- a/themes/default/style.css
+++ b/themes/default/style.css
@@ -96,6 +96,16 @@ NAV SELECT {
 	padding: 0px;
 }
 
+TABLE.tag_list {
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
+
 .more:after {
 	content: " >>>";
 }
diff --git a/themes/futaba/style.css b/themes/futaba/style.css
index f58cbda1..f1015d29 100644
--- a/themes/futaba/style.css
+++ b/themes/futaba/style.css
@@ -61,6 +61,20 @@ TD {
 	vertical-align: top;
 }
 
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+*             the navigation bar, and all its blocks             *
+* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+TABLE.tag_list {
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                     specific page types                        *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
diff --git a/themes/lite/style.css b/themes/lite/style.css
index fe519214..f872f204 100644
--- a/themes/lite/style.css
+++ b/themes/lite/style.css
@@ -218,6 +218,16 @@ NAV SELECT {
 	text-align: left;
 }
 
+TABLE.tag_list {
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
+
 .more:after {
 	content: " >>>";
 }
diff --git a/themes/material/style.css b/themes/material/style.css
index d3aa59d7..41c1f704 100644
--- a/themes/material/style.css
+++ b/themes/material/style.css
@@ -1,3 +1,12 @@
 .nav-card{
   min-height: 3em;
 }
+TABLE.tag_list {
+  border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+  display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+  display: inline;
+}
\ No newline at end of file
diff --git a/themes/warm/style.css b/themes/warm/style.css
index 3bb5d01a..f1bae3f9 100644
--- a/themes/warm/style.css
+++ b/themes/warm/style.css
@@ -117,6 +117,17 @@ NAV SELECT {
 	padding: 0px;
 }
 
+TABLE.tag_list {
+	width: 100%;
+	border-collapse: collapse;
+}
+TABLE.tag_list>THEAD {
+	display: none;
+}
+TABLE.tag_list>TBODY>TR>TD {
+	display: inline;
+}
+
 .more:after {
 	content: " >>>";
 }