Feature: Announcement bar (for holidays, emergencies, etc.)

[fancyham]

Context

Sometimes, we need to display an announcement to all visitors.
This would typically happen around holidays, but might also be used for emergencies.

Examples

• ⚠️Due to fires, some information may be out-of-date
• 🎁Holiday hours may be different from usual. Please contact organizations for their specific holiday schedule.
• ⚠️If you have been affected by the fires, please also visit someurlat.la.gov for more information.

Other sites have a dismissible announcement dialog or bar or other notification for these situations, so we are doing something similar.

How is it now?

The LA Palisades fires just happened, so we've hard-coded an announcement into the header, but it's clumsy and doesn't great. It is also very limited in text length.

So we want to build something that's more robust, user-friendly, and can handle more text.

Proposed new feature

Using the existing Material Design dialog style (does such a style exist? if not, what's a good replacement?), we want to display a notification bar across the top when the user first visits the site, no matter what screen they enter on. This should only appear on the public site, not on the private part of the site (i.e. behind the log-in screen)

How it works:

• Notification bar appears at the top of the user's first screen (including deep links, for example to an org's listing scren). This bar appears once per-session. New sessions will see the bar again.
• Notification bar does not appear on the volunteer portion of the site (deep linking into the volunteer portion should also not display this dialog)
• Once dismissed, it doesn't appear again until the user starts a new session
• User needs to tap/Click OK (or a X dismiss button) to dismiss the notification
• Admin control panel to edit the announcement text
• Announcement text can have emojis, HTML links, styling that should show up correctly as the dialog text (let us know if that's not possible) This could be done using Markdown or by entering actual HTML code (Markdown would be ideal)
• Settings are per-tenant (e.g. LA might have an announcement active but Hawaii does not)

Control panel

Stretch goal:

• Scheduled announcements with start and/or end date. Announcement displays based on the server's date/time, if possible.
• Can set color of announcement

Action items

• Developers: Is this design possible? how difficult? if not possible, what do you suggest? If necessary, we can revise design to something that is.

Discussion

We originally designed this as a pop-up modal dialog, but so many people automatically dismiss/close those without reading that we wanted something that was unobtrusive but sticks around until you actually read it.

[fancyham]

We’re looking at switching this from a dialog, which feels like a blocker (per discussion with @ihorng and @jelenaUX), to a notification bar at top:

[SAUMILDHANKAR]

We are planning to break down this issue into multiple smaller issues which will be tracked in this issue on top.

[SAUMILDHANKAR]

Moving this to icebox with a note to check back this issue once all the sub issues are done.

[fancyham]

Moved this back to prioritized backlog — needs questions answered by dev — is this new design something we can do (relatively easily)?

[SAUMILDHANKAR]

Moved this back to prioritized backlog — needs questions answered by dev — is this new design something we can do (relatively easily)?

@fancyham The front end design looks straightforward. I am working on adding a database table and connecting that to admin portal in my local environment. This might take sometime. My issue is a sub issue of this feature. Thanks.