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/styles/theatre.sass

@@ -1,21 +1,53 @@
-@import base
+// Bootstrap variables and utilities.
-@import _comments
+@import "../../node_modules/bootstrap/scss/functions"
+@import "../../node_modules/bootstrap/scss/variables"
+@import "../../node_modules/bootstrap/scss/mixins"
+
+// Pillar variables and utilities.
+@import "config"
+@import "utils"
+
+// Bootstrap components.
+@import "../../node_modules/bootstrap/scss/root"
+@import "../../node_modules/bootstrap/scss/reboot"
+
+@import "../../node_modules/bootstrap/scss/type"
+
+@import "../../node_modules/bootstrap/scss/code"
+@import "../../node_modules/bootstrap/scss/grid"
+@import "../../node_modules/bootstrap/scss/dropdown"
+
+@import "../../node_modules/bootstrap/scss/nav"
+@import "../../node_modules/bootstrap/scss/navbar"
+
+@import "../../node_modules/bootstrap/scss/tooltip"
+
+@import "../../node_modules/bootstrap/scss/utilities"
+
+
+// Pillar components.
+@import "apps_base"
+
+@import "components/navbar"
+@import "components/dropdown"
+@import "components/footer"
+@import "components/shortcode"
+
+@import "components/flyout"
+@import "components/buttons"
+@import "components/popover"
+@import "components/tooltip"
+@import "components/checkbox"
+@import "components/overlay"
+@import "components/card"
+
+@import "comments"
+@import "notifications"
 
-$color-theatre-background: #222
-$color-theatre-background-light: lighten($color-theatre-background, 5%)
-$color-theatre-background-dark: darken($color-theatre-background, 5%)
 
 $theatre-width: 350px
 
 body.theatre
-	background-color: $color-theatre-background
-	nav.navbar
-		+media-lg
-			background-color: $color-background-nav
-			background-image: none
-		a.navbar-item.info
-			font-size: 1.4em
-
 	.page-content
 		position: absolute
 		top: 0
@@ -32,15 +64,7 @@ body.theatre
 
 
 #theatre-container
-	display: flex
-	position: relative
-	height: 100%
-	overflow: hidden
-
 	#theatre-media
-		display: flex
-		align-items: center
-		justify-content: center
 		height: 100%
 		width: 100%
 		padding: 25px
@@ -53,7 +77,6 @@ body.theatre
 
 		img
 			display: block
-			border: thin solid $color-theatre-background-light
 			box-shadow: 1px 1px 10px rgba(black, .2)
 			max-width: 100%
 			max-height: 100%
@@ -135,42 +158,16 @@ body.theatre
 					display: block
 
 	#theatre-info
+		min-width: $theatre-width
+		overflow-y: auto
+		position: absolute
+		right: -$theatre-width
+		top: 0
+		transition: right 200ms ease-in-out
 		visibility: hidden
 		width: $theatre-width
-		min-width: $theatre-width
-		height: 100%
-		position: relative
-		top: 0
-		right: -$theatre-width
-		background-color: white
-		border-left: 2px solid $color-background-nav
-		transition: right 200ms ease-in-out
-		position: absolute
-		overflow-y: auto
-
-		.theatre-info-header
-			border-bottom: thin solid $color-background
-			padding-bottom: 10px
-
-			.theatre-info-title
-				padding: 20px 10px 5px 20px
-				font:
-					size: 1.2em
-					weight: 500
-			.theatre-info-user,
-			.theatre-info-date
-				display: inline-block
-				padding: 0 0 0 20px
-				font-size: .9em
-				color: $color-text-dark-secondary
-
 
 		ul.theatre-info-details
-			padding: 10px 20px 0 20px
-			margin: 0
-			list-style: none
-			color: $color-text-dark-primary
-
 			li
 				display: flex
 				padding: 2px 0

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.bg-white.h-100
-	.theatre-info-header
+	h5.p-3 {{ node.name }}
-		.theatre-info-title {{ node.name }}
+	small.d-flex.text-secondary.pl-3
-		.theatre-info-user {{ node.user.full_name }}
+		span.font-weight-bold {{ node.user.full_name }}
-		.theatre-info-date {{ node._created | pretty_date_time }}
+		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_width = '{{ node.file.width }}';
-		var file_height = {{ node.file.height }};
+		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
+li.nav-item
-	a.navbar-item.info(
+	a.nav-link.js-toggle-info(
-		href="",
+		href="#",
-		title="Toggle info & sidebar")
+		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_container %}{% endblock %}
-| {% block footer_navigation %}{% endblock %}