Jake Paris

The Quad – Internal Communications Application

2015-16

This is a single page application aimed at communicating with internal audiences. The daily announcements and events are also compiled into an email which is sent to the entire student body, faculty, and staff. The entire main page is created with javascript, gathering the data from a different source for each module, then composing everything in a visually cohesive way. The data is put together by php on the server side, which in turn gathers it from various sources such as WordPress custom post types (for the announcements), a third-party events application, a third-party athletics web service, a WordPress feed of dining menu items.

The application is complex with a variety of systems and WordPress plugins working in tandem to produce the email, the web application, and provide a system for student and staff to submit announcements and manage what goes into the email each day.

The interface for the email editor is built within the WordPress framework, but primarily with ajax. It uses the exact backend code to produce the email within the admin page, then a javascript layer provides the managing capabilities.

The floating bar at the top provide quick filters for the editor to see what’s been approved and what hasn’t. 

The color code at the left of each item shows it’s status.

Hovering over an item displays the quick action buttons which change an item’s status via ajax.

The items are draggable which provides a quick way to control what order announcements will show up in the email. In this picture, an announcement is getting dragged, but it’s hard to tell because there’s no cursor visible. Silly screenshooting program.

This application responds to various screen sizes and adjust the display accordingly. While this is commonplace, the dynamic paging for the columns of announcements was a real pain to get correct so that it worked on any screen size and adjusted the number of pages and so forth. 

The items are draggable which provides a quick way to control what order announcements will show up in the email. In this picture, an announcement is getting dragged, but it’s hard to tell because there’s no cursor visible. Silly screenshooting program.

This application responds to various screen sizes and adjust the display accordingly. While this is commonplace, the dynamic paging for the columns of announcements was a real pain to get correct so that it worked on any screen size and adjusted the number of pages and so forth.