Added images associated with the Announcements, and setup separate style.css for each widget app

widget_alipins/announcements/migrations/0005_announcement_announcement_image.py

+# Generated by Django 4.0.3 on 2022-05-13 13:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('announcements', '0004_auto_20220403_1509'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='announcement',
+            name='announcement_image',
+            field=models.ImageField(blank=True, null=True, upload_to='announcements/'),
+        ),
+    ]

widget_alipins/announcements/models.py

@@ -8,6 +8,7 @@ class Announcement(models.Model):
     announcement_body = models.TextField(max_length=1500)
     pub_date = models.DateTimeField("date published")
     author = models.ForeignKey(WidgetUser, on_delete=models.CASCADE)
+    announcement_image = models.ImageField(null = True, blank = True, upload_to = "announcements/")
 
     def __str__(self):
         return self.announcement_title

widget_alipins/announcements/templates/announcements/detail.html

 {% extends 'base.html' %}
+{% load static %}
+
+    {% block styles %}
+        <link rel="stylesheet" type="text/css" href="{% static 'announcements/style.css' %}">   
+    {% endblock %}
+
 {% block title %}{{announcement.announcement_title}}{% endblock %}
 {% block content %}
     <h1>{{announcement.announcement_title}}</h1>
-    <div>
     <h2>by {{announcement.author.first_name}} {{announcement.author.last_name}}, {{announcement.pub_date|date:"d/m/Y"}}</h2>
+    <div> 
         <p>
             Description: {{announcement.announcement_body}}<br><br>
+            {% if announcement.announcement_image %}
+                <img src = "{{ announcement.announcement_image.url }}"><br>
+            {% endif %}
             Reaction:<br>
             {% for reaction in reaction_list %} 
                 {% if reaction.announcement.id == announcement.id %}
                     {{reaction.reaction_name}}: {{reaction.tally}}<br>
                 {% endif %}
             {% endfor %}
+            
         </p>
     </div>
 {% endblock  %}
\ No newline at end of file

widget_alipins/announcements/templates/announcements/index.html

 {% extends 'base.html' %}
+{% load static %}
+
+    {% block styles %}
+        <link rel="stylesheet" type="text/css" href="{% static 'announcements/style.css' %}">   
+    {% endblock %}
+
 {% block title %}Announcements{% endblock %}
 {% block content %}
     <h1>Announcement Board </h1>

widget_alipins/announcements/urls.py

 from django.urls import path
-
 from . import views
 
 app_name = "announcements"

widget_alipins/assignments/templates/assignments/detail.html

 {% extends 'base.html' %}
+{% load static %}
+    {% block styles %}
+        <link rel="stylesheet" type="text/css" href="{% static 'assignments/style.css' %}">   
+    {% endblock %}
+
 {% block title %}{{assignment.name}} | {{assignment.course.course_code}}{% endblock %}
 {% block content %}
     <h1>{{assignment.course.course_code}} | {{assignment.course.course_title}} - {{assignment.course.section}}</h1>

widget_alipins/assignments/templates/assignments/index.html

 {% extends 'base.html' %}
+{% load static %}
+    {% block styles %}
+        <link rel="stylesheet" type="text/css" href="{% static 'assignments/style.css' %}">   
+    {% endblock %}
+
+
 {% block title %}Assignments{% endblock %}
 {% block content %}
     <h1>Assignments Per Course</h1>

widget_alipins/static/announcements/style.css

+body {
+    font-family: sans-serif, Arial, Helvetica;
+    color:#066438;
+    margin: 40px;
+    line-height: 2;
+}
+
+div {
+    margin: auto;
+    width: 50%;
+    border: 3px solid rgb(5, 119, 85);
+    padding: 20px 40px 40px 80px;
+}
+
+h1 {
+    font-size: 50px;
+    text-align: center;
+    text-decoration: underline;
+}
+
+h2 {
+    font-size: 28px;
+    text-align: center;
+}
+
+li {
+    font-size: 20px;
+}
+
+p {
+    font-size: 20px;
+}
+
+span {
+    font-weight: bold;
+}
+
+span.perfect {
+    color: rgb(96, 189, 96);
+}
+
+span.passing {
+    color:#bb5959
+}
\ No newline at end of file

widget_alipins/templates/base.html

@@ -6,7 +6,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="{% static 'assignments/style.css' %}">
+    {% block styles %}
+    {% endblock %}
     <title>{% block title %} Alipins {% endblock %}</title>
 </head>
 <body>

widget_alipins/widget_alipins/settings.py

@@ -123,8 +123,12 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
-STATIC_URL = 'static/'
-
+STATIC_URL = '/static/'
+MEDIA_ROOT =  os.path.join(BASE_DIR, 'media')
+MEDIA_URL = '/media/'
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, 'static'),
+)
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
 

widget_alipins/widget_alipins/urls.py

@@ -16,10 +16,13 @@ Including another URLconf
 from django.contrib import admin
 from django.urls import include, path
 
+from django.conf import settings
+from django.conf.urls.static import static
+
 urlpatterns = [
     path('assignments/', include('assignments.urls')),
     path('announcements/', include('announcements.urls')),
     path('forum/', include('forum.urls')),
     path('homepage/', include('homepage.urls')),
     path('admin/', admin.site.urls),
-]
+]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)