From 8509b5fb0068d978f035c848057c403d9ee4eaf9 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sun, 19 Oct 2014 15:25:21 +0200
Subject: [PATCH] Improved tag list scaling

---
 public_html/css/tag-list.css       | 35 +++++++++++------
 public_html/templates/tag-list.tpl | 62 +++++++++++++++---------------
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/public_html/css/tag-list.css b/public_html/css/tag-list.css
index 3ea64989..7262ace3 100644
--- a/public_html/css/tag-list.css
+++ b/public_html/css/tag-list.css
@@ -1,22 +1,35 @@
-#tag-list {
-	min-width: 15em;
-	max-width: 40em;
-	margin: 0 auto;
+#tag-list-wrapper {
 	text-align: center;
 }
+#tag-list {
+	width: 100%;
+	display: inline-block;
+	margin: 0 auto;
+}
+@media all and (min-width: 67em) {
+	#tag-list {
+		width: 60em;
+	}
+}
+@media all and (max-width: 40em) {
+	#tag-list .implications,
+	#tag-list .suggestions {
+		display: none;
+	}
+}
 
 #tag-list form {
 	float: left;
 	white-space: nowrap;
 }
 #tag-list form input {
-	width: 10em;
+	width: 15em;
 }
-#tag-list ul {
+#tag-list ul.order {
 	float: right;
 	list-style-type: none;
 	padding: 0;
-	margin: 0;
+	margin: 0 -0.5em 0 0;
 }
 #tag-list .search:after {
 	display: block;
@@ -60,11 +73,9 @@
 	text-align: center;
 }
 
-@media all and (max-width: 40em) {
-	#tag-list .implications,
-	#tag-list .suggestions {
-		display: none;
-	}
+#tag-list .implications,
+#tag-list .suggestions {
+	word-break: break-all;
 }
 
 .tag-category-character,
diff --git a/public_html/templates/tag-list.tpl b/public_html/templates/tag-list.tpl
index e012a85a..6abce876 100644
--- a/public_html/templates/tag-list.tpl
+++ b/public_html/templates/tag-list.tpl
@@ -1,34 +1,36 @@
-<div id="tag-list">
-	<div class="search">
-		<form>
-			<input type="text" name="query" placeholder="Search tags..."/>
-			<button type="submit" name="search">Search</button>
-		</form>
+<div id="tag-list-wrapper">
+	<div id="tag-list">
+		<div class="search">
+			<form>
+				<input type="text" name="query" placeholder="Search tags..."/>
+				<button type="submit" name="search">Search</button>
+			</form>
 
-		<ul class="order">
-			<li>
-				<a class="big-button" href="#/tags/order=name,asc">Tags</a>
-			</li>
-			<li>
-				<a class="big-button" href="#/tags/order=creation_time,desc">Recent</a>
-			</li>
-			<li>
-				<a class="big-button" href="#/tags/order=usage_count,desc">Popular</a>
-			</li>
-		</ul>
-	</div>
+			<ul class="order">
+				<li>
+					<a class="big-button" href="#/tags/order=name,asc">Tags</a>
+				</li>
+				<li>
+					<a class="big-button" href="#/tags/order=creation_time,desc">Recent</a>
+				</li>
+				<li>
+					<a class="big-button" href="#/tags/order=usage_count,desc">Popular</a>
+				</li>
+			</ul>
+		</div>
 
-	<div class="pagination-target">
-		<table class="tags">
-			<thead>
-				<th class="name">Tag name</th>
-				<th class="implications">Implications</th>
-				<th class="suggestions">Suggestions</th>
-				<th class="usages">Usages</th>
-				<th class="banned">Usable?</th>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
+		<div class="pagination-target">
+			<table class="tags">
+				<thead>
+					<th class="name">Tag name</th>
+					<th class="implications">Implications</th>
+					<th class="suggestions">Suggestions</th>
+					<th class="usages">Usages</th>
+					<th class="banned">Usable?</th>
+				</thead>
+				<tbody>
+				</tbody>
+			</table>
+		</div>
 	</div>
 </div>