From 505e3c3a6d443cdb3e934118437d02d300112c6e Mon Sep 17 00:00:00 2001 From: Francesco Siddi Date: Mon, 16 Apr 2018 14:33:38 +0200 Subject: [PATCH] New design for project landing pages and blogs --- pillar/web/nodes/custom/posts.py | 10 ++++- pillar/web/projects/routes.py | 11 +++++ src/styles/base.sass | 3 ++ src/styles/blog.sass | 21 +++++----- src/templates/nodes/custom/blog/_macros.pug | 41 +++++++++++++++---- .../custom/blog/archive_main_project.pug | 2 +- .../nodes/custom/blog/index_main_project.pug | 7 +++- .../nodes/custom/page/view_embed.pug | 22 ++++++---- .../nodes/custom/post/view_embed.pug | 4 +- .../nodes/custom/post/view_main_project.pug | 7 +++- src/templates/nodes/edit_embed.pug | 1 - 11 files changed, 95 insertions(+), 34 deletions(-) diff --git a/pillar/web/nodes/custom/posts.py b/pillar/web/nodes/custom/posts.py index 1688e250..586671a1 100644 --- a/pillar/web/nodes/custom/posts.py +++ b/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) diff --git a/pillar/web/projects/routes.py b/pillar/web/projects/routes.py index 714329ea..d26faf57 100644 --- a/pillar/web/projects/routes.py +++ b/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), diff --git a/src/styles/base.sass b/src/styles/base.sass index 82896766..64f93ec9 100644 --- a/src/styles/base.sass +++ b/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 diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 916d0399..42970519 100644 --- a/src/styles/blog.sass +++ b/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 diff --git a/src/templates/nodes/custom/blog/_macros.pug b/src/templates/nodes/custom/blog/_macros.pug index 834e6d0c..81207735 100644 --- a/src/templates/nodes/custom/blog/_macros.pug +++ b/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 %} diff --git a/src/templates/nodes/custom/blog/archive_main_project.pug b/src/templates/nodes/custom/blog/archive_main_project.pug index b3144f25..6ef9952a 100644 --- a/src/templates/nodes/custom/blog/archive_main_project.pug +++ b/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 diff --git a/src/templates/nodes/custom/blog/index_main_project.pug b/src/templates/nodes/custom/blog/index_main_project.pug index f5255791..3d27d2cd 100644 --- a/src/templates/nodes/custom/blog/index_main_project.pug +++ b/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) }} diff --git a/src/templates/nodes/custom/page/view_embed.pug b/src/templates/nodes/custom/page/view_embed.pug index a8059131..6b881162 100644 --- a/src/templates/nodes/custom/page/view_embed.pug +++ b/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 %} diff --git a/src/templates/nodes/custom/post/view_embed.pug b/src/templates/nodes/custom/post/view_embed.pug index 28d4a843..3922fab9 100644 --- a/src/templates/nodes/custom/post/view_embed.pug +++ b/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 diff --git a/src/templates/nodes/custom/post/view_main_project.pug b/src/templates/nodes/custom/post/view_main_project.pug index ad9ffc97..c8c48071 100644 --- a/src/templates/nodes/custom/post/view_main_project.pug +++ b/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 %} diff --git a/src/templates/nodes/edit_embed.pug b/src/templates/nodes/edit_embed.pug index 30cd2150..cfe935b3 100644 --- a/src/templates/nodes/edit_embed.pug +++ b/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