Created Django template for forum app + styled it with CSS

announcements/migrations/0004_alter_reaction_announcement.py

+# Generated by Django 4.0.3 on 2022-05-18 05:18
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('announcements', '0003_reaction_reaction_name'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='reaction',
+            name='announcement',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reacts', to='announcements.announcement'),
+        ),
+    ]

forum/migrations/0011_alter_post_pub_date_alter_reply_pub_date.py

+# Generated by Django 4.0.3 on 2022-05-18 05:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('forum', '0010_alter_post_pub_date_alter_reply_pub_date'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='post',
+            name='pub_date',
+            field=models.DateTimeField(auto_now=True),
+        ),
+        migrations.AlterField(
+            model_name='reply',
+            name='pub_date',
+            field=models.DateTimeField(auto_now=True),
+        ),
+    ]

forum/models.py

 from django.db import models
 
-from homepage.models import WidgetUser
-
 
 # Create your models here.
 class Post(models.Model):
     post_title = models.CharField(max_length=50)
     post_body = models.CharField(max_length=500)
-    pub_date = models.DateField(auto_now=True)
+    pub_date = models.DateTimeField(auto_now=True)
     author = models.ForeignKey(
         'homepage.WidgetUser',
         on_delete=models.CASCADE
@@ -26,7 +24,7 @@ class Post(models.Model):
 
 class Reply(models.Model):
     reply_body = models.CharField(max_length=500)
-    pub_date = models.DateField(auto_now=True)
+    pub_date = models.DateTimeField(auto_now=True)
     author = models.ForeignKey(
         'homepage.WidgetUser',
         on_delete=models.CASCADE

forum/templates/forum/forum.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'css/forum_stylesheet.css' %}">
+{% endblock %}
+
+{% block app_header %}Welcome to Widget's Forum!{% endblock %}
+
+{% block content %}
+<ul class="posts">
+    {% for p in post_list %}
+        <li>
+            <a href="{% url 'forum:post-detail' pk=p.pk %}">
+                 <p><span class="title">{{ p.post_title }}</span> <br/> by <span class="author">{{ p.author.first_name }} {{ p.author.last_name }}</span> dated {{ p.pub_date|date:"d/m/Y" }}</p>
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endblock %}
\ No newline at end of file

forum/templates/forum/post_detail.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'css/forum_stylesheet.css' %}">
+{% endblock %}
+
+{% block content %}
+    <div class="wrapper">
+        <div class="post">
+            <h1>{{ object.post_title }}</h1>
+            <h2>by {{ object.author.first_name }} {{ object.author.last_name }}, {{ object.pub_date|date:"d/m/Y" }}</h2>
+            <p>{{ object.post_body }}</p>
+            <img src="{% static 'images/forum.jpg' %}">
+        </div>
+        <ul class="replies">
+            {% for r in object.comments.all %}
+                <li>
+                    <p><span class="author">{{ r.author.first_name }} {{ r.author.last_name }}</span>, {{ r.pub_date|date:"d/m/Y" }}: {{ r.reply_body }}</p>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endblock %}
\ No newline at end of file

forum/urls.py

 from django.urls import path
 
-from .views import index
+from .views import ForumPageView, PostDetailView
 
 urlpatterns = [
-    path('', index, name='index'),
+    path('', ForumPageView.as_view(), name='index'),
+    path('post/<int:pk>/details', PostDetailView.as_view(), name='post-detail'), 
 ]
 
 app_name = "forum"
\ No newline at end of file

forum/views.py

 from django.shortcuts import render
-from django.http import HttpResponse
+from django.views import View
+from django.views.generic.detail import DetailView
+
 from .models import Post, Reply
 
 # Create your views here.
-def index(request):
-    def post_list():
-        final_list = ''
-        for p in range(len(Post.objects.all())):
-            final_list += '{}'.format(Post.objects.get(pk=p+1).post_detail)
-            reply_list = list(Reply.objects.filter(post__exact=Post.objects.get(pk=p+1)))
-            for r in range(len(reply_list)):
-                final_list += '{}'.format(reply_list[r].reply_detail)
-            final_list += '<br>'
-
-        return final_list
+class ForumPageView(View):
+    def get(self, request):
+        return render(request, 'forum/forum.html', {
+        'post_list': Post.objects.all().order_by('-id'),
+        'reply_list': Reply.objects.all().order_by('-id')
+        })
 
-    html = f'''
-    <html>
-        <body>
-            <h1>FORUM POSTS:</h1>
-            <main>
-                <p>{post_list()}</p>
-            </main>
-        </body>
-    </html>
-    '''
 
-    return HttpResponse(html)
+class PostDetailView(DetailView):
+    model = Post

widget_group_23/static/css/forum_stylesheet.css

+body {
+    background-color: #EDEDED;
+    color: #222;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+
+header {
+    font-size: 32px;
+    font-weight: bold;
+    margin: 32px 0px 32px 0px;
+    text-align: center;
+}
+
+img {
+    height: 50%;
+    width: 50%;
+}
+
+.author {
+    font-weight: bold;
+}
+
+.post {
+    background-color: #FFF;
+    border-radius: 8px;
+    padding: 32px;
+}
+
+.posts {
+    margin: 0 auto;
+    padding-left: 0px;
+    width: 80%;
+}
+
+.posts li {
+    list-style: none;
+    margin-bottom: 24px;
+}
+
+.posts li a {
+    color: #222;
+    line-height: 175%;
+    text-decoration:none;
+}
+
+.posts li a:hover {
+    color: cornflowerblue !important;
+}
+
+.posts li a p {
+    background-color: #FFF;
+    border-radius: 8px;
+    padding: 32px 24px 32px 24px;
+}
+
+.posts li a .title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.replies {
+    background-color: #FFF;
+    border-radius: 8px;
+    padding: 32px 24px 32px 24px;
+}
+
+.replies li {
+    list-style: none;
+}
+
+.wrapper {
+    margin: 0 auto;
+    padding: 32px 0px 32px 0px;
+    width: 80%;
+}
\ No newline at end of file