structables/templates/category.html
Kumi c32144d437
refactor: improve UI consistency across templates
Updated category and projects templates to enhance readability and maintain UI consistency. Both templates now use a card layout with image headers and a relocated author, channel information, and metrics (favorites, views) to the card footer for improved layout consistency and readability. Also standardized image and anchor tag formats across both pages, removing inline styles and deprecated classes for cleaner, more maintainable code. Changes aim to provide a more uniform user experience and simplify future template adjustments.
2024-05-22 18:21:40 +02:00

68 lines
1.8 KiB
HTML

{% extends "base.html" %} {% block content %}
<div class="container">
<h1 class="text-center">{{ title }}</h1>
<div class="row">
{% for channel in channels %}
<div class="col-6 col-md-4 col-lg-3 text-center mb-3">
<a
href="/{{ channel }}"
class="btn btn-primary d-block position-relative"
>
{{ channel }}
</a>
</div>
{% endfor %}
</div>
<h2 class="text-center">
<a href="{{ path }}projects/">Featured Projects</a>
</h2>
<div class="row">
{% for ible in ibles %}
<div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
<div class="card h-100 d-flex flex-column">
<a href="{{ ible.link }}">
<img
class="card-img-top"
src="{{ ible.img }}"
alt="{{ ible.alt }}"
style="max-width: 100%"
/>
<div class="card-body">
<h5 class="card-title">{{ ible.title }}</h5>
</div>
</a>
<div class="card-footer mt-auto">
<p class="card-text">
by <a href="{{ ible.author_link }}">{{ ible.author }}</a>
</p>
<p class="card-text">
in <a href="{{ ible.channel_link }}">{{ ible.channel }}</a>
</p>
<p class="card-text">
{{ ible.favorites }} Favorites, {{ ible.views }} Views
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Doesn't seem to be current
<h2 class="text-center"><a href="/contest/">Contests</a></h2>
<div class="row">
<div class="col">
{% for contest in contests %}
<a href="{{ contest.link }}">
<img
src="{{ contest.img }}"
alt="{{ contest.title }}"
class="img-fluid"
/>
</a>
{% endfor %}
</div>
</div>
-->
</div>
{% endblock %}