servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

redesign related articles cards

Browse source
This commit is contained in:
Tobias Brunner 2025-07-08 16:29:02 +02:00
parent 166f518db0
commit d3bd126782
No known key found for this signature in database
1 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

31
hub/services/templates/services/article_detail.html
View file

@ -97,15 +97,32 @@
<h3>Related Articles</h3>
<div class="row">
{% for related_article in related_articles %}
<div class="col-12 col-md-4 mb-4">
<div class="card h-100 clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
<div class="col-12 col-md-4 mb-30">
<div class="card h-100 d-flex flex-column clickable-card" onclick="cardClicked(event, '{{ related_article.get_absolute_url }}')">
{% if related_article.get_image %}
<img src="{{ related_article.get_image.url }}" class="card-img-top mb-2" alt="{{ related_article.title }}" style="height: 200px; object-fit: cover;">
<div class="d-flex justify-content-between mb-3">
<div class="card__image flex-shrink-0">
<img src="{{ related_article.get_image.url }}" alt="{{ related_article.title }}" class="img-fluid">
</div>
</div>
{% endif %}
<div class="card-body d-flex flex-column">
<h5 class="card-title">{{ related_article.title }}</h5>
<p class="card-text flex-grow-1">{{ related_article.excerpt|truncatewords:15 }}</p>
<small class="text-muted">{{ related_article.created_at|date:"M d, Y" }}</small>
<div class="card__content d-flex flex-column flex-grow-1">
<div class="card__header">
<h3 class="card__title">
{{ related_article.title }}
</h3>
<p class="card__subtitle">
<span class="text-muted">
By {{ related_article.author.get_full_name|default:related_article.author.username }}
</span>
<span class="text-muted ms-2">
{{ related_article.article_date|date:"M d, Y" }}
</span>
</p>
</div>
<div class="card__desc flex-grow-1">
<p class="mb-0">{{ related_article.excerpt|truncatewords:15 }}</p>
</div>
</div>
</div>
</div>