feature/ display timestamps on feed and details page

siteapps/socialmedia/web_views.py

@@ -9,6 +9,7 @@
 from django.http import JsonResponse
 from django.shortcuts import redirect, render
 from django.urls import reverse
+from django.utils.dateparse import parse_datetime
 
 from siteapps.users.api_client import BackendAPIClient
 
@@ -48,7 +49,8 @@ def _normalize_post(post):
     post["media_url"] = media.get("url")
     post["is_video"] = media.get("is_video", False)
     post["user_name"] = post.get("created_by")
-    post["created"] = post.get("encounter_datetime")
+    created_raw = post.get("created")
+    post["created"] = parse_datetime(created_raw) if created_raw else None
     additional = post.get("additional_info") or {}
     post["camera_model"] = additional.get("camera_model")
     post["iucn_habitat_lvl1"] = additional.get("iucn_habitat_lvl1_name")
@@ -677,7 +679,7 @@ def load_more_posts(request):
             "media_url": media_url,
             "is_video": is_video,
             "user_name": post.get("created_by"),
-            "created": post.get("encounter_datetime"),
+            "created": post.get("created"),
             "geocoded_location": post.get("geocoded_location"),
             "likes_count": post.get("likes_count", 0),
             "comments_count": post.get("comments_count", 0),

siteapps/templates/socialmedia/feed.html

@@ -1,5 +1,6 @@
 {% extends "_base.html" %}
 {% load static %}
+{% load humanize %}
 {% block title %}
     Wildlife Feed - WildeBackyard
 {% endblock title %}
@@ -337,10 +338,13 @@ <h1 class="mb-4 text-white">
                                 {% endif %}
                                 <div class="card-body">
                                     <h5 class="card-title">{{ post.title }}</h5>
+                                    <p class="card-text mb-1">
+                                        <i class="bi bi-calendar-event"></i>
+                                        <strong>{{ post.created|date:"M j, Y, g:i A" }}</strong>
+                                        <span class="text-muted small">({{ post.created|naturaltime }})</span>
+                                    </p>
                                     <p class="card-text text-muted small">
                                         <i class="bi bi-person"></i> {{ post.user_name|default:"Anonymous" }}
-                                        <span class="mx-2">•</span>
-                                        <i class="bi bi-calendar"></i> {{ post.created|date:"M d, Y" }}
                                     </p>
                                     {% if post.body %}<p class="card-text">{{ post.body|truncatewords:30 }}</p>{% endif %}
                                     {% if post.geocoded_location %}
@@ -408,11 +412,30 @@ <h5 class="card-title">{{ post.title }}</h5>
     return div.innerHTML;
 }
 
-function formatDate(dateString) {
+function formatRelativeTime(dateString) {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return '';
+    const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+    if (seconds < 60) return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30) return `${days} day${days !== 1 ? 's' : ''} ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12) return `${months} month${months !== 1 ? 's' : ''} ago`;
+    const years = Math.floor(days / 365);
+    return `${years} year${years !== 1 ? 's' : ''} ago`;
+}
+
+function formatAbsoluteDateTime(dateString) {
     if (!dateString) return '';
     const date = new Date(dateString);
-    const options = { year: 'numeric', month: 'short', day: 'numeric' };
-    return date.toLocaleDateString('en-US', options);
+    if (isNaN(date.getTime())) return '';
+    const options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' };
+    return date.toLocaleString('en-US', options);
 }
 
 function truncateWords(text, wordLimit) {
@@ -474,10 +497,13 @@ <h5 class="card-title">{{ post.title }}</h5>
                 ${mediaHtml}
                 <div class="card-body">
                     <h5 class="card-title">${escapeHtml(post.title)}</h5>
+                    <p class="card-text mb-1">
+                        <i class="bi bi-calendar-event"></i>
+                        <strong>${formatAbsoluteDateTime(post.created)}</strong>
+                        <span class="text-muted small">(${formatRelativeTime(post.created)})</span>
+                    </p>
                     <p class="card-text text-muted small">
                         <i class="bi bi-person"></i> ${escapeHtml(post.user_name || 'Anonymous')}
-                        <span class="mx-2">•</span>
-                        <i class="bi bi-calendar"></i> ${formatDate(post.created)}
                     </p>
                     ${bodyHtml}
                     ${locationHtml}

siteapps/templates/socialmedia/post_detail.html

@@ -1,5 +1,6 @@
 {% extends "_base.html" %}
 {% load static %}
+{% load humanize %}
 {% block title %}
     {{ post.title }} - WildeBackyard
 {% endblock title %}
@@ -69,10 +70,15 @@
                     <div class="card-body">
                         <h1 class="card-title">{{ post.title }}</h1>
                         <div class="d-flex justify-content-between align-items-center mb-3">
-                            <div class="text-muted">
-                                <i class="bi bi-person-circle"></i> <strong>{{ post.user_name|default:"Anonymous" }}</strong>
-                                <span class="mx-2">•</span>
-                                <i class="bi bi-calendar"></i> {{ post.created|date:"F d, Y \a\t g:i A" }}
+                            <div>
+                                <div>
+                                    <i class="bi bi-calendar-event"></i>
+                                    <strong>{{ post.created|date:"F j, Y, g:i A" }}</strong>
+                                    <span class="text-muted small">({{ post.created|naturaltime }})</span>
+                                </div>
+                                <div class="text-muted">
+                                    <i class="bi bi-person-circle"></i> {{ post.user_name|default:"Anonymous" }}
+                                </div>
                             </div>
                             {% if user.is_authenticated %}
                                 <div class="btn-group">