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:card" content="summary_large_image" />
|
||||||
<meta name="twitter:title" content="{{ blog_page.title }}" />
|
<meta name="twitter:title" content="{{ blog_page.title }}" />
|
||||||
<meta name="twitter:description" content="{{ blog_page.description }}" />
|
<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 %}
|
{% endblock social_share %}
|
||||||
|
|
||||||
{% block blog_content %}
|
{% block blog_content %}
|
||||||
|
<section id="blog">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
{% with per_page=blog_page.num_entries_page %}
|
{% with per_page=blog_page.num_entries_page %}
|
||||||
{# 'paginate' tag cannot render dotted variables, so we need to create a context var #}
|
{# 'paginate' tag cannot render dotted variables, so we need to create a context var #}
|
||||||
{% paginate per_page entries %}
|
{% paginate per_page entries %}
|
||||||
|
@ -44,44 +52,39 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<article class="box page-content blog_grid">
|
{% if forloop.counter0|divisibleby:3 %}
|
||||||
<section>
|
</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 %}
|
{% if entry.header_image %}
|
||||||
<span class="img-responsive"><a href="{{ post_url }}">
|
{% image entry.header_image fill-360x270 %}
|
||||||
{% image entry.header_image fill-800x240 as header_image %}
|
|
||||||
<img alt="{{ entry.header_image.title }}" src="{{ header_image.url }}">
|
|
||||||
</a></span>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<!--{% include 'puput/entry_links.html' %}-->
|
<div class="panel-body">
|
||||||
</section>
|
{% for category in entry.categories.all %}
|
||||||
<section class="article">
|
<div class="entry-category">{{ category.name }}</div>
|
||||||
<h4><a href="{{ post_url }}">{{ entry.title }}</a></h4>
|
{% endfor %}
|
||||||
|
|
||||||
|
<h3 class="entry-title">{{ entry.title }}</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
{% if entry.excerpt %}
|
{% if entry.excerpt %}
|
||||||
{{ entry.excerpt|richtext }}
|
{{ entry.excerpt|safe }}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ entry.body|richtext|truncatewords_html:70 }}
|
{{ entry.body|striptags|truncatewords_html:40 }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="row">
|
</p>
|
||||||
<ul class="social-share col-md-9">
|
|
||||||
<li class="social-item">
|
<span class="entry-meta">
|
||||||
{% post_to_facebook post_url '<span><i class="fa fa-facebook"></i></span>' %}
|
{{ entry.date|date:"d.m.Y" }}
|
||||||
</li>
|
</span>
|
||||||
<li class="social-item">
|
</div><!-- -/panel-body -->
|
||||||
{% post_to_twitter entry.title post_url '<span><i class="fa fa-twitter"></i></span>' %}
|
</div><!-- -/panel -->
|
||||||
</li>
|
</a>
|
||||||
<li class="social-item">
|
</div><!-- /blog-entry -->
|
||||||
{% 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>
|
|
||||||
{% empty %}
|
{% empty %}
|
||||||
<span>{% trans 'No results found.' %}</span>
|
<span>{% trans 'No results found.' %}</span>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -89,5 +92,15 @@
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
{% show_paginator %}
|
{% show_paginator %}
|
||||||
</div>
|
</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 %}
|
{% endwith %}
|
||||||
|
|
||||||
|
</div><!-- /row -->
|
||||||
|
</div><!-- /container -->
|
||||||
|
</section>
|
||||||
{% endblock blog_content %}
|
{% endblock blog_content %}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{% extends "puput/base.html" %}
|
{% 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 %}
|
{% block title %}
|
||||||
{{ self.title }} | {{ blog_page.title }}
|
{{ self.title }} | {{ blog_page.title }}
|
||||||
|
@ -43,25 +43,48 @@
|
||||||
|
|
||||||
{% block blog_content %}
|
{% 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 %}
|
{% if self.header_image %}
|
||||||
<div class="image">
|
<div class="image">
|
||||||
{% image self.header_image fill-940x400 class="img-responsive" %}
|
{% image self.header_image fill-940x400 class="img-responsive" %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<h1 class="title">{{ self.title }}</h1>
|
|
||||||
|
|
||||||
<article class="box page-content"
|
<article class="box page-content"
|
||||||
{% if self.id %}data-entry-page-update-comments-url="{% url 'entry_page_update_comments' self.id %}{% endif %}">
|
{% 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>
|
<section>
|
||||||
{{ self.body|richtext}}
|
{{ self.body|richtext}}
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-2">
|
<div class="col-md-2">
|
||||||
<a href="{% pageurl blog_page %}" class="blog_btn back">
|
<a href="{% pageurl blog_page %}" class="blog_btn back">
|
||||||
<i class="fa fa-angle-left"></i>
|
<i class="fa fa-home"></i>
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
<i class="fa fa-angle-left"></i>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% entry_url self blog_page as post_url %}
|
{% entry_url self blog_page as post_url %}
|
||||||
|
|
|
@ -56,35 +56,74 @@ $slider-nav: 200px;
|
||||||
.language-nav a[lang='en'] { display: none; }
|
.language-nav a[lang='en'] { display: none; }
|
||||||
|
|
||||||
// Disable metas and override blog styles
|
// Disable metas and override blog styles
|
||||||
.blog-page .sidebar .meta { display: none; }
|
.blog-page {
|
||||||
.blog-page section { padding: 0; }
|
padding-top: 1em;
|
||||||
.blog-page .blog-tags ul { padding: 0; }
|
|
||||||
.blog-page ul.sidebar { background: transparent; }
|
.sidebar .meta { display: none; }
|
||||||
.blog-page .searchTerm {
|
ul.sidebar { background: transparent; }
|
||||||
|
|
||||||
|
section { padding: 0; }
|
||||||
|
.blog-tags ul { padding: 0; }
|
||||||
|
|
||||||
|
.searchTerm {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
.blog-page .searchDescription {
|
.searchDescription {
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 0 20px 20px;
|
padding: 0 20px 20px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
.blog-page .social-item {
|
.social-item {
|
||||||
font-size: 70%;
|
font-size: 70%;
|
||||||
background: #2643A9 !important;
|
background: #2643A9 !important;
|
||||||
}
|
}
|
||||||
.blog-header a {
|
|
||||||
|
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;
|
color: white !important;
|
||||||
text-shadow: 1px 1px 2px black;
|
text-shadow: 1px 1px 2px black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.blog-header .lead {
|
.lead {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.blog .entry-categories {
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
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";
|
@import "subsites";
|
||||||
|
|
|
@ -149,7 +149,5 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
margin: 0em;
|
margin: 0em;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
li:first-child { display: none; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue