Embed iframe shortcodes into container

pillar/shortcodes.py

@@ -163,8 +163,11 @@ class YouTube:
             return html_module.escape('{youtube invalid YouTube ID/URL}')
 
         src = f'https://www.youtube.com/embed/{youtube_id}?rel=0'
-        html = f'<iframe class="shortcode youtube" width="{width}" height="{height}" src="{src}"' \
+        iframe_tag = f'<iframe class="shortcode youtube embed-responsive-item" width="{width}"' \
-               f' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
+                     f' height="{height}" src="{src}" frameborder="0" allow="autoplay; encrypted-media"' \
+                     f' allowfullscreen></iframe>'
+        # Embed the iframe in a container, to allow easier styling
+        html = f'<div class="embed-responsive embed-responsive-16by9">{iframe_tag}</div>'
         return html
 
 

src/templates/nodes/custom/page/view_embed.pug

@@ -1,24 +1,24 @@
 | {% extends 'projects/landing.html' %}
 
 | {% block body %}
+
 | {% if node.picture %}
 header
-	img.header(src="{{ node.picture.thumbnail('h', api=api) }}")
+	.jumbotron.jumbotron-fluid(
+		style="background-image: url('{{ node.picture.thumbnail('h', api=api) }}'); background-position: 50% 50%;")
 | {% endif  %}
+
+| {# Secondary Navigation #}
 | {% block navbar_secondary %}
 | {{ super() }}
 | {% endblock navbar_secondary %}
-#node-container
-	#node-overlay
 
-	section.node-details-container.page
+.container.landing
-
+	section.node-details-container.project
-		.node-details-header
+		.node-details-title.container
-			.node-title#node-title
+			h1 {{node.name}}
-				| {{node.name}}
 
 			| {% if node.description %}
-		.node-details-description#node-description
 			| {{ node | markdowned('description') }}
 			| {% endif %}
 

src/templates/projects/_macros.pug

@@ -1,30 +1,30 @@
 | {% macro render_secondary_navigation(project, pages=None) %}
-nav.navbar-secondary
+.container.navbar-secondary
-	.navbar-container
+	ul.nav.justify-content-left
-		nav.collapse.navbar-collapse
+		li.nav-item
-			ul.nav.navbar-nav.navbar-right
+			a.nav-link.nav-title(
-				li
-					a.navbar-item(
 				href="{{ url_for('projects.view', project_url=project.url) }}",
-						title="{{ project.name }} Homepage")
+				title="{{ project.name }} Homepage") {{ project.name }}
-						span
+		li.nav-item
-							b {{ project.name }}
+			a.nav-link(
-				li
-					a.navbar-item(
 				href="{{ url_for('main.project_blog', project_url=project.url) }}",
-					title="Project Blog",
+				class="{% if title == 'updates' %}active{% endif %}") Updates
-					class="{% if category == 'blog' %}active{% endif %}")
-						span Blog
 		| {% if pages %}
-				| {% for p in pages %}
+		| {% for page in pages %}
-				li
+		li.nav-item
-					a.navbar-item(
+			a.nav-link(
-					href="{{ url_for('projects.view_node', project_url=project.url, node_id=p._id) }}",
+				href="{{ url_for('projects.view_node', project_url=project.url, node_id=page._id) }}",
-					title="{{ p.name }}",
+				class="{% if title == 'updates' %}active{% endif %}") {{ page.name }}
-					class="{% if category == 'page' %}active{% endif %}")
-						span {{ p.name }}
 		| {% endfor %}
 		| {% endif %}
+		li.nav-item
+			a.nav-link(
+				href="/projects/gallery.html",
+				class="{% if title == 'gallery' %}active{% endif %}") Gallery
+		li.nav-item
+			a.nav-link(
+				href="#",
+				class="{% if title == 'assets' %}active{% endif %}") Assets
 		| {% if project.nodes_featured %}
 		| {# In some cases featured_nodes might might be embedded #}
 		| {% if '_id' in project.nodes_featured[0] %}
@@ -32,11 +32,10 @@ nav.navbar-secondary
 		| {% else %}
 		| {% set featured_node_id=project.nodes_featured[0] %}
 		| {% endif %}
-				li
-					a.navbar-item(
-					href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}",
-					title="Explore {{ project.name }}",
-					class="{% if category == 'blog' %}active{% endif %}")
-						span Explore
 		| {% endif %}
+		li.nav-item
+			a.nav-link(
+			href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}",
+			title="Explore {{ project.name }}") Dashboard
+
 | {% endmacro %}