Add plugin for rapid generation of staff pages - update UI & UX

apps/tup-cms/src/apps/staff_profile/admin.py

@@ -0,0 +1,13 @@
+from cms.admin.placeholderadmin import FrontendEditableAdminMixin
+from django.contrib import admin
+from .models import StaffProfilePlugin
+from .forms import StaffProfilePluginForm, fieldsets
+
+class StaffProfilePluginAdmin(FrontendEditableAdminMixin, admin.ModelAdmin):
+    form = StaffProfilePluginForm
+    fieldsets = fieldsets
+    list_display = ('id', 'first_name', 'last_name', 'department', 'email')
+    list_filter = ('department', 'title')
+    search_fields = ('first_name', 'last_name', 'email')
+
+admin.site.register(StaffProfilePlugin, StaffProfilePluginAdmin)

apps/tup-cms/src/apps/staff_profile/apps.py

@@ -1,4 +1,6 @@
 from django.apps import AppConfig
+from django.utils.translation import gettext_lazy as _
 
 class StaffProfileConfig(AppConfig):
+    verbose_name = _("TACC Staff Profiles")
     name = 'apps.staff_profile'

apps/tup-cms/src/apps/staff_profile/cms_plugins.py

@@ -9,18 +9,19 @@
 from djangocms_text_ckeditor.widgets import TextEditorWidget
 
 from .models import StaffProfilePlugin
-from .forms import StaffProfilePluginForm
+from .forms import StaffProfilePluginForm, fieldsets
 
 
 @plugin_pool.register_plugin
 class StaffProfilePlugin(CMSPluginBase):
-    module = "TUP CMS"
-    name = "Staff Profile"
+    module = 'TUP CMS'
+    name = _('Staff Profile')
     form = StaffProfilePluginForm
     model = StaffProfilePlugin
     render_template = "staff_profile/profile.html"
     cache = False
 
+    fieldsets = fieldsets
 
     def render(self, context, instance, placeholder):
         context = super().render(context, instance, placeholder)

apps/tup-cms/src/apps/staff_profile/forms.py

@@ -1,13 +1,102 @@
 
 from django.forms.models import ModelForm
 from django import forms
+from django.utils.translation import gettext_lazy as _
 from djangocms_text_ckeditor.widgets import TextEditorWidget
 
+from .models import StaffProfilePlugin
+
 class StaffProfilePluginForm(ModelForm):
-    description = forms.CharField(widget=TextEditorWidget, required=False)
-    publications = forms.CharField(widget=TextEditorWidget, required=False)
-    projects = forms.CharField(widget=TextEditorWidget, required=False)
-    education = forms.CharField(widget=TextEditorWidget, required=False)
-    research_areas = forms.CharField(widget=TextEditorWidget, required=False)
-    memberships = forms.CharField(widget=TextEditorWidget, required=False)
-    experience = forms.CharField(widget=TextEditorWidget, required=False)
+    first_name = forms.CharField(
+        required=True,
+        help_text=_('If desired, include middle name.')
+    )
+    last_name = forms.CharField(
+        required=True
+    )
+    post_nomials = forms.CharField(
+        required=False,
+        label=_('Post-nomials'),
+        help_text=_('E.g. Ph.D., B.S., M.B.A.')
+    )
+    title = forms.CharField(
+        required=True,
+        label=_('Job title')
+    )
+    title2 = forms.CharField(
+        required=False,
+        label=_('Secondary job title'),
+        help_text=_('Only necessary if the first job title is "Manager".')
+    )
+    email = forms.CharField(
+        required=True
+    )
+    department = forms.CharField(
+        required=False,
+        label=_('Group / Department')
+    )
+
+    description = forms.CharField(
+        widget=TextEditorWidget,
+        required=False,
+        label=_('Biography')
+    )
+
+    publications = forms.CharField(
+        widget=TextEditorWidget,
+        required=False,
+        label=_('Selected Publications')
+    )
+    projects = forms.CharField(
+        widget=TextEditorWidget,
+        required=False,
+        label=_('Current Projects')
+    )
+    education = forms.CharField(
+        widget=TextEditorWidget,
+        required=False
+    )
+    research_areas = forms.CharField(
+        widget=TextEditorWidget,
+        required=False,
+        label=_('Areas of Research')
+    )
+    memberships = forms.CharField(
+        widget=TextEditorWidget,
+        required=False
+    )
+
+fieldsets = [
+    (_('Name'), {
+        'fields': (
+            ('first_name', 'last_name', 'post_nomials'),
+        )
+    }),
+    (_('Role'), {
+        'fields': (
+            ('title', 'title2'),
+            ('department'),
+        )
+    }),
+    (_('Contact'), {
+        'fields': (
+            ('email', 'phone'),
+        )
+    }),
+    (_('Introduction'), {
+        'description': 'We encourage all staff to have a professional photo and a brief professional bio.',
+        'fields': (
+            'photo',
+            'description',
+        )
+    }),
+    (_('Other'), {
+        'fields': (
+            'publications',
+            'projects',
+            'research_areas',
+            'memberships',
+            'education',
+        )
+    }),
+]

apps/tup-cms/src/apps/staff_profile/migrations/0003_reduce_first_last_name_length_squashed_0009_do_not_require_photo.py

@@ -0,0 +1,32 @@
+# Generated by Django 3.2.18 on 2023-08-11 23:16
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('filer', '__first__'),
+        ('staff_profile', '0002_split_name_into_first_and_last'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='staffprofileplugin',
+            name='photo',
+            field=filer.fields.image.FilerImageField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.FILER_IMAGE_MODEL),
+        ),
+        migrations.AddField(
+            model_name='staffprofileplugin',
+            name='post_nomials',
+            field=models.CharField(max_length=100),
+        ),
+        migrations.AddField(
+            model_name='staffprofileplugin',
+            name='title2',
+            field=models.CharField(max_length=100),
+        ),
+    ]

apps/tup-cms/src/apps/staff_profile/migrations/0003_reduce_first_last_name_length.py → apps/tup-cms/src/apps/staff_profile/migrations/0004_reduce_name_field_lengths.py

@@ -1,12 +1,12 @@
-# Generated by Django 3.2.18 on 2023-08-11 15:30
+# Generated by Django 3.2.18 on 2023-08-16 16:52
 
 from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('staff_profile', '0002_split_name_into_first_and_last'),
+        ('staff_profile', '0003_reduce_first_last_name_length_squashed_0009_do_not_require_photo'),
     ]
 
     operations = [

apps/tup-cms/src/apps/staff_profile/migrations/0005_remove_experience.py

@@ -0,0 +1,17 @@
+# Generated by Django 3.2.18 on 2023-08-16 16:53
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('staff_profile', '0004_reduce_name_field_lengths'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='staffprofileplugin',
+            name='experience',
+        ),
+    ]

apps/tup-cms/src/apps/staff_profile/models.py

@@ -1,5 +1,4 @@
 from cms.models.pluginmodel import CMSPlugin
-from django.utils.translation import gettext_lazy as _
 from filer.fields.image import FilerImageField
 from django.db import models
 
@@ -10,18 +9,19 @@ class StaffProfilePlugin(CMSPlugin):
     """
     first_name = models.CharField(max_length=100)
     last_name = models.CharField(max_length=100)
+    post_nomials = models.CharField(max_length=100)
     title = models.CharField(max_length=100)
+    title2 = models.CharField(max_length=100)
     email = models.CharField(max_length=100)
     department = models.CharField(max_length=100)
     phone = models.CharField(max_length=50, null=True)
 
     description = models.TextField()
 
-    photo = FilerImageField(on_delete=models.CASCADE, null=True)
+    photo = FilerImageField(on_delete=models.CASCADE, null=True, blank=True)
 
     publications = models.TextField(null=True)
     projects = models.TextField(null=True)
     education = models.TextField(null=True)
     research_areas = models.TextField(null=True)
     memberships = models.TextField(null=True)
-    experience = models.TextField(null=True)

apps/tup-cms/src/apps/staff_profile/static/staff_profile/css/staff_profile.css

@@ -0,0 +1,37 @@
+/* To add more space beneath lists */
+/* TODO: Consider changing this in core-styles.base.css */
+/* TODO: Alternatively, consider adding this to core-styles.cms.css */
+.s-staff-profile :is(dl, ul, ol) {
+  /* To mimic core-styles.cms.css <p> */
+  margin-bottom: 2rem; /* overwrites core-styles.base.css */
+}
+
+/* When sidebar is under main content */
+/* WARNING: This query assumes Bootstrap 4 grid classes "col-sm-12 col-md-6" */
+@media only screen and (max-width: 767px) {
+
+  /* To remove bullets in a c-content-block */
+  :is(.c-content-block, .content-block) ul {
+    list-style-type: none;
+  }
+
+  /* To undo c-content-block styles (Core-Styles) */
+  :is(.c-content-block, .content-block) {
+      margin-bottom: unset;
+      padding: unset;
+  }
+  :is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) {
+      border-left: unset;
+      padding-left: unset;
+  }
+  /* To retain space between staff image and a content block beneath */
+  :is(.c-content-block, .content-block) img {
+    margin-bottom: var(--global-space--pattern-pad); /* mimics c-content-block padding */
+  }
+
+  /* To undo c-content-block styles (TUP-CMS) */
+  :is(.c-content-block, .content-block) + :is(.c-content-block, .content-block) {
+      margin-top: unset;
+  }
+
+}

apps/tup-cms/src/apps/staff_profile/static/staff_profile/js/staff_profile.js

@@ -0,0 +1,34 @@
+/* Move image on load and on window resize */
+
+const mainColumn = document.querySelector(
+  '.row.s-staff-profile > .col:nth-child(1)'
+);
+const sideColumn = document.querySelector(
+  '.row.s-staff-profile > .col:nth-child(2)'
+);
+const mainHeader = mainColumn.querySelector(':scope > h2');
+const image = sideColumn.querySelector(':scope > *:first-child');
+
+/** Move image to side column on wide screen, otherwise to main column */
+function moveImage() {
+  const isWideScreen = window.matchMedia('(min-width: 768px)').matches;
+
+  if (isWideScreen) {
+    if (!sideColumn.contains(image)) {
+      sideColumn.prepend(image);
+      if (window.DEBUG) console.log('Staff image should be in side column');
+    }
+  } else {
+    if (!mainColumn.contains(image)) {
+      mainHeader.after(image);
+      if (window.DEBUG) console.log('Staff image should be in main column');
+    }
+  }
+}
+
+moveImage();
+// HELP: Can event be limited to width resize only? Is it worth it?
+// SEE: https://stackoverflow.com/a/71782892/11817077
+window.addEventListener('resize', () => {
+  moveImage();
+});

apps/tup-cms/src/apps/staff_profile/templates/staff_profile/includes/block_main.html

@@ -0,0 +1,4 @@
+{% if content %}
+<h3>{{title}}</h3>
+{{content | safe}}
+{% endif %}

apps/tup-cms/src/apps/staff_profile/templates/staff_profile/includes/block_side.html

@@ -0,0 +1,6 @@
+{% if content %}
+<aside class="content-block">
+  <h3>{{title}}</h3>
+  {{content | safe}}
+</aside>
+{% endif %}

apps/tup-cms/src/apps/staff_profile/templates/staff_profile/includes/display_name.html

@@ -0,0 +1,5 @@
+{% if instance.post_nomials %}
+  {{instance.first_name}} {{instance.last_name}}, {{instance.post_nomials}}
+{% else %}
+  {{instance.first_name}} {{instance.last_name}}
+{% endif %}

apps/tup-cms/src/apps/staff_profile/templates/staff_profile/includes/photo.html

@@ -0,0 +1,23 @@
+{% load static %}
+
+<div class="content-block">
+  {% if instance.photo %}
+  <img
+    src="{{instance.photo.url}}"
+    title="{% spaceless %}
+        {% if instance.photo.default_alt_text %}
+            {{instance.photo.default_alt_text}}
+        {% else %}
+            {% include './display_name.html' %}
+        {% endif %}
+    {% endspaceless %}"
+    class="img-fluid"
+  />
+  {% else %}
+  <img
+    src="{% static 'staff_profile/img/ut-seal.svg' %}"
+    title="University of Texas at Austin"
+    class="img-fluid"
+  />
+  {% endif %}
+</div>