App Patterns

Add css/app-patterns.css to the project, copied from the Decorator Kit Developer Guide, and link it in the "site-specific CSS" block of each page that uses app patterns. Every rule must stay scoped under main#main-content plus an app-* class. Key active states on aria-current, aria-expanded, or :checked. Never target .active, .nav, .dropdown-menu, .btn-default, or any other class the header, navbar, or drawer uses.

Add Bootstrap 3.3.7 togglable tabs (the markup from the Bootstrap docs' js/tabs example) with the tabs [Overview, Requests, Settings]. Use ul.nav.nav-tabs.app-tabs with role="tablist", role="tab" on each link, and a matching div.tab-pane role="tabpanel" with aria-labelledby. Keep aria-expanded="true" on the first tab. Switching comes from data-toggle="tab", so don't write tab JavaScript. Leave out the dropdown-inside-a-tab variant.

Inside the canvas, make a two-column app layout: a .row with a .col-sm-3 side menu and a .col-sm-9 content area. The side menu is a <nav aria-label="[App name]"> wrapping div.list-group.app-sidemenu with a span.list-group-item.app-sidemenu-heading, then one a.list-group-item per section: [Inbox (count), Assigned to me (count), Waiting, Closed, Settings]. Mark the current item with aria-current="page", not .active. Show counts with span.badge. Include the side-menu and badge blocks from css/app-patterns.css. This is an in-app menu. Don't change article.main-content-nav.

Add a view switcher: div.btn-group.app-segmented with data-toggle="buttons", role="group", and aria-label="View". Put one label.btn with a radio input (shared name, autocomplete="off") for each option: [List, Grid, Calendar]. Pre-check the first and give its label .active. Each label gets a Glyphicon (aria-hidden) plus visible text. Include the segmented block from css/app-patterns.css. Listen for the radio change event in js/[app].js to switch the view.

Above the [requests table], add an item bar: div.btn-toolbar.app-toolbar with role="toolbar" and aria-label="[Request actions]". Contents, in order:
1. span.app-toolbar-count showing "[n] selected". Update it from js/[app].js and announce changes in an aria-live region.
2. A .btn-group of button.btn.app-tool: [Approve, Archive, Delete]. Icon-only buttons get aria-label.
3. A "More" dropdown (btn-group + dropdown-toggle + ul.dropdown-menu, following kitchen-sink/button_dropdowns.html) with [Export as CSV, Assign to…, Mark all as read].
4. A right-aligned form.app-toolbar-search with role="search": an .sr-only label, an input-group with input.app-search-input, and an icon submit button.
Include the toolbar block from css/app-patterns.css. Glyphicons only. This search filters the app, not the site. Leave the chrome search forms alone.

Add a "[New request]" dropdown button using the single-button dropdown from kitchen-sink/button_dropdowns.html, with btn-primary (not btn-success or others). Add aria-haspopup="true" and aria-expanded="false" to the toggle. Menu items: [..], then a li.divider with role="separator", then [..]. Don't add CSS for .dropdown-menu — the Decorator already styles it.

Render [requests] as a linked list group: div.list-group.app-list with one a.list-group-item per item, each holding h4.list-group-item-heading "[id · title]", p.list-group-item-text "[unit · date · status]", and an optional span.badge for unread counts. State status in words — don't use list-group-item-success/-info/-warning/-danger. Include the list and badge blocks from css/app-patterns.css. Escape all data before inserting it.

Show the [comment thread] as a Bootstrap 3 media list (the markup from the Bootstrap docs' media example): ul.media-list with one li.media.app-media per entry, containing .media-left > img.media-object.img-circle (64 × 64, alt="" because the name is next to it) and .media-body with h4.media-heading [name], p.app-media-meta [role · time], and the text. Include the media block from css/app-patterns.css. Escape user text before rendering it.

Add pagination under the [list] following kitchen-sink/pagination.html: nav aria-label="[Request pages]" > ul.pagination.app-pagination. Mark the current page with aria-current="page" on its link, not li.active. The previous/next links get aria-label ("Previous page", "Next page") with aria-hidden arrows. Include the pagination block from css/app-patterns.css.

Add a confirmation dialog using the Bootstrap 3.3.7 modal markup from the Bootstrap docs' js/modal example: div.modal.fade.app-modal with tabindex="-1", role="dialog", and aria-labelledby pointing at the h4.modal-title id. The close button gets aria-label="Close". Footer buttons: btn-default "[Cancel]" (data-dismiss="modal") and btn-primary "[Close request]". Open it from a button with data-toggle="modal" data-target="#[id]". Put the modal markup at the end of main#main-content, not in the chrome. Wire the confirm action in js/[app].js. Include the modal block from css/app-patterns.css.

For the expandable [details] section, use the Decorator drawer (.drawer-wrapper > .drawer with h2 > a / div pairs, from templates/modules.html), not a Bootstrap panel-group accordion.

On phones (xs), hide the [toolbar's text labels] with .hidden-xs and keep the icons. Every icon-only button needs an aria-label. Use Bootstrap 3 responsive utilities (visible-*-block/-inline/-inline-block, hidden-*). Don't write media queries for what these classes already do.

Prefer Bootstrap 3.3.7 helper classes (sr-only, text-center, pull-*, clearfix, list-inline, img-circle, embed-responsive, visible-*/hidden-*) over new CSS. Don't use any -success/-info/-warning/-danger class, .label-*, .progress-bar, or title-attribute tooltips. Replace tooltips with a visible .help-block.

Add a row of [3] key numbers: .col-sm-4 columns, each a div.styled.app-stat with span.app-stat-value, span.app-stat-label, and span.app-trend. The trend is a Glyphicon arrow (aria-hidden) plus words: "Up 6% from August", "Down 20 min (better)", or "No change". Never show a trend by color alone. Include the KPI block from css/app-patterns.css.

Show [occupancy by college] as data bars: a div.app-panel with p.app-panel-title, then ul.app-bars labelled by that title. Each li holds span.app-bar-label, span.app-bar-track (aria-hidden="true") containing span.app-bar-fill with the nearest 5% width class (app-w-0 … app-w-100), and span.app-bar-value with the exact number. Use .app-bar-attn to highlight a row, but say why in text too. No inline style widths — set the class from JS.

List [services] as ul.list-group.app-status-list. Each li.list-group-item has span.app-status-name, a span.app-status with data-status set to ok, warn, down, or info (a Glyphicon plus the words "Operational", "Degraded", "Outage", or "Maintenance [when]"), and an optional span.app-muted detail line. Don't use label-*, list-group-item-success/-warning/-danger, or any other Bootstrap contextual class.

Show upcoming [deadlines] as ol.app-timeline in date order. Each li has span.app-timeline-date (a <time datetime> plus "· [time remaining]"), span.app-timeline-title, and span.app-muted context. Items due within [7] days get data-urgent and an .sr-only "(urgent)". Compute the time remaining in js/[app].js from the datetime values.

Show [onboarding] progress in a div.app-panel: p.app-panel-title "[person, role]", a one-row ul.app-bars "[n] of [total] done", then ul.app-checklist. Done items get data-done, a glyphicon-check, and an .sr-only "(done)". Open items get glyphicon-unchecked and "(to do)". If people check steps off on this screen, use real labeled checkboxes instead.

Add a filter bar at the top of the dashboard: form.app-filterbar with aria-label="Dashboard filters". Each control is a .form-group with a visible label and a .form-control.app-filter-control: [Term select, College select, From date, To date], then a btn-primary "Apply". Keep the filters in the URL query string so views can be bookmarked, but never put personal data in it. Update the page from js/[app].js and announce "Showing [scope]" in an aria-live region.

Create [requests.html] from blank-slate.html for a [request manager] app. Add it to the drawer and the navbar. Link css/app-patterns.css (copied from the Decorator Kit Developer Guide) in the site-specific CSS block.
Canvas, inside div.app-shell:
1. Item bar (div.btn-toolbar.app-toolbar, role="toolbar"): [New], bulk [Archive, Refresh] icon buttons with aria-labels, and a right-aligned in-app search form.
2. A .row: a .col-sm-3 side menu (nav > .list-group.app-sidemenu with [Inbox, Assigned to me, Closed] and badge counts, current item marked aria-current="page") and a .col-sm-9 work area.
3. In the work area: Bootstrap tabs (ul.nav.nav-tabs.app-tabs, role="tablist") for [Open, Due soon]. Each tab panel holds a .list-group.app-list of requests and a nav > ul.pagination.app-pagination.
4. A "Close request" modal (.modal.fade.app-modal) at the end of the canvas.
Load the data from [requests.json] in js/requests.js and escape every value. Use Bootstrap 3.3.7 data-api behaviors (tab, dropdown, modal, buttons) — no other JS framework. No -success/-info/-warning/-danger classes. Status is always written in words.

Create [dashboard.html] from blank-slate.html for the [Facilities] dashboard. Add it to the drawer and the navbar. Link css/app-patterns.css.
Canvas, inside div.app-shell:
1. div.app-view-head with h4.app-view-title "[Facilities Dashboard]", an "Updated [time]" span.app-muted, and an icon refresh button (aria-label="Refresh dashboard").
2. A .row of four .col-xs-6.col-md-3 stat boxes, each a div.styled.app-stat with span.app-stat-value and span.app-stat-label: [Open requests, Due today, Overdue, Avg. time to close].
3. A .msg.alert only when overdue > 0, with a link to the overdue list.
4. A .row: .col-md-7 with a table.styled-dark.app-table "Due today" (caption, th scope="col", tr.even on alternate rows) and .col-md-5 with a ul.media-list of recent activity (li.media.app-media, avatar alt="").
Load data from [dashboard.json] in js/dashboard.js, escape every value, and announce refreshes in an aria-live region. Status is words, never color alone. No -success/-info/-warning/-danger classes, no progress bars.

Create [rooms.html] from blank-slate.html for a [room inventory] admin tool. Add it to the drawer and the navbar. Link css/app-patterns.css.
Canvas, inside div.app-shell:
1. div.app-view-head: h4.app-view-title "[Room Inventory]" and a btn-primary "Add" dropdown (dropdown-menu-right) with [Single room, Import from CSV].
2. Item bar (div.btn-toolbar.app-toolbar, role="toolbar"): span.app-toolbar-count "[n] selected", bulk [Edit, Export] app-tool buttons, a .btn-group.app-segmented radio filter [All, Available], and a right-aligned in-app search form.
3. table.styled-dark.app-table in .table-responsive: a first column of checkboxes, each with its own .sr-only label ("Select [room]"), and a "Select all" checkbox in the header. Columns: [Room, Building, Seats, Status]. Status in words. tr.even on alternate rows.
4. div.app-view-head with "Showing x–y of n" and nav > ul.pagination.app-pagination (aria-current="page").
In js/rooms.js: keep the selection count and "Select all" in sync, announce changes in an aria-live region, and escape every value. If sorting or search across more than ~200 rows is needed, use the DataTables widget (widgets/datatables.html) for the table instead.

Create [settings.html] from [two-column.html] for the app's settings. Add "Settings" to the drawer, the navbar, and the side nav. Link css/app-patterns.css.
Canvas, inside div.app-shell, as a .row:
1. .col-sm-3: nav aria-label="Settings sections" > .list-group.app-sidemenu with a heading and [Profile, Notifications, Accessibility, Connected apps]. The current section gets aria-current="page".
2. .col-sm-9: h4.app-view-title for the section, then a form. Group related fields in fieldset.app-facet with a legend: checkboxes for on/off options, a .btn-group.app-segmented radio group for single choices, and .form-group/.form-control inputs with labels and autocomplete. Help text goes in .help-block, linked with aria-describedby.
3. div.app-savebar at the end: btn-default "Cancel" (reset) and btn-primary "Save changes".
After a successful save, show a .msg.info "Saved" above the form and move focus to it. Show validation errors above the form in a .msg.alert. Submit logic goes in js/settings.js, with a CSRF token.

Create [apply.html] from blank-slate.html for a [4]-step [funding application]. Link css/app-patterns.css.
Canvas, inside div.app-shell:
1. h4.app-view-title "[Research Funding Application]".
2. ol.app-steps with aria-label="Application progress" and one li per step: [Applicant, Project, Budget, Review]. The current step gets aria-current="step". Completed steps get data-state="done" plus an .sr-only "(completed)".
3. One fieldset.app-facet per step, with legend "Step n of 4: [name]" and Bootstrap 3 form fields (labels, autocomplete, help-block linked via aria-describedby). Show only the current step's fieldset.
4. div.app-savebar with btn-default "Back", btn-default "Save draft", and btn-primary "Continue" ("Submit" on the last step).
In js/apply.js: validate each step before advancing, show errors above the form in a .msg.alert, move focus to the new step's legend, and update aria-current. Save drafts to [endpoint] with a CSRF token. If the steps need branching or per-step validation UI, use the Wizard widget (widgets/wizard.html) instead.

Create [request-detail.html] from two-column.html as the detail view for one [request]. Set the breadcrumb to Home › [Requests] › [RQ-id], resolved from this page's folder. Link css/app-patterns.css.
Canvas, inside div.app-shell:
1. div.app-view-head: h4.app-view-title "[id · title]", a span.app-muted line with the status in words plus who opened it and when, and a btn-primary "Actions" dropdown (dropdown-menu-right) with [Reassign…, Change due date…, divider, Close request…]. "Close request…" opens a .modal.fade.app-modal confirmation.
2. Bootstrap tabs (ul.nav.nav-tabs.app-tabs, role="tablist"):
   - Details: dl.dl-horizontal.app-details with [Location, Category, Assigned to, Due].
   - Activity (with a count badge): ul.media-list of comments (li.media.app-media), then a comment form with a labeled textarea and a btn-default "Post comment".
   - Files: .list-group.app-list of attachments with a Glyphicon and size.
Load the record from [api/requests/:id] in js/request-detail.js. Escape all user text, and send comments with a CSRF token.

Create [courses.html] from blank-slate.html for [course] search. Add it to the drawer and the navbar. Link css/app-patterns.css.
Canvas, inside div.app-shell:
1. An in-app search form (role="search"): a visible label, then .input-group.input-group-lg with input.form-control.app-search-input and a btn-primary "Search". Leave the chrome search forms alone.
2. A .row: .col-sm-3 holds the filter facets — a form aria-label="Filter results" with one fieldset.app-facet per facet [Level, Quarter], each a legend plus labeled checkboxes showing counts. The .col-sm-9 holds the results.
3. Results header (div.app-view-head): a role="status" line "[n] results for “[query]”" and an app-tool "Sort" dropdown (dropdown-menu-right) with [Relevance, Course number, Seats available].
4. .list-group.app-list results (h5.list-group-item-heading + p.list-group-item-text), then nav > ul.pagination.app-pagination.
5. With zero results, replace the list with div.app-empty: a Glyphicon (aria-hidden) and a suggestion.
In js/courses.js: update results when filters change without a page reload, keep the query and filters in the URL, and escape every value.

Build an advisor caseload dashboard for [college] advisors in [advising.html], from blank-slate.html, with css/app-patterns.css. Canvas, inside div.app-shell:
1. h4.app-view-title "Advisor Caseload · [College]".
2. form.app-filterbar: Term and College selects, Apply.
3. Four div.styled.app-stat key numbers: Students assigned, Appointments today, Registration holds (with an .app-trend), New early alerts.
4. A .row: .col-md-7 has a table.styled-dark.app-table "Today's appointments" (Time, Student, Reason; each student name links to a detail view). .col-md-5 has a div.app-panel "Early alerts" with ul.app-status-list (status in words).
FERPA data: require campus SSO, and return only students assigned to the signed-in advisor, checked server-side on every request. No student IDs or names in URLs, logs, or browser storage. Show preferred names. Log access to student records for audit. Data comes from [endpoint], loaded in js/advising.js.

Build a course enrollment dashboard for the [department] in [enrollment.html], from two-column.html, with css/app-patterns.css. Add it to the drawer, the navbar, and the side nav. Canvas, inside div.app-shell:
1. div.app-view-head: h4.app-view-title "Enrollment · [Department]" and a .btn-group.app-segmented quarter switcher [Fall, Winter, Spring].
2. A .row: .col-md-6 has a div.app-panel "Seats filled" with ul.app-bars per course (a full course gets .app-bar-attn, and the value text says "100% (full)"). .col-md-6 has a table.styled-dark.app-table "Largest waitlists" (Course, Waitlist, Cap), sorted by waitlist, then an .app-savebar with an "Export CSV" button.
Aggregate data only, with no student-level rows. Load it from [endpoint] per quarter in js/enrollment.js, and announce quarter changes in an aria-live region.

Build a research administration dashboard for [department] in [research.html], from blank-slate.html, with css/app-patterns.css. Canvas, inside div.app-shell:
1. h4.app-view-title "Research Administration · [Department]".
2. A .row: .col-md-6 has a div.app-panel "Proposal pipeline" with ul.app-bars per stage [Drafting, Dept. review, At OCGA, Submitted] showing counts. .col-md-6 has a div.app-panel "Next 30 days" with ol.app-timeline of sponsor deadlines (data-urgent within 7 days).
3. Bootstrap tabs (.app-tabs): "Active awards" and "Ending in 90 days" (with a count badge). Each is a table.styled-dark.app-table (Award, Sponsor, Spent %, Ends). Explain over- or under-spending in words.
Budget data is confidential: SSO, show only awards where the user is PI or a department admin (checked server-side), no amounts in URLs or logs. Data from [endpoint], in js/research.js.

Build a residence operations dashboard in [housing.html], from blank-slate.html, with css/app-patterns.css. Canvas, inside div.app-shell:
1. h4.app-view-title "Residence Operations · [event]".
2. Three .col-sm-4 div.styled.app-stat: Beds filled (with an .app-trend), Open work orders, Move-in tasks done ("4 of 6").
3. A .row: .col-md-7 has a div.app-panel "Occupancy by college" with ul.app-bars for [Revelle … Eighth] (explain the highlighted row in its value text). .col-md-5 has a div.app-panel "Dining locations" with ul.app-status-list (Open / Long line / Closed).
Refresh every [5] minutes in js/housing.js and announce "Updated [time]" in an aria-live region, without moving focus. Aggregate data only — no resident names on this screen.

Build a campus service status board in [status.html], from blank-slate.html, with css/app-patterns.css, following the working example in the Decorator Kit Developer Guide (js/status-board.js). Canvas, inside div#its-board.app-shell:
1. div.app-view-head: h4.app-view-title "Campus Service Status" and an "Updated [time]" span.app-muted.
2. Three .col-xs-4 div.styled.app-stat counts: Operational, Degraded, Outage.
3. div.btn-toolbar.app-toolbar: a .btn-group.app-segmented radio filter [All, Needs attention], a span.app-live-count with role="status", and a right-aligned search form (.sr-only label).
4. ul.app-status-list with one li per service, carrying data-service and data-status, a status badge, and an optional detail line. Then a hidden div.app-empty.
Render the full list in HTML so it works without JavaScript. In js/status-board.js, filter by toggling Bootstrap's .hidden class. Listen for filter changes with jQuery ($(board).on('change', ...)), because button.js fires them through jQuery. Search on input. Update the count text on every change. Load statuses from [status feed] on an interval.

Build an energy and work-order dashboard in [energy.html], from blank-slate.html, with css/app-patterns.css. Canvas, inside div.app-shell:
1. h4.app-view-title "Energy & Work Orders · [period]" and a form.app-filterbar with From/To dates.
2. Three .col-sm-4 div.styled.app-stat with .app-trend compared to last year: GWh used, % from on-site generation, Open work orders.
3. A div.app-panel "Energy use against monthly target" with ul.app-bars for the top [10] buildings. Cap the bar at app-w-100 and say "[n]% (over)" in the value text when a building is over target.
4. Bootstrap tabs (.app-tabs) for work orders by priority [Emergency, Urgent, Routine]. Each is a table.styled-dark.app-table.
If a real chart is needed, add a charting library under canvas-components/ with its README, and keep the data table as the accessible alternative. Data from [endpoint], in js/energy.js.

Build a study room availability page in [rooms.html], from blank-slate.html, with css/app-patterns.css. Canvas, inside div.app-shell:
1. div.app-view-head: h4.app-view-title "[Building] Study Rooms" and a .btn-group.app-segmented floor switcher.
2. A .row: .col-md-7 has ul.app-tiles with one li per room — the room name, a span.app-status in words ("Available", "In use until 3 p.m.", "Reserved at 2 p.m."), and for available rooms a "Book" link with .sr-only room context. .col-md-5 has a div.app-panel "Usually busy" with ul.app-bars by hour.
Students are anonymous on this page — show no booker names. "Book" goes to [booking system] and needs SSO there. Refresh statuses every [2] minutes in js/rooms.js and announce changes politely.

Build a new-hire onboarding tracker in [onboarding.html], from two-column.html, with css/app-patterns.css. Add it to the drawer, the navbar, and the side nav. Canvas, inside div.app-shell, as a .row:
1. .col-sm-3: nav aria-label="New hires" > .list-group.app-sidemenu with a heading "Starting soon" and one link per hire with a "[done]/[total]" badge. The selected hire gets aria-current="page".
2. .col-sm-9: a div.app-panel titled "[name] · [title] · starts [date]", a one-row ul.app-bars "[n] of [total] done", and ul.app-checklist (data-done plus .sr-only "(done)" / "(to do)").
3. Below it, a div.app-panel "Start dates" with ol.app-timeline (data-urgent for starts within 7 days where tasks are still open).
Personnel data: SSO, show only hires in the user's department (checked server-side), no names or employee IDs in URLs, and audit-log every view. Data from [endpoint], in js/onboarding.js.