kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-09-10 03:37:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implemented flexible card box sizes depending on card box amount

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-03-18 03:56:37 +01:00
parent c35f44baef
commit 56513230e4
3 changed files with 194 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/moduls/card.html.j2
View File

@@ -1,4 +1,4 @@
<div class="card-column col-lg-3 col-md-6 col-12">
<div class="card-column {{ lg_class }} {{ md_class }} col-12">
<div class="card h-100 d-flex flex-column">
<div class="card-body d-flex flex-column">
<div class="card-img-top">
@@ -12,10 +12,12 @@
<h3 class="card-title">{{ card.title }}</h3>
<p class="card-text">{{ card.text }}</p>
{% if card.url %}
<a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link" ><i class="fa-solid fa-globe"></i> {{ card.link_text }}</a>
<a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link">
<i class="fa-solid fa-globe"></i> {{ card.link_text }}
</a>
{% else %}
<i class="fa-solid fa-hourglass"></i> {{ card.link_text }}
{% endif %}
</div>
</div>
</div>
</div>

46
app/templates/pages/index.html.j2
View File

@@ -2,7 +2,53 @@
{% block content %}
<div class="row">
{% set num_cards = cards | length %}
{% set lg_classes = [] %}
{# Compute `lg` column widths: Ensure at least 3 per row unless fewer than 3 exist #}
{% if num_cards < 3 %}
{% if num_cards == 2 %}
{% set lg_classes = ["col-lg-6", "col-lg-6"] %}
{% else %}
{% set lg_classes = ["col-lg-12"] %}
{% endif %}
{% elif num_cards % 4 == 0 %}
{% set lg_classes = ["col-lg-3"] * num_cards %}
{% elif num_cards % 3 == 0 %}
{% set lg_classes = ["col-lg-4"] * num_cards %}
{% elif num_cards % 2 == 0 %}
{% set lg_classes = ["col-lg-6"] * num_cards %}
{% else %}
{# Distribute for complex cases (e.g., 5, 7, 11) while ensuring at least 3 per row #}
{% for i in range(num_cards) %}
{% if num_cards % 4 == 3 %}
{% if i < 3 %}
{% set _ = lg_classes.append("col-lg-4") %}
{% else %}
{% set _ = lg_classes.append("col-lg-3") %}
{% endif %}
{% elif num_cards % 4 == 1 %}
{% if i < 2 %}
{% set _ = lg_classes.append("col-lg-6") %}
{% elif i < 5 %}
{% set _ = lg_classes.append("col-lg-4") %}
{% else %}
{% set _ = lg_classes.append("col-lg-3") %}
{% endif %}
{% elif num_cards % 3 == 2 %}
{% if i < 2 %}
{% set _ = lg_classes.append("col-lg-6") %}
{% else %}
{% set _ = lg_classes.append("col-lg-4") %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% for card in cards %}
{% set index = loop.index0 %} {# Index starts at 0 #}
{% set lg_class = lg_classes[index] %}
{% set md_class = "col-md-6" if num_cards % 2 == 0 or index < num_cards - 1 else "col-md-12" %}
{% include "moduls/card.html.j2" %}
{% endfor %}
</div>