Improve package list design

app/scss/components.scss

@@ -22,10 +22,20 @@ a:hover {
 .box {
 	border-radius: 5px;
 	margin: 15px 0;
+	padding: 0;
+}
+
+.box h3 {
+	margin: 0;
+	padding: 1em 0.5em 0.5em 15px;
+	border-bottom: 1px solid #444;
+}
+
+.box p, .box table {
+	margin: 1em;
 }
 
 .box_grey {
-	padding: 10px;
 	background: #333;
 	border: 1px solid #444;
 }
@@ -217,3 +227,50 @@ table.fancyTable tfoot td {
 .EDITOR a, a.EDITOR {
 	color: #b6f;
 }
+
+/*
+	Aside
+*/
+
+.asideright {
+	float: right;
+	margin: 0 0 0 15px;
+	max-width: 300px;
+}
+
+.outsidecontainer {
+	position: absolute;
+	right: 102%;
+	top: 0;
+	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+	width: -moz-max-content;    /* Firefox/Gecko */
+	width: -webkit-max-content; /* Chrome */
+}
+
+@media (max-width: 1490px) {
+	.outsidecontainer {
+		display: none;
+	}
+}
+
+.flatlist, .flatlist li {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.flatlist li {
+	display: block;
+}
+
+.flatlist a {
+	display: block;
+	padding: 0.5em 20px;
+	color: #ddd;
+	font-weight: normal;
+}
+
+.flatlist a:hover {
+	background: #444;
+	text-decoration: none;
+}

app/scss/page.scss

@@ -16,6 +16,8 @@ html, body {
 
 main {
 	padding: 7px 0;
+	position: relative;
+	box-sizing: border-box;
 }
 
 header h1, header p, header form {
@@ -44,9 +46,3 @@ footer a {
 footer a:hover {
 	color: #bbb;
 }
-
-.asideright {
-	float: right;
-	margin: 0 0 0 15px;
-	max-width: 300px;
-}

app/templates/packages/list.html

@@ -11,27 +11,20 @@
 		<input type="submit" value="Search" />
 	</form>
 
-	<ul>
-		{% for p in packages %}
-			<li><a href="{{ p.getDetailsURL() }}">
-				{{ p.title }} by {{ p.author.display_name }}
-			</a></li>
-		{% else %}
-			<li><i>No packages available</i></ul>
-		{% endfor %}
-	</ul>
+	<aside class="box box_grey outsidecontainer">
+		<h3>Tags</h3>
 
-	<h3>Tags</h3>
-	<div class="box box_grey alert alert-warning">
-		Filtering by tag doesn't actually work yet!
-	</div>
-	<ul>
-		{% for t in tags %}
-			<li><a href="{{ url_for('packages_page', q=(query or '')+' tag:'+t.name, type=type) }}">
-				{{ t.title }}
-			</a></li>
-		{% else %}
-			<li><i>No tags available</i></ul>
-		{% endfor %}
-	</ul>
+		<ul class="flatlist">
+			{% for t in tags %}
+				<li><a href="{{ url_for('packages_page', q=(query or '')+' tag:'+t.name, type=type) }}">
+					{{ t.title }}
+				</a></li>
+			{% else %}
+				<li><i>No tags available</i></ul>
+			{% endfor %}
+		</ul>
+	</aside>
+
+	{% from "macros/packagegridtile.html" import render_pkggrid %}
+	{{ render_pkggrid(packages) }}
 {% endblock %}