New design for project landing pages and blogs

pillar/web/nodes/custom/posts.py

@@ -64,6 +64,7 @@ def posts_view(project_id=None, project_url=None, url=None, *, archive=False, pa
     # Use the *_main_project.html template for the main blog
     is_main_project = project_id == current_app.config['MAIN_PROJECT_ID']
     main_project_template = '_main_project' if is_main_project else ''
+    main_project_template = '_main_project'
     index_arch = 'archive' if archive else 'index'
     template_path = f'nodes/custom/blog/{index_arch}{main_project_template}.html',
 
@@ -111,6 +112,12 @@ def posts_view(project_id=None, project_url=None, url=None, *, archive=False, pa
     else:
         project.blog_archive_prev = None
 
+    title = 'blog_main' if is_main_project else 'blog'
+
+    pages = Node.all({
+        'where': {'project': project._id, 'node_type': 'page'},
+        'projection': {'name': 1}}, api=api)
+
     return render_template(
         template_path,
         blog=blog,
@@ -119,9 +126,10 @@ def posts_view(project_id=None, project_url=None, url=None, *, archive=False, pa
         posts_meta=pmeta,
         more_posts_available=pmeta['total'] > pmeta['max_results'],
         project=project,
-        title='blog',
+        title=title,
         node_type_post=project.get_node_type('post'),
         can_create_blog_posts=can_create_blog_posts,
+        pages=pages._items,
         api=api)
 
 

pillar/web/projects/routes.py

@@ -448,6 +448,17 @@ def view_node(project_url, node_id):
     # Append _theatre to load the proper template
     theatre = '_theatre' if theatre_mode else ''
 
+    if node.node_type == 'page':
+        pages = Node.all({
+            'where': {'project': project._id, 'node_type': 'page'},
+            'projection': {'name': 1}}, api=api)
+        return render_template('nodes/custom/page/view_embed.html',
+                               api=api,
+                               node=node,
+                               project=project,
+                               pages=pages._items,
+                               og_picture=og_picture,)
+
     extension_sidebar_links = current_app.extension_sidebar_links(project)
 
     return render_template('projects/view{}.html'.format(theatre),

src/styles/base.sass

@@ -1148,6 +1148,9 @@ button, .btn
 		z-index: 0
 
 		box-shadow: 0 0 15px rgba(black, .2), 0 0 100px rgba(black, .5)
+	p.caption
+		position: absolute
+		bottom: 1%
 
 	&.active
 		visibility: visible

src/styles/blog.sass

@@ -6,6 +6,8 @@
 @import _error
 @import _search
 
+.container-fluid.blog
+	padding: 0
 
 #blog_container
 	+media-xs
@@ -13,7 +15,6 @@
 		padding-top: 0
 	display: flex
 	padding:
-		top: 15px
 		bottom: 15px
 
 	video
@@ -178,11 +179,11 @@
 		clear: both
 		display: block
 	+media-sm
-		width: 60%
+		width: 100%
 	+media-md
-		width: 70%
+		width: 100%
 	+media-lg
-		width: 75%
+		width: 100%
 
 	.blog_index-header
 		border-top-left-radius: 3px
@@ -198,9 +199,9 @@
 
 	.blog_index-item
 		+media-lg
-			max-width: 880px
+			max-width: 780px
 		+media-md
-			max-width: 880px
+			max-width: 780px
 		+media-sm
 			max-width: 780px
 
@@ -248,7 +249,7 @@
 		ul.meta
 			+list-meta
 			font-size: .9em
-			padding: 15px 25px 5px
+			padding: 0px 25px 5px
 
 		.item-content
 			+node-details-description
@@ -480,7 +481,7 @@
 		#blog_index-container,
 		#blog_post-create-container,
 		#blog_post-edit-container
-			width: 90%
+			width: 100%
 			padding: 25px 30px 20px 30px
 
 		#blog_index-container+#blog_index-sidebar
@@ -505,7 +506,7 @@
 			&.list
 				margin: 0 auto
 				padding: 15px 0
-				margin: 0 80px
+				margin: 0 auto
 				border-bottom: thin solid $color-background
 
 				&:last-child
@@ -584,7 +585,7 @@
 		size: 1.2em
 		weight: 300
 	margin: 0 auto
-	max-width: 90%
+	max-width: 780px
 	text-align: center
 	+text-overflow-ellipsis
 

src/templates/nodes/custom/blog/_macros.pug

@@ -1,28 +1,53 @@
 //- ******************************************************* -//
-| {% macro render_blog_post(node) %}
+| {% macro render_blog_post(node, project=None) %}
 | {% if node.picture %}
 a.blog_index-header(href="{{ node.url }}")
 	img(src="{{ node.picture.thumbnail('l', api=api) }}")
 | {% endif %}
-
+| {% if project and project._id != config.MAIN_PROJECT_ID %}
+nav.navbar-secondary
+	.navbar-container
+		nav.collapse.navbar-collapse
+			ul.nav.navbar-nav.navbar-right
+				li
+					a.navbar-item(
+					href="{{ url_for('projects.view', project_url='hero') }}",
+					title="Hero Homepage")
+						span
+							b Hero
+				li
+					a.navbar-item.active(
+					href="{{ url_for('main.project_blog', project_url=project.url) }}",
+					title="Project Blog",
+					class="{% if category == 'blog' %}active{% endif %}")
+						span Blog
+				li
+					a.navbar-item(
+					href="{{ url_for('main.project_blog', project_url=project.url) }}",
+					title="Project Blog",
+					class="{% if category == 'blog' %}active{% endif %}")
+						span Explore
+| {% endif %}
 .blog_index-item
+	a.item-title(
+	href="{{ node.url }}")
+		| {{ node.name }}
 	ul.meta
 		| {% if node.project.name %}
 		li {{ node.project.name }}
 		| {% endif %}
-
+		| {% if node.user.full_name%}
+		li.who
+			| by {{ node.user.full_name }}
+		| {% endif %}
 		li.when
 			a(href="{{ node.url }}",
 				title="Updated {{ node._updated | pretty_date }}")
 				| {{ node._created | pretty_date }}
-
 		li
 			a(href="{{ node.url }}#comments")
 				| comment
 
-	a.item-title(
-		href="{{ node.url }}")
-		| {{ node.name }}
 
 	.item-content
 		| {{ node.properties | markdowned('content') }}
@@ -67,7 +92,7 @@ a.blog_index-header(href="{{ node.url }}")
 | {% endif %}
 
 | {% if posts %}
-| {{ render_blog_post(posts[0]) }}
+| {{ render_blog_post(posts[0], project=project) }}
 
 | {% for node in posts[1:] %}
 | {% if loop.first %}

src/templates/nodes/custom/blog/archive_main_project.pug

@@ -2,7 +2,7 @@
 | {% import 'nodes/custom/blog/_macros.html' as blogmacros %}
 
 | {% block body %}
-.container
+.container-fluid
 	#blog_container.cloud-blog
 		#blog_index-container
 			.blog_index-header

src/templates/nodes/custom/blog/index_main_project.pug

@@ -4,8 +4,13 @@
 
 | {% block page_title %}Blog{% endblock%}
 
+| {% block css %}
+| {{ super() }}
+link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
+| {% endblock css %}
+
 | {% block body %}
-.container
+.container-fluid.blog
 	#blog_container.cloud-blog
 		#blog_index-container.expand-image-links
 			| {{ blogmacros.render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta) }}

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

@@ -1,14 +1,16 @@
-| {% block body %}
+| {% extends 'projects/landing.html' %}
 
+| {% block body %}
+| {% if node.picture %}
+header
+	img.header(src="{{ node.picture.thumbnail('l', api=api) }}")
+| {% endif  %}
+| {% block navbar_secondary %}
+| {{ super() }}
+| {% endblock navbar_secondary %}
 #node-container
 	#node-overlay
 
-	| {% if node.picture %}
-	section#node-preview.node-preview.page
-		img.node-preview-thumbnail#node-preview-thumbnail(
-			src="{{ node.picture.thumbnail('l', api=api) }}")
-	| {% endif %}
-
 	section.node-details-container.page
 
 		.node-details-header
@@ -28,6 +30,7 @@ include ../_scripts
 | {% endblock %}
 
 | {% block footer_scripts %}
+| {{ super() }}
 script.
 	// Push the correct URL onto the history. This push happens after the id has
 	// been pushed to the history already. We should probably keep only this and
@@ -41,6 +44,9 @@ script.
 		url
 	);
 	// Generate GA pageview
-	ga('send', 'pageview', location.pathname);
+	$(document).ready(function () {
+		ga('send', 'pageview', location.pathname);
+	});
+
 | {% endblock %}
 

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

@@ -4,15 +4,13 @@
 
 	#blog_index-container.expand-image-links
 		.blog-action
-			| {% if project and project._id == config.MAIN_PROJECT_ID %}
 			| {% if node.has_method('PUT') %}
 			a.btn.btn-default.button-edit(href="{{url_for('nodes.edit', node_id=node._id)}}")
 				i.pi-edit
 				| Edit Post
 			| {% endif %}
-			| {% endif %}
 
-		| {{ blogmacros.render_blog_post(node) }}
+		| {{ blogmacros.render_blog_post(node, project=project) }}
 
 		#comments-embed
 			.comments-list-loading

src/templates/nodes/custom/post/view_main_project.pug

@@ -18,10 +18,15 @@ meta(property="og:image", content="{{ node.picture.thumbnail('l', api=api) }}")
 
 | {% block page_title %}{{node.name}} - Blog{% endblock%}
 
+| {% block css %}
+| {{ super() }}
+link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet")
+| {% endblock css %}
+
 | {% set title = 'blog' %}
 
 | {% block body %}
-.container
+.container-fluid.blog
 	| {% include 'nodes/custom/post/view_embed.html' %}
 | {% endblock %}
 

src/templates/nodes/edit_embed.pug

@@ -38,7 +38,6 @@
 
 		| {% elif field.type == 'HiddenField' %}
 		| {{ field }}
-
 		| {% elif field.name == 'attachments' %}
 		#attachments-actions
 			.btn.btn-info#attachments-action-add