PrivateCoffee/structables
4
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve UI consistency across templates

Browse source 
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.
This commit is contained in:
Kumi 2024-05-22 18:21:40 +02:00
parent 9eee296c81
commit c32144d437
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 47 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
templates/category.html
View file

@ -1,11 +1,13 @@
{% extends "base.html" %}
{% block content %}
{% 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">
<a
href="/{{ channel }}"
class="btn btn-primary d-block position-relative"
>
{{ channel }}
</a>
</div>
@ -17,37 +19,30 @@
</h2>
<div class="row">
{% for ible in ibles %}
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
<div class="card">
<a href="{{ ible.link }}" class="text-dark text-decoration-none">
<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
src="{{ ible.img }}"
alt="{{ ible.title }}"
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>
<p class="card-text">
<small class="text-muted"
>by
<a href="{{ ible.author_link }}" class="text-primary"
>{{ ible.author }}</a
></small
>
<br />
<small class="text-muted"
>in
<a href="{{ ible.channel_link }}" class="text-primary"
>{{ ible.channel }}</a
></small
>
<br />
<small class="text-muted">{{ ible.views }} Views</small>
<br />
<small class="text-muted">{{ ible.favorites }} Favorites</small>
</p>
</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 %}

39
templates/projects.html
View file

@ -11,20 +11,31 @@
<div class="container">
<div class="row">
{% for ible in ibles %}
<div class="ible-list-item col-xs-12 col-sm-6 col-lg-4">
<a href="{{ ible.link }}" style="color: #bbc2cf">
<img
style="max-width: 350px"
src="{{ ible.img }}"
alt="{{ ible.title }}"
/>
<p>{{ ible.title }}</p>
</a>
<p>
by <a href="{{ ible.author_link }}">{{ ible.author }}</a> in
<a href="{{ ible.channel_link }}">{{ ible.channel }}</a>
</p>
<p>{{ ible.views }} Views, {{ ible.favorites }} Favorites</p>
<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 %}