Merge pull request #643 from freelawproject/641-EOY-banner

feat(header): add customizable banner to header

bc/assets/templates/includes/banner.html

@@ -0,0 +1,38 @@
+{% comment %}
+  This template renders a banner that fills the horizontal space available and
+  conditionally displays a title, a text, and a button, based on the following params:
+
+  Parameters:
+    title: The title for the banner, displayed in bold text (optional)
+    text: The text for the banner, displayed in regular text (optional)
+    button_text: Text of the button (Optional: No button is displayed if not provided)
+    button_link: The URL that the button points to (Optional: No button is displayed if not provided)
+
+  The banner elements (title, text, button) are displayed in a row in large screens, and as a column
+  in small and medium screens.
+
+  It's advisable to wrap this template with a div tag and use the parent element to handle
+  the sizing and the responsive behavior. Here's an example:
+
+  <div class="flex w-44 md:w-48 lg:w-52">
+    {% include 'includes/banner.html' with button_text="Donate Today" button_link="https://donate.free.law/forms/supportflp" title="Today is GivingTuesday!" %}
+  </div>
+{% endcomment %}
+
+<div class="flex w-full justify-center items-center py-2 px-4 sm:px-6 md:px-10">
+  <div class="flex lg:flex-row flex-col justify-center items-center py-3 text-center">
+    {% if title %}
+      <strong class="pr-0 lg:pr-6">{{ title }}</strong>
+    {% endif %}
+    {% if text %}
+      <span class="text-sm pr-2 mb-2 lg:mb-0 text-start">
+        {{ text }}
+      </span>
+    {% endif %}
+    {% if button_text and button_link %}
+      <div class="w-28 text-sm font-medium mr-1 outline rounded-md outline-1 hover:text-gray-300">
+        {% include './action-button.html' with link=button_link text=button_text size='sm' color='' %}
+      </div>
+    {% endif %}
+  </div>
+</div>

bc/assets/templates/includes/header.html

@@ -1,19 +1,12 @@
 {% load static web_extras %}
 
-{#<div class="flex w-full justify-center items-center py-2 border-b-2 border-gray-400">#}
-{#  <div class="flex lg:flex-row flex-col justify-center items-center p-3 text-center">#}
-{#    <strong class="pr-2">Today is GivingTuesday.</strong>#}
-{#    <span class="text-sm pr-2 mb-2 lg:mb-0">#}
-{#      Your support of Free Law Project helps make the justice system more transparent and accessible to all.#}
-{#    </span>#}
-{#    <a href="https://donate.free.law/forms/givingtuesday" class="underline hidden md:block">#}
-{#      Donate Today!#}
-{#    </a>#}
-{#    <div class="w-28 text-sm font-medium mr-1 md:hidden">#}
-{#      {% include './action-button.html' with link="https://donate.free.law/forms/supportflp" text="Donate Today!" size='sm' color='saffron' %}#}
-{#    </div>#}
-{#  </div>#}
-{#</div>#}
+{% if HEADER_BANNER_ENABLED %}
+<div class="border-b-2 border-gray-400 bg-gradient-to-b from-gray-300 via-white to-white">
+  <div class="max-w-7xl mx-auto">
+    {% include './banner.html' with button_text=HEADER_BANNER_BUTTON_TEXT button_link=HEADER_BANNER_BUTTON_LINK text=HEADER_BANNER_TEXT title=HEADER_BANNER_TITLE %}
+  </div>
+</div>
+{% endif %}
 
 <div class="relative bg-gray-200 border-b-2 border-gray-400">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-10">

bc/core/admin.py

@@ -0,0 +1,15 @@
+from django.contrib import admin
+
+from bc.core.models import BannerConfig
+
+
+@admin.register(BannerConfig)
+class BannerConfigAdmin(admin.ModelAdmin):
+    list_display = ("__str__", "is_active", "title", "text")
+    list_filter = ("is_active",)
+    search_fields = (
+        "title",
+        "text",
+        "button_text",
+        "button_link",
+    )

bc/core/migrations/0001_initial.py

@@ -0,0 +1,43 @@
+# Generated by Django 5.1.1 on 2024-12-10 15:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="BannerConfig",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "is_active",
+                    models.BooleanField(
+                        default=False,
+                        help_text="If another config is currently active, enabling this one will deactivate the first one.",
+                    ),
+                ),
+                (
+                    "title",
+                    models.CharField(blank=True, max_length=255, null=True),
+                ),
+                ("text", models.TextField(blank=True, null=True)),
+                (
+                    "button_text",
+                    models.CharField(blank=True, max_length=40, null=True),
+                ),
+                ("button_link", models.URLField(blank=True, null=True)),
+            ],
+        ),
+    ]

bc/core/models.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.db.models import Q
 
 
 class AbstractDateTimeModel(models.Model):
@@ -18,3 +19,30 @@ class AbstractDateTimeModel(models.Model):
 
     class Meta:
         abstract = True
+
+
+class BannerConfig(models.Model):
+
+    is_active = models.BooleanField(
+        default=False,
+        help_text="If another config is currently active, enabling this one will deactivate the first one.",
+    )
+    title = models.CharField(max_length=255, null=True, blank=True)
+    text = models.TextField(null=True, blank=True)
+    button_text = models.CharField(max_length=40, null=True, blank=True)
+    button_link = models.URLField(null=True, blank=True)
+
+    def __str__(self):
+        status = "active" if self.is_active else "inactive"
+        title = self.title or "Banner"
+        return f"{self.pk}: {title} ({status})"
+
+    def save(self, *args, **kwargs):
+        # If this banner is being activated, deactivate others.
+        if self.is_active:
+            # Deactivate all other active banners
+            BannerConfig.objects.filter(is_active=True).exclude(
+                pk=self.pk
+            ).update(is_active=False)
+
+        super().save(*args, **kwargs)

bc/core/utils/context_processors.py

@@ -0,0 +1,18 @@
+from django.conf import settings
+
+from bc.core.models import BannerConfig
+
+
+def banner_settings(request):
+    active_banner = BannerConfig.objects.filter(is_active=True).first()
+    return {
+        "HEADER_BANNER_ENABLED": bool(active_banner),
+        "HEADER_BANNER_TITLE": (active_banner.title if active_banner else ""),
+        "HEADER_BANNER_TEXT": (active_banner.text if active_banner else ""),
+        "HEADER_BANNER_BUTTON_TEXT": (
+            active_banner.button_text if active_banner else ""
+        ),
+        "HEADER_BANNER_BUTTON_LINK": (
+            active_banner.button_link if active_banner else ""
+        ),
+    }

bc/settings/django.py

@@ -81,6 +81,7 @@
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "bc.core.utils.context_processors.banner_settings",
             ],
         },
     },