Use vertical nav

app/templates/packages/create_edit.html

@@ -25,6 +25,17 @@
 {% endblock %}
 
 {% block content %}
+	{% if package %}
+		<h2 class="mt-0">{{ _("Edit Details") }}</h2>
+	{% else %}
+		<h2 class="mt-0">
+			{{ _("Create Package") }}
+			{% if author != current_user %}
+				for {{ author.display_name }}
+			{% endif %}
+		</h2>
+	{% endif %}
+
 	{% if not package %}
 		<div class="alert alert-info">
 			<a class="float-right btn btn-sm btn-default" href="{{ url_for('flatpage', path='policy_and_guidance') }}">{{ _("View") }}</a>

app/templates/packages/edit_maintainers.html

@@ -4,8 +4,8 @@
 	{{ _("Edit Maintainers") }}
 {% endblock %}
 
-
 {% block content %}
+	<h2 class="mt-0">{{ _("Maintainers") }}</h2>
 	{% from "macros/forms.html" import render_submit_field, render_field %}
 	<p>
 		{{ _("Maintainers are given write access to the package.") }}

app/templates/packages/package_base.html

@@ -1,40 +1,33 @@
 {% extends "base.html" %}
 
 {% block container %}
-	{% if tabs %}
-		<nav class="pt-4 tabs-container">
-			<div class="container">
-				<a class="float-right btn btn-primary" href="{{ package.getDetailsURL() }}">
-					{{ _("View Package") }}
-				</a>
-				<h1 class="mb-5">
-					<a href="{{ package.getDetailsURL() }}">
-						{{ package.title }}
+<main class="container mt-4">
+	<div class="row">
+		{% if tabs %}
+			<div class="col-md-3 mb-4">
+				<div class="list-group">
+					<a class="list-group-item list-group-item-action" href="{{ package.getDetailsURL() }}">
+						<span class="row m-0 p-0">
+							<span class="col-auto m-0 p-0">
+								<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ package.getThumbnailURL() }}" alt="Thumbnail"  style="max-height: 20px;">
+							</span>
+							<span class="col m-0 p-0 pl-2">
+								{{ package.title }}
+							</span>
+						</span>
 					</a>
-				</h1>
-
-				<ul class="nav nav-tabs">
 					{% for item in tabs %}
-						<li class="nav-item">
-							<a href="{{ item.url }}" class="nav-link {% if item.id == current_tab %}active{% endif %}">
-								{{ item.title }}
-							</a>
-						</li>
+						<a href="{{ item.url }}"
+								class="list-group-item list-group-item-action {% if item.id == current_tab %}active{% endif %}">
+							{{ item.title }}
+						</a>
 					{% endfor %}
-				</ul>
+				</div>
 			</div>
-		</nav>
-	{% endif %}
-
-	{% if tabs %}
-		<main class="container mt-5">
+		{% endif %}
+		<div class="col {% if not tabs %}mt-4{% endif %}">
 			{{ self.content() }}
-		</main>
-	{% else %}
-		<main class="container mt-4">
-			<h1 class="mb-4">{{ self.title() }}</h1>
-
-			{{ self.content() }}
-		</main>
-	{% endif %}
+		</div>
+	</div>
+</main>
 {% endblock %}

app/templates/packages/remove.html

@@ -6,7 +6,7 @@ Remove {{ package.title }}
 
 {% block content %}
 	<form method="POST" action="">
-		<h2>Remove {{ package.title }}</h2>
+		<h2 class="mt-0">Remove {{ package.title }}</h2>
 		<p>
 			In order to avoid data loss, you cannot permanently delete packages.
 			You can remove them from ContentDB, which will cause them to not be