Revised layout of blog
This commit is contained in:
parent
23ca30bf45
commit
b8917619f5
4 changed files with 175 additions and 102 deletions
|
|
@ -24,9 +24,17 @@
|
|||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="{{ blog_page.title }}" />
|
||||
<meta name="twitter:description" content="{{ blog_page.description }}" />
|
||||
|
||||
<link rel="alternate" type="application/rss+xml"
|
||||
title="{{ blog_page.title }}" href="{% feeds_url blog_page %}">
|
||||
|
||||
{% endblock social_share %}
|
||||
|
||||
{% block blog_content %}
|
||||
<section id="blog">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
{% with per_page=blog_page.num_entries_page %}
|
||||
{# 'paginate' tag cannot render dotted variables, so we need to create a context var #}
|
||||
{% paginate per_page entries %}
|
||||
|
|
@ -44,44 +52,39 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<article class="box page-content blog_grid">
|
||||
<section>
|
||||
{% if entry.header_image %}
|
||||
<span class="img-responsive"><a href="{{ post_url }}">
|
||||
{% image entry.header_image fill-800x240 as header_image %}
|
||||
<img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
|
||||
</a></span>
|
||||
{% endif %}
|
||||
<!--{% include 'puput/entry_links.html' %}-->
|
||||
</section>
|
||||
<section class="article">
|
||||
<h4><a href="{{ post_url }}">{{ entry.title }}</a></h4>
|
||||
{% if entry.excerpt %}
|
||||
{{ entry.excerpt|richtext }}
|
||||
{% else %}
|
||||
{{ entry.body|richtext|truncatewords_html:70 }}
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<ul class="social-share col-md-9">
|
||||
<li class="social-item">
|
||||
{% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_twitter entry.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-md-3">
|
||||
<a class="blog_btn continue" href="{{ post_url }}">/{{ entry.slug|truncatechars:25 }} »</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
{% if forloop.counter0|divisibleby:3 %}
|
||||
</div><div class="row">
|
||||
{% endif %}
|
||||
|
||||
<!-- Blog post {{ entry.id }} -->
|
||||
<div class="col-md-4 blog-entry">
|
||||
<a href="{{ post_url }}">
|
||||
<div class="panel panel-default">
|
||||
{% if entry.header_image %}
|
||||
{% image entry.header_image fill-360x270 %}
|
||||
{% endif %}
|
||||
<div class="panel-body">
|
||||
{% for category in entry.categories.all %}
|
||||
<div class="entry-category">{{ category.name }}</div>
|
||||
{% endfor %}
|
||||
|
||||
<h3 class="entry-title">{{ entry.title }}</h3>
|
||||
|
||||
<p>
|
||||
{% if entry.excerpt %}
|
||||
{{ entry.excerpt|safe }}
|
||||
{% else %}
|
||||
{{ entry.body|striptags|truncatewords_html:40 }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<span class="entry-meta">
|
||||
{{ entry.date|date:"d.m.Y" }}
|
||||
</span>
|
||||
</div><!-- -/panel-body -->
|
||||
</div><!-- -/panel -->
|
||||
</a>
|
||||
</div><!-- /blog-entry -->
|
||||
{% empty %}
|
||||
<span>{% trans 'No results found.' %}</span>
|
||||
{% endfor %}
|
||||
|
|
@ -89,5 +92,15 @@
|
|||
<div class="pagination">
|
||||
{% show_paginator %}
|
||||
</div>
|
||||
|
||||
<div class="rss-sitemap">
|
||||
<a href="{% feeds_url blog_page %}" target="_blank" title="RSS">
|
||||
<i class="fa fa-rss-square"></i> <span>RSS</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
||||
</div><!-- /row -->
|
||||
</div><!-- /container -->
|
||||
</section>
|
||||
{% endblock blog_content %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% extends "puput/base.html" %}
|
||||
{% load i18n wagtailcore_tags wagtailimages_tags puput_tags social_share %}
|
||||
{% load i18n wagtailcore_tags wagtailimages_tags puput_tags wagtailroutablepage_tags social_share %}
|
||||
|
||||
{% block title %}
|
||||
{{ self.title }} | {{ blog_page.title }}
|
||||
|
|
@ -43,47 +43,70 @@
|
|||
|
||||
{% block blog_content %}
|
||||
|
||||
<div class="entry-categories">
|
||||
{% categories_list self.categories %}
|
||||
</div>
|
||||
|
||||
<h1 class="title">{{ self.title }}</h1>
|
||||
|
||||
<ul class="links">
|
||||
<li>
|
||||
{{ self.date|date:"d.m.Y" }}
|
||||
</li>
|
||||
{% if self.tags.count > 0 %}
|
||||
<li>
|
||||
<i class="fa fa-tag"></i>
|
||||
{% tags_list blog_page.num_tags_entry_header self.tags %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if blog_page.display_comments %}
|
||||
<li>
|
||||
<i class="fa fa-comments"></i>
|
||||
{{ self.num_comments }}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<p class="excerpt">
|
||||
{{ self.excerpt|safe }}
|
||||
</p>
|
||||
|
||||
{% if self.header_image %}
|
||||
<div class="image">
|
||||
{% image self.header_image fill-940x400 class="img-responsive" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h1 class="title">{{ self.title }}</h1>
|
||||
|
||||
<article class="box page-content"
|
||||
{% if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
|
||||
{% include 'puput/entry_links.html' with entry=self %}
|
||||
<section>
|
||||
{{ self.body|richtext}}
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<a href="{% pageurl blog_page %}" class="blog_btn back">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
<i class="fa fa-angle-left"></i>
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% entry_url self blog_page as post_url %}
|
||||
<ul class="social-share-all text-right col-md-10">
|
||||
<li class="social-item">
|
||||
{% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_twitter self.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
|
||||
</li>
|
||||
</ul>
|
||||
<article class="box page-content"
|
||||
{% if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
|
||||
<section>
|
||||
{{ self.body|richtext}}
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<a href="{% pageurl blog_page %}" class="blog_btn back">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% entry_url self blog_page as post_url %}
|
||||
<ul class="social-share-all text-right col-md-10">
|
||||
<li class="social-item">
|
||||
{% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_twitter self.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_linkendin post_url '<span><i class="fa fa-linkedin"></i></span>' %}
|
||||
</li>
|
||||
<li class="social-item">
|
||||
{% post_to_gplus post_url '<span><i class="fa fa-google-plus"></i></span>' %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{% show_comments %}
|
||||
</article>
|
||||
</section>
|
||||
{% show_comments %}
|
||||
</article>
|
||||
{% endblock blog_content %}
|
||||
|
||||
{% block extra_content %}
|
||||
|
|
|
|||
|
|
@ -56,35 +56,74 @@ $slider-nav: 200px;
|
|||
.language-nav a[lang='en'] { display: none; }
|
||||
|
||||
// Disable metas and override blog styles
|
||||
.blog-page .sidebar .meta { display: none; }
|
||||
.blog-page section { padding: 0; }
|
||||
.blog-page .blog-tags ul { padding: 0; }
|
||||
.blog-page ul.sidebar { background: transparent; }
|
||||
.blog-page .searchTerm {
|
||||
.blog-page {
|
||||
padding-top: 1em;
|
||||
|
||||
.sidebar .meta { display: none; }
|
||||
ul.sidebar { background: transparent; }
|
||||
|
||||
section { padding: 0; }
|
||||
.blog-tags ul { padding: 0; }
|
||||
|
||||
.searchTerm {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
// background: #fff;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.searchDescription {
|
||||
// background: #fff;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px 20px;
|
||||
line-height: normal;
|
||||
color: #555;
|
||||
}
|
||||
.social-item {
|
||||
font-size: 70%;
|
||||
background: #2643A9 !important;
|
||||
}
|
||||
|
||||
h1.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul.links {
|
||||
margin: 0; padding: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blog-entry {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.panel img {
|
||||
width: 100%; height: auto;
|
||||
}
|
||||
.entry-category, .entry-meta {
|
||||
font-size: 80%;
|
||||
color: #777;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-header {
|
||||
a {
|
||||
color: white !important;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
text-decoration: none;
|
||||
}
|
||||
.lead {
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
.blog .entry-categories {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
background: #fff;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.blog-page .searchDescription {
|
||||
background: #fff;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px 20px;
|
||||
line-height: normal;
|
||||
color: #555;
|
||||
}
|
||||
.blog-page .social-item {
|
||||
font-size: 70%;
|
||||
background: #2643A9 !important;
|
||||
}
|
||||
.blog-header a {
|
||||
color: white !important;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
text-decoration: none;
|
||||
}
|
||||
.blog-header .lead {
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
a { color: #555; font-weight: bold; }
|
||||
li { list-style: none; margin: 0; padding: 0; }
|
||||
ul { list-style: none; margin: 0; padding: 1em 0 0; }
|
||||
}
|
||||
|
||||
@import "subsites";
|
||||
|
|
|
|||
|
|
@ -149,7 +149,5 @@
|
|||
padding: 1em;
|
||||
margin: 0em;
|
||||
list-style-type: none;
|
||||
|
||||
li:first-child { display: none; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue