Finalizing htmls and stylesheet of assignments

announcements/migrations/0004_alter_reaction_announcement.py

+# Generated by Django 4.0.3 on 2022-05-19 17:30
+
+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'),
+        ),
+    ]

announcements/migrations/0005_announcement_image.py

+# Generated by Django 3.2.12 on 2022-05-23 07:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('announcements', '0004_alter_reaction_announcement'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='announcement',
+            name='image',
+            field=models.ImageField(default=1, upload_to='announcements/'),
+            preserve_default=False,
+        ),
+    ]

announcements/models.py

@@ -11,6 +11,7 @@ class Announcement(models.Model):
         on_delete=models.CASCADE
     )
 
+    image = models.ImageField(upload_to='announcements/')
     def __str__(self):
         return '{}'.format(self.announcement_title)
 
@@ -44,7 +45,7 @@ class Reaction(models.Model):
 
     @property
     def reaction_detail(self):
-        reaction = '<br>{}: {}'.format(self.reaction_name, self.tally)
+        reaction = '{}: {}'.format(self.reaction_name, self.tally)
 
         return reaction
 

announcements/templates/announcements/announcement.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'css/announcements_stylesheet.css' %}">
+{% endblock %}
+
+{% block app_header %}Announcement Board{% endblock %}
+
+{% block content %}
+<p class="head">Important announcements:</p>
+<ul class="announcements">
+    {% for a in announcement_list %}
+        <li>
+            <a href="{% url 'announcements:announcement-detail' pk=a.pk %}">
+                 <p><span class="title">{{ a.announcement_title }}</span> <br/> by <span class="author">{{ a.author.first_name }} {{ a.author.last_name }}</span> dated {{ a.pub_date|date:"d/m/Y" }}</p>
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+{% endblock %}
\ No newline at end of file

announcements/templates/announcements/announcement_detail.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'css/announcements_stylesheet.css' %}">
+{% endblock %}
+
+{% block content %}
+    <h3>{{ object.announcement_title }}</h3>
+    <h2 class="subtitle">by {{ object.author.first_name }} {{ object.author.last_name }}, {{ object.pub_date|date:"d/m/Y" }}</h2>
+    <p>{{ object.announcement_body }}</p>
+    <div class="reactions">
+        
+    {% for r in object.reacts.all %}
+        <p class="reaction">{{ r.reaction_detail }}  </p>
+    {% endfor %}
+    </div>
+    <img src= "{{ object.image.url }}">
+{% endblock %}
\ No newline at end of file

announcements/urls.py

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

announcements/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 Announcement, Reaction
 
 # Create your views here.
-def index(request):
-    def announcement_list():
-        final_list = ''
-        for p in range(len(Announcement.objects.all())):
-            final_list += '{}'.format(Announcement.objects.get(pk=p+1).announcement_detail)
-            reaction_list = list(Reaction.objects.filter(announcement=Announcement.objects.get(pk=p+1)))
-            lk_tally = 0
-            lv_tally = 0
-            ag_tally = 0
-            for r in range(len(reaction_list)):
-                if str(reaction_list[r]) == 'LK':
-                    lk_tally += reaction_list[r].reaction_tally
-                elif str(reaction_list[r]) == 'LV':
-                    lv_tally += reaction_list[r].reaction_tally
-                elif str(reaction_list[r]) == 'AG':
-                    ag_tally += reaction_list[r].reaction_tally
-            final_list += f'<br>Like: {lk_tally}'
-            final_list += f'<br>Love: {lv_tally}'
-            final_list += f'<br>Angry: {ag_tally}<br>'    
+class AnnouncementPageView(View):
+    def get(self, request):
+        return render(request, 'announcements/announcement.html', {
+        'announcement_list': Announcement.objects.all().order_by('-id'),
+        'reaction_list': Reaction.objects.all().order_by('-id')
+        })
 
-        return final_list
 
-    html = f'''
-    <html>
-        <body>
-            <h1>ANNOUNCEMENTS:</h1>
-            <main>
-                <p>{announcement_list()}</p>
-            </main>
-        </body>
-    </html>
-    '''
-
-    return HttpResponse(html)
\ No newline at end of file
+class AnnouncementDetailView(DetailView):
+    model = Announcement

assignments/migrations/0005_alter_assignment_image.py

+# Generated by Django 4.0.3 on 2022-05-19 17:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('assignments', '0004_assignment_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='assignment',
+            name='image',
+            field=models.ImageField(upload_to='assignments/'),
+        ),
+    ]

assignments/views.py

@@ -4,6 +4,8 @@ from django.views.generic.detail import DetailView
 
 from .models import Assignment, Course
 
+from .models import Assignment
+
 # Create your views here.
 class AssignmentsPageView(View):
     def get(self, request):
@@ -13,4 +15,4 @@ class AssignmentsPageView(View):
         })
 
 class AssignmentDetailView(DetailView):
-    model = Assignment
\ No newline at end of file
+    model = Assignment

forum/migrations/0013_alter_post_image.py

-# Generated by Django 4.0.3 on 2022-05-19 16:13
+# Generated by Django 4.0.3 on 2022-05-19 17:30
 
 from django.db import migrations, models
 
@@ -13,6 +13,6 @@ class Migration(migrations.Migration):
         migrations.AlterField(
             model_name='post',
             name='image',
-            field=models.ImageField(upload_to='forum/images/'),
+            field=models.ImageField(upload_to='forum/'),
         ),
     ]

forum/models.py

@@ -10,7 +10,7 @@ class Post(models.Model):
         'homepage.WidgetUser',
         on_delete=models.CASCADE
     )
-    image = models.ImageField(upload_to="forum/images/")
+    image = models.ImageField(upload_to="forum/")
 
     def __str__(self):
         return '{}'.format(self.post_title)

widget_group_23/static/css/announcements_stylesheet.css

+body {
+    background-color: #f8e2e2;
+    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%;
+}
+
+h3 {
+    font-size: 36px;
+}
+
+.head {
+    font-size: 24px;
+    margin: 32px 0px 32px 0px;
+    text-align: center;
+}
+
+.author {
+    font-weight: bold;
+}
+
+.announcement {
+    background-color: #FFF;
+    border-radius: 8px;
+    padding: 32px;
+}
+
+.announcements {
+    margin: 0 auto;
+    padding-left: 0px;
+    width: 80%;
+}
+
+.announcements li {
+    list-style: none;
+    margin-bottom: 24px;
+}
+
+.announcements li a {
+    color: #222;
+    line-height: 175%;
+    text-decoration:none;
+}
+
+.announcements li a:hover {
+    color: cornflowerblue !important;
+}
+
+.announcements li a p {
+    background-color: #FFF;
+    border-radius: 8px;
+    padding: 32px 24px 32px 24px;
+}
+
+.title {
+    font-size: 20px;
+    font-weight: bold;
+}
\ No newline at end of file