Incident Profile

Incident Profile Page:

• Event Parent
  • Based on: .callout (class name of organism it's based on)
  • Class name: .event-parent (class name for element)
  • Elements: (data found in the)
    • title context - static text
    • title - {{parent event title}} (when talking about a variable you could wrap it in double curly brackets)
    • action button - link to event page
    • event meta data
      • {{zero-hour}} (name all dynamic data that is needed)
      • {{closed time}}
      • {{location}}
    • event related links
      • # incidents in event + link
      • # resources in event + link
      • # posts in event + link
    • event label (active)
      • active
      • inactive
      • (list all possible states)
• Incident Profile [.profile] .incident-profile (item name [class name of base molecule] .class-name-of-this-element, this is a single line format of the above. All bullet points are elements within this element)
  • Incident Profile Header [.info-bar] header.incident-header (you can nest child elements using the same format)
    • Incident status title
      • active $green-name (define color names and use those to describe colors, rather than HEX, these can be described on a "general" page)
      • closed (if no color is defined I'll understand that as "use the molecule's default color")
    • flag this
      • icon: fa-flag
      • on-click: (describe interactions, I think you could nest another element under it if it pops up)
    • bookmark this
      • icon: fa-bookmark
      • on-click: add incident to bookmark list
    • share this
      • icon: fa-share
      • on-click:
        • share modal [.modal-share] (leave off custom class name if the element doesn't require any customization)
          • (the share-modal elements should be defined elsewhere)
    • edit incident profile
      • icon: fa-pencil
      • on-click:
        • edit incident modal [.modal-edit] .modal-edit-incident
          • elements of the form
  • incident-profile-summery [.summery] .incident-profile .summery (we'll have to be careful about class names so they don't conflict with foundation and jQuery UI)
    • title - {{incident name}}
    • meta
      • updated on {{update date}} @ {{update time}} by {{last user to update}}
      • tag list
    • incident-profile-summery-location [.panel] .incident-profile .summery .location (note the use of class names, we should be thinking very hard about our naming conventions)
      • {{address 1}} {{address 2}} {{city}}, {{state}} {{zipcode}}
      • icon: fa-pin
      • {{incident lat}}, {{incident lon}}
    • incident-profile-summery-clock [.panel] .incident-profile .summery .clock
      • label: zero hour
      • {{incident datetime}}
      • IF closed: (express logic if at all possible)
      • label: closed at
      • {{incident close datetime}}
  • incident-body [p] .incident-body
    • {{indient description}}
  • incident-resources [.sortable-table-wrapper] .incident-resources
    • title: Resources
    • search box
    • button: fa-plus "add resources"
    • sortable tabel [.sortable-table]
      • columns: group, status
      • tabel pagination
• incident-map [.mapbox] .incident-map
  • onload: match viewport height
• incident related content [.tabs]
  • Tabs: Updates, Directories, Tasks
  • Updates [.tabs-content]
    • update-controls [.panel]
      • button: fa-plus "add update"
      • onclick:
        • edit post modal [.modal-edit] .modal-edit-post
          • input: title
          • input: update
          • input: update type
            • post .post (defining class names for these is useful)
            • alert .alert
            • site rep .srep
          • input: tags [.tagit] (square brackets indicate default element)
          • button: "add update"
  • Filter Updates [.filter-controls]
    • This filter box will automatically sort updates based on input (descriptions of elements should be italicized)
    • search box
    • input (radio) [.inline-radio]: all, my bookmarks
    • input (select): {{type}} (note how I'm indicating a list of items based on a variable)
    • input (select): {{tags}}
    • input (datetime): "start time/date"
      • clear button "x"
    • input (datetime): "end time/date"
      • clear button "x"
    • button: fa-x "clear all"
    • button: "saved filters"
  • Single update [.dl-item]
    • These updates are list-item elements within a ul.dl (dl == data-list)
    • Update post header [.info-bar] .data-list-item-header
      • Update Type Icon [.dl-priority]
        • post: .dl-icon-post
          • D in a green circle
        • alert: .dl-icon-alert
          • I in a yellow box
        • site rep: .dl-icon-rep
          • ! in a red box
      • Title [.title]: {{update type title}}
      • Update Status [.item.borders]: {{update status}}
      • Update Visibility [.item.borders]: {{update visibility}}
      • flag
      • bookmark
      • comment
      • share
    • Update body [.dl-body]
      • meta: {{date}} @ {{time}} by {{author}}
      • comment count "n comment(s)"
      • title: {{update title}}
      • content
      • IF truncated (> n words)
        • Link: "more info" expand update content
      • tags [.tagit]
    • IF subcomment
    • sub comment [.dl-comment]
      • Comments can have nested comments within them going down n levels
      • meta: {{date}} @ {{time}} by {{author}}
      • content
      • IF truncated (> n words)
        • Link: "more info" expand update content

Older Designs

Screenshots of Current System