Blog: Minor layout tweaks

* Make header image clickable
* Make thumbnails on blog list clickable
* Put action buttons in .blog-action for easier positioning
* Cleanup
This commit is contained in:
Pablo Vazquez 2017-10-25 15:48:30 +02:00
parent 771b93b169
commit 5fbe62105a
5 changed files with 43 additions and 36 deletions

View File

@ -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

View File

@ -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.
<span title="{{node._created}}">{{node._created | pretty_date }}</span>
#[span(title="{{node._created}}") {{node._created | pretty_date }}]
{% if node._created != node._updated %}
<span title="{{node._updated}}">(updated {{node._updated | pretty_date }})</span>
#[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})]
{% endif %}
{% if node.properties.category %}| {{node.properties.category}}{% endif %}
| by {{node.user.full_name}}
| <a href="{{ url_for_node(node=node) }}#comments">Leave a comment</a>
· {{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.
<span title="{{node._created}}">{{node._created | pretty_date }}</span>
#[span(title="{{node._created}}") {{node._created | pretty_date }}]
{% if node._created != node._updated %}
<span title="{{node._updated}}">(updated {{node._updated | pretty_date }})</span>
#[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 %}

View File

@ -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 %}

View File

@ -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

View File

@ -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) }}