Fix and tweaks to theatre mode

* Only show width/height if available (would be None otherwise)
* If image width/height is not available, allow zooming
* Fix styling and cleanup
* Remove footer (reported by Vulp35 on Twitter, thanks!)

src/templates/nodes/custom/asset/view_theatre_embed.pug

@@ -1,4 +1,4 @@
-#theatre-media
+#theatre-media.d-flex.justify-content-center.align-items-center.bg-dark
 	img(src="{{ node.picture.thumbnail('h', api=api) }}", onmousedown="return false")
 
 	ul#theatre-tools
@@ -18,19 +18,21 @@
 				i.pi-download
 		| {% endif %}
 
-#theatre-info
-	.theatre-info-header
-		.theatre-info-title {{ node.name }}
-		.theatre-info-user {{ node.user.full_name }}
-		.theatre-info-date {{ node._created | pretty_date_time }}
+#theatre-info.bg-white.h-100
+	h5.p-3 {{ node.name }}
+	small.d-flex.text-secondary.pl-3
+		span.font-weight-bold {{ node.user.full_name }}
+		span.px-3 {{ node._created | pretty_date_time }}
 
-	ul.theatre-info-details
+	ul.theatre-info-details.border-bottom.mb-3.p-3.list-unstyled
 		li
 			span Type
 			span {{ node.file.content_type }}
+		| {% if node.file.width %}
 		li
 			span Dimensions
 			span {{ node.file.width }} <small>x</small> {{ node.file.height }}
+		| {% endif %}
 		li
 			span Size
 			span {{ node.file.length | filesizeformat }}
@@ -41,21 +43,22 @@
 		| {% endif %}
 
 	#comments-embed
-		.comments-list-loading
-			i.pi-spin
 
 include ../_scripts
 
 script.
 	$(function () {
 
-		var file_width = {{ node.file.width }};
-		var file_height = {{ node.file.height }};
+		var file_width = '{{ node.file.width }}';
+		var file_height = '{{ node.file.height }}';
 		var theatre_media = document.getElementById('theatre-media');
 		var $theatre_media = $(theatre_media);
 
 		function canZoom() {
-			return theatre_media.scrollWidth < file_width ||
+			// If there is no width/height defined, let's just let it zoom.
+			// It might just be a non-image asset, like a file.
+			return file_width == 'None' ||
+					theatre_media.scrollWidth < file_width ||
 					theatre_media.scrollHeight < file_height;
 		}
 
@@ -90,7 +93,7 @@ script.
 			theatreZoom();
 		});
 
-		$('ul.nav.navbar-nav a.navbar-item.info').on('click', function (e) {
+		$('.js-toggle-info').on('click', function (e) {
 			e.preventDefault();
 			$('#theatre-container').toggleClass('with-info');
 		});

src/templates/projects/view_theatre.pug

@@ -21,10 +21,10 @@ meta(property="twitter:image", content="{{ og_picture.thumbnail('l', api=api) }}
 
 | {% block navigation_search %}{% endblock %}
 | {% block navigation_sections %}
-li
-	a.navbar-item.info(
-		href="",
-		title="Toggle info & sidebar")
+li.nav-item
+	a.nav-link.js-toggle-info(
+		href="#",
+		title="Toggle sidebar")
 		i.pi-info
 | {% endblock %}
 
@@ -34,7 +34,8 @@ link(href="{{ url_for('static_pillar', filename='assets/css/theatre.css') }}", r
 | {% endblock %}
 
 | {% block body %}
-#theatre-container(class="{% if current_user.is_authenticated %}with-info{% endif %}")
+#theatre-container.d-flex.position-relative.h-100.overflow-hidden(
+	class="{% if current_user.is_authenticated %}with-info{% endif %}")
 
 | {% endblock %}
 
@@ -48,5 +49,4 @@ script.
 	});
 | {% endblock %}
 
-| {% block footer %}{% endblock %}
-| {% block footer_navigation %}{% endblock %}
+| {% block footer_container %}{% endblock %}