From 3ca317e7affbe0187785b703a7b86001183939b5 Mon Sep 17 00:00:00 2001
From: Luka Hietala <luka.hietala08@gmail.com>
Date: Thu, 20 Nov 2025 19:45:53 +0200
Subject: [PATCH] add better table css and commits table spesific styles. also
 age filter for commits instead of datime

---
 app.py                 | 28 +++++++++++++++
 static/styles.css      | 77 ++++++++++++++++++++++++++++++++++++------
 templates/commits.html | 34 +++++++++----------
 templates/repo.html    | 30 ++++++++--------
 4 files changed, 126 insertions(+), 43 deletions(-)

diff --git a/app.py b/app.py
index 6aad97f..b3b7c4b 100644
--- a/app.py
+++ b/app.py
@@ -36,7 +36,35 @@ def datetime_filter(value, format='%Y-%m-%d %H:%M:%S'):
         return dt.strftime(format)
     return value
 
+# age filter to show relative time like "2 days ago" 
+def age_filter(value):
+    if isinstance(value, (int, float)):
+        dt = datetime.fromtimestamp(value)
+    elif isinstance(value, datetime):
+        dt = value
+    else:
+        return value
+    now = datetime.now()
+    diff = now - dt
+    if diff.days > 365:
+        years = diff.days // 365
+        return f"{years} year{'s' if years != 1 else ''} ago"
+    elif diff.days > 30:
+        months = diff.days // 30
+        return f"{months} month{'s' if months != 1 else ''} ago"
+    elif diff.days > 0:
+        return f"{diff.days} day{'s' if diff.days != 1 else ''} ago"
+    elif diff.seconds > 3600:
+        hours = diff.seconds // 3600
+        return f"{hours} hour{'s' if hours != 1 else ''} ago"
+    elif diff.seconds > 60:
+        minutes = diff.seconds // 60
+        return f"{minutes} minute{'s' if minutes != 1 else ''} ago"
+    else:
+        return "just now"
+
 app.jinja_env.filters['datetime'] = datetime_filter
+app.jinja_env.filters['age'] = age_filter
 
 @app.route("/")
 def index():
diff --git a/static/styles.css b/static/styles.css
index 4a299fa..19d285c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -36,17 +36,6 @@ nav a.active {
     font-weight: bold;
 }
 
-table {
-    border-collapse: collapse;
-    width: 100%;
-}
-
-th, td {
-    border: 1px solid lightgray;
-    padding: 2px 4px;
-    text-align: left;
-}
-
 pre {
     font-family: monospace;
     font-size: 10pt;
@@ -67,3 +56,69 @@ h2 {
     margin: 1em 0 0.5em 0;
 }
 
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+th, td {
+    border: 1px solid lightgray;
+    padding: 4px 8px;
+    text-align: left;
+    white-space: nowrap;
+}
+
+tbody tr:nth-child(even) {
+	background-color: #f9f9f9;
+}
+
+/* commits table */
+table.commits-table {
+	width: 100%;
+	table-layout: fixed;
+}
+
+table.commits-table td {
+	white-space: nowrap;
+}
+
+table.commits-table th, table.commits-table td {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+table.commits-table .author-col {
+	width: 15%;
+}
+
+table.commits-table .age-col {
+	width: 10%;
+}
+
+table.commits-table .changes-col {
+	width: 10%;
+}
+
+table.commits-table .commit-col {
+	width: 6%;
+}
+
+table.commits-table .message-col {
+	width: 59%;
+	white-space: nowrap;
+}
+
+.files-changed {
+	color: grey;
+}
+
+.insertions {
+	color: green;
+}
+
+.deletions {
+	color: red;
+}
+
+
+
diff --git a/templates/commits.html b/templates/commits.html
index 58fdbb5..77e11c5 100644
--- a/templates/commits.html
+++ b/templates/commits.html
@@ -2,29 +2,29 @@
 
 {% block content %}
     <h1>Commits for {{ repo_name }}</h1>
-    <table class="list">
+    <table class="commits-table">
         <thead>
             <tr>
-                <th>Commit</th>
-                <th>Message</th>
-                <th>Author</th>
-                <th>Date</th>
-                <th>Files Changed</th>
-                <th>Insertions</th>
-                <th>Deletions</th>
+                <th class="commit-col">Commit</th>
+                <th class="message-col">Message</th>
+                <th class="author-col">Author</th>
+                <th class="age-col">Age</th>
+                <th class="changes-col">Changes</th>
             </tr>
         </thead>
         <tbody>
             {% for commit in commits %}
-                <tr>
-                    <td><a href="{{ url_for('commit_detail', repo_name=repo_name, commit_id=commit.id) }}">{{ commit.id[:8] }}</a></td>
-                    <td>{{ commit.message }}</td>
-                    <td>{{ commit.author.name }}</td>
-                    <td>{{ commit.date | datetime }}</td>
-                    <td>{{ commit.diff_stats.files_changed }}</td>
-                    <td>{{ commit.diff_stats.insertions }}</td>
-                    <td>{{ commit.diff_stats.deletions }}</td>
-                </tr>
+            <tr>
+                <td class="commit-col"><a href="{{ url_for('commit_detail', repo_name=repo_name, commit_id=commit.id) }}">{{ commit.id[:8] }}</a></td>
+                <td class="message-col">{{ commit.message }}</td>
+                <td class="author-col">{{ commit.author.name }}</td>
+                <td class="age-col">{{ commit.date | age }}</td>
+                <td class="changes-col">
+                    <span class="files-changed">{{ commit.diff_stats.files_changed }} file{% if commit.diff_stats.files_changed != 1 %}s{% endif %}</span>
+                    <span class="insertions">+{{ commit.diff_stats.insertions }}</span>
+                    <span class="deletions">-{{ commit.diff_stats.deletions }}</span>
+                </td>
+            </tr>
             {% endfor %}
         </tbody>
     </table>
diff --git a/templates/repo.html b/templates/repo.html
index 7b96a18..4bfa6c0 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -3,28 +3,28 @@
 {% block content %}
 <h1>Repository: {{ repo_name }}</h1>
 <h2>Latest commits</h2>
-<table class="list">
+<table class="commits-table">
     <thead>
         <tr>
-            <th>Commit</th>
-            <th>Message</th>
-            <th>Author</th>
-            <th>Date</th>
-            <th>Files Changed</th>
-            <th>Insertions</th>
-            <th>Deletions</th>
+            <th class="commit-col">Commit</th>
+            <th class="message-col">Message</th>
+            <th class="author-col">Author</th>
+            <th class="age-col">Age</th>
+            <th class="changes-col">Changes</th>
         </tr>
     </thead>
     <tbody>
         {% for commit in commits %}
             <tr>
-                <td><a href="{{ url_for('commit_detail', repo_name=repo_name, commit_id=commit.id) }}">{{ commit.id[:8] }}</a></td>
-                <td>{{ commit.message }}</td>
-                <td>{{ commit.author.name }}</td>
-                <td>{{ commit.date | datetime }}</td>
-                <td>{{ commit.diff_stats.files_changed }}</td>
-                <td>{{ commit.diff_stats.insertions }}</td>
-                <td>{{ commit.diff_stats.deletions }}</td>
+                <td class="commit-col"><a href="{{ url_for('commit_detail', repo_name=repo_name, commit_id=commit.id) }}">{{ commit.id[:8] }}</a></td>
+                <td class="message-col">{{ commit.message }}</td>
+                <td class="author-col">{{ commit.author.name }}</td>
+                <td class="age-col">{{ commit.date | age }}</td>
+                <td class="changes-col">
+                    <span class="files-changed">{{ commit.diff_stats.files_changed }} file{% if commit.diff_stats.files_changed != 1 %}s{% endif %}</span>
+                    <span class="insertions">+{{ commit.diff_stats.insertions }}</span>
+                    <span class="deletions">-{{ commit.diff_stats.deletions }}</span>
+                </td>
             </tr>
         {% endfor %}
     </tbody>
-- 
2.47.3