feat: add modal size control to announcements

Author: zorexsalvo

app/announcements/admin.py

@@ -5,12 +5,13 @@
 
 @admin.register(Announcement)
 class AnnouncementAdmin(admin.ModelAdmin):
-    list_display = ("title", "is_published", "created_at", "updated_at")
-    list_filter = ("is_published", "created_at")
+    list_display = ("title", "modal_size", "is_published", "created_at", "updated_at")
+    list_filter = ("is_published", "modal_size", "created_at")
     search_fields = ("title", "content")
     readonly_fields = ("created_at", "updated_at")
     fieldsets = (
         ("Content", {"fields": ("title", "content")}),
+        ("Display", {"fields": ("modal_size",)}),
         ("Status", {"fields": ("is_published",)}),
         ("Metadata", {"fields": ("created_at", "updated_at")}),
     )

app/announcements/migrations/0002_announcement_modal_size.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.7 on 2026-03-12 13:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('announcements', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='announcement',
+            name='modal_size',
+            field=models.CharField(choices=[('md', 'Medium (default)'), ('lg', 'Large'), ('xl', 'Extra Large')], default='md', help_text='Width of the announcement modal', max_length=10),
+        ),
+    ]

app/announcements/models.py

@@ -3,8 +3,20 @@
 
 
 class Announcement(models.Model):
+    MODAL_SIZES = [
+        ("md", "Medium (default)"),
+        ("lg", "Large"),
+        ("xl", "Extra Large"),
+    ]
+
     title = models.CharField(max_length=255)
     content = HTMLField()
+    modal_size = models.CharField(
+        max_length=10,
+        choices=MODAL_SIZES,
+        default="md",
+        help_text="Width of the announcement modal",
+    )
     is_published = models.BooleanField(default=False)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)

static/css/app.css

@@ -3696,6 +3696,16 @@
       width: 100%;
     }
   }
+  .lg\:max-w-2xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-2xl);
+    }
+  }
+  .lg\:max-w-4xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-4xl);
+    }
+  }
   .lg\:max-w-\[100\%\] {
     @media (width >= 64rem) {
       max-width: 100%;
@@ -3711,6 +3721,11 @@
       max-width: 452px;
     }
   }
+  .lg\:max-w-lg {
+    @media (width >= 64rem) {
+      max-width: var(--container-lg);
+    }
+  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));

templates/includes/announcement_modal.html

@@ -5,7 +5,7 @@
 
 {% if latest_announcement %}
 <dialog id="announcement-modal" class="modal" open>
-    <div class="modal-box bg-cream-1">
+    <div class="modal-box {% if latest_announcement.modal_size == 'lg' %}lg:max-w-2xl{% elif latest_announcement.modal_size == 'xl' %}lg:max-w-4xl{% else %}lg:max-w-lg{% endif %}">
         <h3 class="font-bold text-lg">📢 {{ latest_announcement.title }}</h3>
         <div class="py-4">
             {{ latest_announcement.content|safe }}