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

[wesleyboar]

Overview

Improve UI and UX and data.

Related

• TUP-548
• builds atop Add plugin for rapid generation of staff pages #253
• includes:
  • Add plugin for rapid generation of staff pages - split name into first and last #294
  • Add plugin for rapid generation of staff pages - require only certain fields #295

Changes

• added admin interface for plugin instances
• changed plugin name to be translatable
• added field help text and custom labels
• changed which fields are required
• added form layout and field organization
• added post_nomials and title2
• changed photo to not be required
• removed experience¹
• added styles for new ui requests
• added image fallback for missing photo
• added script for new ui request
• changed markup to match live pages
• added snippet for ui and ux on manual pages

Testing

Setup

0. Checkout and pull the branch of this PR.
1. Run the CMS locally, and be a superuser.
   ^{After TACC/tup-ui:README.md step 7, continue with TACC/Core-CMS/:README.md "Start Project" step 2.}
2. docker exec -it tup_cms /bin/bash
   then python manage.py migrate staff_profile
   ^{Unless you already ran python manage.py migrate cuz you set up fresh local env on this branch.}
3. Add or edit a "Staff Profile" plugin instance.

1. Verify job title and dept. combinations render as expected.

   • one title and no dept.:

     Title

   • one title and a dept.:

     Title
     Dept

   • two titles and a dept.:

     Title, Dept.
     Title2

   • two titles and no dept.:

     Title
     Title2

2. Verify image "alt text" possibilities:

   1. with "Alt. text" (add via Filer), uses that for alt attr.
   2. with no alt text (via Filer), uses full name for alt attr.
3. Verify fields that are not required, when not provided, do not render excess markup.

   1. empty "Phone" should not render "Phone: | "
   2. empty "Group / Department" should not render ", " nor <br /><small></small>
   3. empty "Other" content should not render <div content-block">…</div>
4. Verify required fields are only names, title, and e-mail.

   Any field required that is not filled will render error upon form submission.

5. Verify a missing photo will render the UT Seal.

6. Verify a missing photo will render the UT Seal.

   Any required field left empty will cause error to render after form submission.

7. Verify design is responsive in specific ways:

   • On narrow screen (<768px):
     • Photo is beneath name and title and dept.
     • Education is at bottom of page
     • Education lacks green border beside heading
     • Education lacks extra padding
   • On wide screen (≥768px):
     • Photo is above Education, right of name and title and dept.
     • Education is below Photo, right of name and title and dept.
     • Education has green border beside heading
     • Education has extra padding
8. Verify staff profiles can be browsed and edited via admin interface.

   Either, open http://localhost:8000/admin/staff_profile/staffprofileplugin.

   Or, from http://localhost:8000/admin/, scroll to "TACC Staff Profiles" and click "Staff profile plugins".

UI

1. Job Title & Dept. Differences

   Page	Form

5. and 6. Photo Not Required & Fallback

   image.not.required.and.has.fallback.mov

7. Responsive Design

   Wide	Narrow

8. Admin Interface

   Admin	Table	Form

Notes

CMD Proposals - Staff Profile Layout & Data

Footnotes

1. H.P. says Professional Experience is for leadership, as wanted; rare in general; and easily appended to staff Bio. ↩

[wesleyboar]

Leave notes for reviewers.

[wesleyboar]

Why? To create "Staff profile plugins" in /admin interface.

[wesleyboar]

Why? To title /admin page under "TACC STAFF PROFILES" (rather than "STAFF_PROFILE"),

[wesleyboar]

What? Consistent (and translatable) plugin identification. Use custom form layout.

[wesleyboar]

What? Set which fields are required. Add help text and custom labels. Define custom form layout.

[wesleyboar]

Help! Git got confused or I screwed up.