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,26 +1,26 @@
 | {% 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-title.container
+			h1 {{node.name}}
 
-		.node-details-header
+			| {% if node.description %}
-			.node-title#node-title
-				| {{node.name}}
-
-		| {% if node.description %}
-		.node-details-description#node-description
 			| {{ node | markdowned('description') }}
-		| {% endif %}
+			| {% endif %}
 
 		.node-details-meta.footer
 			span.updated(title="created {{ node._created | pretty_date }}") updated {{ node._updated | pretty_date }}

src/templates/projects/_macros.pug

@@ -1,42 +1,41 @@
 | {% 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
+				href="{{ url_for('projects.view', project_url=project.url) }}",
-					a.navbar-item(
+				title="{{ project.name }} Homepage") {{ project.name }}
-						href="{{ url_for('projects.view', project_url=project.url) }}",
+		li.nav-item
-						title="{{ project.name }} Homepage")
+			a.nav-link(
-						span
+				href="{{ url_for('main.project_blog', project_url=project.url) }}",
-							b {{ project.name }}
+				class="{% if title == 'updates' %}active{% endif %}") Updates
-				li
+		| {% if pages %}
-					a.navbar-item(
+		| {% for page in pages %}
-					href="{{ url_for('main.project_blog', project_url=project.url) }}",
+		li.nav-item
-					title="Project Blog",
+			a.nav-link(
-					class="{% if category == 'blog' %}active{% endif %}")
+				href="{{ url_for('projects.view_node', project_url=project.url, node_id=page._id) }}",
-						span Blog
+				class="{% if title == 'updates' %}active{% endif %}") {{ page.name }}
-				| {% if pages %}
+		| {% endfor %}
-				| {% for p in pages %}
+		| {% endif %}
-				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="/projects/gallery.html",
-					title="{{ p.name }}",
+				class="{% if title == 'gallery' %}active{% endif %}") Gallery
-					class="{% if category == 'page' %}active{% endif %}")
+		li.nav-item
-						span {{ p.name }}
+			a.nav-link(
-				| {% endfor %}
+				href="#",
-				| {% endif %}
+				class="{% if title == 'assets' %}active{% endif %}") Assets
-				| {% if project.nodes_featured %}
+		| {% if project.nodes_featured %}
-				| {# In some cases featured_nodes might might be embedded #}
+		| {# In some cases featured_nodes might might be embedded #}
-				| {% if '_id' in project.nodes_featured[0] %}
+		| {% if '_id' in project.nodes_featured[0] %}
-				| {% set featured_node_id=project.nodes_featured[0]._id %}
+		| {% set featured_node_id=project.nodes_featured[0]._id %}
-				| {% else %}
+		| {% else %}
-				| {% set featured_node_id=project.nodes_featured[0] %}
+		| {% set featured_node_id=project.nodes_featured[0] %}
-				| {% endif %}
+		| {% endif %}
-				li
+		| {% endif %}
-					a.navbar-item(
+		li.nav-item
-					href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}",
+			a.nav-link(
-					title="Explore {{ project.name }}",
+			href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}",
-					class="{% if category == 'blog' %}active{% endif %}")
+			title="Explore {{ project.name }}") Dashboard
-						span Explore
+
-				| {% endif %}
 | {% endmacro %}