mirror of
https://github.com/welpo/tabi.git
synced 2025-12-14 11:48:45 +01:00
feat(serie): add a page to list all the articles
Similar to a section page but with adapted style to glue articles even more together.
This commit is contained in:
parent
e5c8145918
commit
1bee7d426d
5 changed files with 131 additions and 0 deletions
|
|
@ -63,6 +63,7 @@ table_of_contents = "Table of Contents"
|
|||
load_comments = "Load comments"
|
||||
|
||||
# Serie.
|
||||
serie = "SERIE"
|
||||
page_of_a_serie = "This article is part of the serie: "
|
||||
|
||||
# Copy code block button.
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ table_of_contents = "Table des matières"
|
|||
load_comments = "Afficher les commentaires"
|
||||
|
||||
# Serie.
|
||||
serie = "SERIE"
|
||||
page_of_a_serie = "Cet article fait partie de la série : "
|
||||
|
||||
# Copy code block button.
|
||||
|
|
|
|||
|
|
@ -41,6 +41,15 @@ ul {
|
|||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
margin-right: 0.3rem;
|
||||
background-color: var(--primary-color);
|
||||
padding: 2px 4px;
|
||||
color: var(--hover-color);
|
||||
font-size: 1rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bottom-divider {
|
||||
border-bottom: var(--divider-color) solid 0.5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,62 @@
|
|||
}
|
||||
}
|
||||
|
||||
.serielist-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr;
|
||||
}
|
||||
|
||||
.serielist-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: var(--navbar-color);
|
||||
padding: 1rem 0;
|
||||
|
||||
.serielist-meta {
|
||||
margin-right: 0.7rem;
|
||||
padding: 0;
|
||||
color: var(--meta-color);
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li.draft-label {
|
||||
width: fit-content;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.serielist-content {
|
||||
flex: 1;
|
||||
|
||||
.serielist-title {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
|
||||
a {
|
||||
color: var(--text-color-high-contrast);
|
||||
font-weight: 550;
|
||||
|
||||
&:hover {
|
||||
color: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description p {
|
||||
margin: 0.5rem 0 1rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 250;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all-posts {
|
||||
font-weight: 350;
|
||||
font-size: 1.3rem;
|
||||
|
|
|
|||
64
templates/serie.html
Normal file
64
templates/serie.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block main_content %}
|
||||
|
||||
{% if paginator %}
|
||||
{{ throw (message="Pagination not supported for series: '" ~ section.relative_path ~ "'.") }}
|
||||
{% endif %}
|
||||
|
||||
<main>
|
||||
{%- if section.extra.header %}
|
||||
{%- include "partials/home_banner.html" -%}
|
||||
{% endif -%}
|
||||
|
||||
<div id="posts-list">
|
||||
<div>
|
||||
<span class="title-label">{{ macros_translate::translate(key="serie", default="SERIE", language_strings=language_strings) }}</span>
|
||||
{{ macros_page_header::page_header(title=section.title) }}
|
||||
</div>
|
||||
|
||||
<div class="bottom-divider">
|
||||
{{ section.content | safe }}
|
||||
</div>
|
||||
|
||||
<div class="serielist-container">
|
||||
{% for post in section.pages | reverse %}
|
||||
{% if loop.last %}
|
||||
<section class="serielist-row">
|
||||
{% else %}
|
||||
<section class="serielist-row bottom-divider">
|
||||
{% endif %}
|
||||
|
||||
<ul class="serielist-meta">
|
||||
{{ loop.index }}
|
||||
{% if post.draft %}
|
||||
<li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</section>
|
||||
{% if loop.last %}
|
||||
<section class="serielist-row">
|
||||
{% else %}
|
||||
<section class="serielist-row bottom-divider">
|
||||
{% endif %}
|
||||
<div class="serielist-content">
|
||||
<h2 class="serielist-title">
|
||||
<a href="{{ post.permalink }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
|
||||
<div class="description">
|
||||
{% if post.description %}
|
||||
<p>{{ post.description }}</p>
|
||||
{% elif post.summary %}
|
||||
<p>{{ post.summary | striptags | trim_end_matches(pat=".") | safe }}…</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{% endblock main_content %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue