Revised layout of blog

This commit is contained in:
datalets 2020-01-16 11:34:10 +01:00
parent 23ca30bf45
commit b8917619f5
4 changed files with 175 additions and 102 deletions

View file

@ -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 }} &raquo;</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 %}

View file

@ -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> &nbsp;
{% 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 %}

View file

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

View file

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