deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-12-14 11:48:45 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(posts): make meta column width adaptable

Browse source 
The meta column of the blogposts list was fixed to 13.5rem.
I can be annoying when displaying something else but a date as it was initially planned.

Width set to 13.5rem has been kept when displaying a date to avoid any regression.
Nevertheless, it is possible to get rid of it in the future if needed.

Feed has been adapted accordingly.
This commit is contained in:
ZzMzaw 2024-08-04 08:47:22 +02:00
parent 769d5a373f
commit 506a4a86e5
3 changed files with 56 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

66
sass/parts/_posts_list.scss
View file

@ -1,24 +1,28 @@
.bloglist-container { .bloglist-container {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr 8fr;
} }
.bloglist-row { .bloglist-meta {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
background-color: var(--navbar-color); background-color: var(--navbar-color);
padding-block: 2.5rem; padding-block: 2.5rem;
.bloglist-meta { ul {
margin-inline-end: 0.7rem; margin-inline-end: 0.7rem;
padding: 0; padding: 0;
width: 13.5rem;
color: var(--meta-color); color: var(--meta-color);
font-weight: 300; font-weight: 300;
font-size: 0.9rem; font-size: 0.9rem;
li { li {
list-style-type: none; list-style-type: none;
white-space: nowrap;
}
li.date {
width: 13.5rem;
} }
li.draft-label { li.draft-label {
@ -26,23 +30,17 @@
line-height: 1.2rem; line-height: 1.2rem;
} }
} }
}
.bloglist-tags { .bloglist-content {
margin-top: 0.1rem; display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding: 2.5rem 0;
.tag { div {
display: inline-block;
margin-inline-end: 0.7rem;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}
}
.bloglist-content {
flex: 1; flex: 1;
.bloglist-title { .bloglist-title {
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
@ -58,6 +56,18 @@
} }
} }
.bloglist-tags {
margin-top: 0.1rem;
.tag {
display: inline-block;
margin-inline-end: 0.7rem;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}
}
.description p { .description p {
margin: 0.5rem 0 1rem; margin: 0.5rem 0 1rem;
color: var(--text-color); color: var(--text-color);
@ -86,12 +96,15 @@
} }
@media only screen and (max-width: 1100px) { @media only screen and (max-width: 1100px) {
.bloglist-row { .bloglist-container {
flex-direction: column; grid-template-columns: 1fr;
align-items: flex-start; }
padding-block: 2rem;
.bloglist-meta { .bloglist-meta {
padding-block: 2rem;
border-bottom: 0;
ul {
margin-block-end: 0; margin-block-end: 0;
width: 100%; width: 100%;
@ -100,8 +113,15 @@
margin-inline-end: 0.3rem; margin-inline-end: 0.3rem;
} }
} }
}
.bloglist-content { .bloglist-content {
flex-direction: column;
align-items: flex-start;
padding: 0;
padding-bottom: 2rem;
div {
width: 100%; width: 100%;
} }
} }

8
static/feed_style.xsl
View file

@ -60,8 +60,8 @@
<xsl:variable name="post_listing_date" select="/atom:feed/tabi:metadata/tabi:post_listing_date"/> <xsl:variable name="post_listing_date" select="/atom:feed/tabi:metadata/tabi:post_listing_date"/>
<div class="bloglist-container"> <div class="bloglist-container">
<xsl:for-each select="/atom:feed/atom:entry"> <xsl:for-each select="/atom:feed/atom:entry">
<section class="bloglist-row bottom-divider"> <section class="bloglist-meta bottom-divider">
<ul class="bloglist-meta"> <ul>
<xsl:variable name="show_date" select="$post_listing_date = 'date' or $post_listing_date = 'both'"/> <xsl:variable name="show_date" select="$post_listing_date = 'date' or $post_listing_date = 'both'"/>
<xsl:variable name="show_updated" select="$post_listing_date = 'updated' or $post_listing_date = 'both'"/> <xsl:variable name="show_updated" select="$post_listing_date = 'updated' or $post_listing_date = 'both'"/>
@ -87,7 +87,9 @@
</li> </li>
</xsl:if> </xsl:if>
</ul> </ul>
<div class="bloglist-content"> </section>
<section class="bloglist-content bottom-divider">
<div>
<div class="bloglist-title"> <div class="bloglist-title">
<a> <a>
<xsl:attribute name="href"> <xsl:attribute name="href">

13
templates/macros/list_posts.html
View file

@ -6,14 +6,15 @@
{% for post in posts %} {% for post in posts %}
{% if loop.index <= max %} {% if loop.index <= max %}
{% if loop.index == max %} {% if loop.index == max %}
<section class="bloglist-row"> {% set bottom_divider = false %}
{% elif loop.last %} {% elif loop.last %}
<section class="bloglist-row"> {% set bottom_divider = false %}
{% else %} {% else %}
<section class="bloglist-row bottom-divider"> {% set bottom_divider = true %}
{% endif %} {% endif %}
<ul class="bloglist-meta"> <section class="bloglist-meta {% if bottom_divider -%}bottom-divider{%- endif -%}">
<ul>
{%- set allowed_post_listing_dates = ["date", "updated", "both"] -%} {%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
{%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%} {%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
{%- if post_listing_date not in allowed_post_listing_dates -%} {%- if post_listing_date not in allowed_post_listing_dates -%}
@ -42,7 +43,9 @@
<li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li> <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
{% endif %} {% endif %}
</ul> </ul>
<div class="bloglist-content"> </section>
<section class="bloglist-content {% if bottom_divider -%}bottom-divider{%- endif -%}">
<div>
<h2 class="bloglist-title"> <h2 class="bloglist-title">
<a href="{{ post.permalink }}">{{ post.title }}</a> <a href="{{ post.permalink }}">{{ post.title }}</a>
</h2> </h2>