From c32144d4377ff34657914802f9352151cd4f1dd6 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Wed, 22 May 2024 18:21:40 +0200
Subject: [PATCH] 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.
---
 templates/category.html | 49 ++++++++++++++++++-----------------------
 templates/projects.html | 39 ++++++++++++++++++++------------
 2 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/templates/category.html b/templates/category.html
index caac509..0cc86a0 100644
--- a/templates/category.html
+++ b/templates/category.html
@@ -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 %}
diff --git a/templates/projects.html b/templates/projects.html
index cb7751c..8218818 100644
--- a/templates/projects.html
+++ b/templates/projects.html
@@ -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 %}