wam: More styling work

data/tools/addon_manager/html.py

@@ -87,8 +87,17 @@ def output(path, url, data):
     w("<table class=\"tablesorter\" id=\"campaigns\">")
     w("<thead>")
     w("<tr>")
-    for header in ["Type", "Icon", "Addon", "Size", "Traffic", "Date", "Translations"]:
-        w("<th>%s&nbsp;&nbsp;&nbsp;</th>" % header)
+    table_headers = [
+        ("type",    "Type"),
+        ("icon",    "Icon"),
+        ("name",    "Addon"),
+        ("size",    "Size"),
+        ("stats",   "Traffic"),
+        ("date",    "Date"),
+        ("locales", "Translations")
+    ]
+    for header_class, header_label in table_headers:
+        w("<th class=\"addon-%s\">%s&nbsp;&nbsp;&nbsp;</th>" % (header_class, header_label))
     w("</tr>")
     w("</thead>")
     w("<tbody>")
@@ -171,12 +180,12 @@ Unit packs, terrain packs, music packs, etc. Usually a (perhaps optional) depend
         else:
             w(type)
         w('</td>')
-        w(('<td><img alt="%s" src="%s" width="72" height="72"/>'
+        w(('<td class="addon-icon"><img alt="%s" src="%s" width="72" height="72"/>'
             ) % (icon, imgurl))
         described = htmlescape(v("description", "(no description)"))
         w('<div class="desc-tooltip"><b>%s</b><pre>%s</pre></div></td>' % (
             name, described))
-        w("<td>")
+        w("<td class=\"addon\">")
         if url:
             link = url.rstrip("/") + "/" + htmlescape(v("name")) + ".tar.bz2"
             w("""\

data/tools/addon_manager/style.css

@@ -14,10 +14,6 @@ table#campaigns th {
 	text-align: left;
 }
 
-table#campaigns td img {
-	float: left;
-}
-
 div.type-tooltip,
 div.desc-tooltip {
 	display: none;
@@ -96,10 +92,33 @@ table.tablesorter thead tr .headerSortDown {
 	background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m%2015.502%2C11.002%20-5%2C-5.001%20-5%2C5.001%20z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E');
 }
 
-.addon-type {
+th.addon-icon {
+	width: 72px;
+	min-width: 72px;
+}
+
+th.addon-name {
+	width: 45%;
+}
+
+th.addon-size,
+th.addon-stats {
+	width: 10%;
+}
+
+th.addon-date,
+th.addon-locales {
+	width: 12%;
+}
+
+td.addon-type {
 	padding-top: 24px; /* a little bit more than 25% image height (72px) */
 }
 
+td.addon-icon {
+	text-align: center;
+}
+
 .addon-meta {
 	font-size: 0.9em;
 }
@@ -109,7 +128,23 @@ table.tablesorter thead tr .headerSortDown {
 }
 
 .addon-download {
-	display: inline-block;
+	display: block;
 	float: right;
 	margin: 0 0 0.9em 0.9em;
+	text-align: center;
+}
+
+@media screen and (max-width: 699px) {
+	th.addon-icon {
+		min-width: 0;
+	}
+
+	.addon-download {
+		float: none;
+		margin: 0.3em 0.9em;
+	}
+
+	td.addon {
+		text-align: center;
+	}
 }