From 5fbe62105a0a096bc984b2803f6708379057e93b Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Wed, 25 Oct 2017 15:48:30 +0200 Subject: [PATCH] Blog: Minor layout tweaks * Make header image clickable * Make thumbnails on blog list clickable * Put action buttons in .blog-action for easier positioning * Cleanup --- src/styles/blog.sass | 8 ++++ src/templates/nodes/custom/blog/_macros.pug | 41 ++++++++++--------- src/templates/nodes/custom/blog/index.pug | 4 +- src/templates/nodes/custom/post/view.pug | 4 +- .../nodes/custom/post/view_embed.pug | 22 ++++------ 5 files changed, 43 insertions(+), 36 deletions(-) diff --git a/src/styles/blog.sass b/src/styles/blog.sass index e1ec09a0..0167f7f8 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -666,3 +666,11 @@ span color: $color-text-dark-secondary pointer-events: none + +.blog-action + display: flex + padding: 10px + position: absolute + right: 0 + top: 0 + z-index: 1 diff --git a/src/templates/nodes/custom/blog/_macros.pug b/src/templates/nodes/custom/blog/_macros.pug index 22734f92..2e775f45 100644 --- a/src/templates/nodes/custom/blog/_macros.pug +++ b/src/templates/nodes/custom/blog/_macros.pug @@ -1,62 +1,65 @@ //- ******************************************************* -// | {% macro render_blog_post(node) %} | {% if node.picture %} -.blog_index-header +a.blog_index-header(href="{{ url_for_node(node=node) }}") img(src="{{ node.picture.thumbnail('l', api=api) }}") | {% endif %} + .blog_index-item a.item-title( href="{{ url_for_node(node=node) }}") | {{node.name}} .item-info. - {{node._created | pretty_date }} + #[span(title="{{node._created}}") {{node._created | pretty_date }}] {% if node._created != node._updated %} - (updated {{node._updated | pretty_date }}) + #[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})] {% endif %} {% if node.properties.category %}| {{node.properties.category}}{% endif %} - | by {{node.user.full_name}} - | Leave a comment + · {{node.user.full_name}} + · #[a(href="{{ url_for_node(node=node) }}#comments") comment] {% if node.properties.status != 'published' %} | {{ node.properties.status}} {% endif %} .item-content - | {{node.properties.content}} + | {{ node.properties.content }} - .item-meta - a(href="{{ url_for_node(node=node) }}#comments") Leave a comment | {% endmacro %} //- ******************************************************* -// | {% macro render_blog_list_item(node) %} .blog_index-item.list + | {% if node.picture %} - .item-header + a.item-header(href="{{ url_for_node(node=node) }}") img.image(src="{{ node.picture.thumbnail('s', api=api) }}") | {% else %} - .item-header.nothumb + a.item-header.nothumb(href="{{ url_for_node(node=node) }}") i.pi-document-text | {% endif %} + a.item-title( href="{{ url_for_node(node=node) }}") | {{node.name}} .item-info. - {{node._created | pretty_date }} + #[span(title="{{node._created}}") {{node._created | pretty_date }}] {% if node._created != node._updated %} - (updated {{node._updated | pretty_date }}) + #[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})] {% endif %} - {% if node.properties.category %}| {{node.properties.category}}{% endif %} - | by {{node.user.full_name}} - {% if node.properties.status != 'published' %} | {{ node.properties.status}} {% endif %} + {% if node.properties.category %} · {{node.properties.category}}{% endif %} + · {{node.user.full_name}} + {% if node.properties.status != 'published' %} · {{ node.properties.status}} {% endif %} + | {% endmacro %} //- ******************************************************* -// | {% macro render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta) %} | {% if can_create_blog_posts %} -a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}") - i.pi-plus - | Create New Post +.blog-action + a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}") + i.pi-plus + | Create New Post | {% endif %} | {% if posts %} @@ -80,7 +83,7 @@ a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id | {% else %} .blog_index-item - .item-content No posts yet. + .item-content No posts... yet! | {% endif %} {# posts #} | {% endmacro %} diff --git a/src/templates/nodes/custom/blog/index.pug b/src/templates/nodes/custom/blog/index.pug index c202fe5e..946bb9c6 100644 --- a/src/templates/nodes/custom/blog/index.pug +++ b/src/templates/nodes/custom/blog/index.pug @@ -22,13 +22,13 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017 href="{{ url_for('projects.view', project_url=project.url) }}") | Browse Project - li.jstree-node.jstree-leaf(data-node-type="page") + li.jstree-node(data-node-type="page") a.jstree-anchor.jstree-clicked( href="{{ url_for('main.project_blog', project_url=project.url) }}") Blog | {% for post in posts %} li.jstree-node - a.jstree-anchor.tree-item( + a.jstree-anchor.tree-item.post( href="{{ url_for_node(node=post) }}") .tree-item-thumbnail | {% if post.picture %} diff --git a/src/templates/nodes/custom/post/view.pug b/src/templates/nodes/custom/post/view.pug index c46e9b12..a9634729 100644 --- a/src/templates/nodes/custom/post/view.pug +++ b/src/templates/nodes/custom/post/view.pug @@ -36,13 +36,13 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017 href="{{ url_for('projects.view', project_url=project.url) }}") | Browse Project - li.jstree-node.jstree-leaf(data-node-type="page") + li.jstree-node(data-node-type="page") a.jstree-anchor( href="{{ url_for('main.project_blog', project_url=project.url) }}") Blog | {% for post in posts %} li.jstree-node - a.jstree-anchor.tree-item( + a.jstree-anchor.tree-item.post( href="{{ url_for_node(node=post) }}", class="{% if post._id == node._id %}jstree-clicked{% endif %}") .tree-item-thumbnail diff --git a/src/templates/nodes/custom/post/view_embed.pug b/src/templates/nodes/custom/post/view_embed.pug index 06667089..28d4a843 100644 --- a/src/templates/nodes/custom/post/view_embed.pug +++ b/src/templates/nodes/custom/post/view_embed.pug @@ -2,19 +2,15 @@ #blog_container(class="{% if project and project._id == config.MAIN_PROJECT_ID %}cloud-blog{% endif %}") - #blog_post-container.expand-image-links - | {% if project and project._id == config.MAIN_PROJECT_ID %} - a.btn.btn-default.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog") - | Back to Blog - - | {% 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 %} - - .clearfix - | {% endif %} + #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) }}