Event card implementation

[dhornbein]

Event cards display event information in a card view.

Data

• Status (active, complete, testing)
• Title
• Location
• Zero Hour
• Close Time
• n related incidents
• n related resources
• Description

HTML Structure

<aside class="card-event">
  <header class="status-bar highlight">
    <ul class="status-bar-left">
      <li class="item primary status">Active</li>
    </ul>
    <ul class="controls">
      <li class="item bookmark"><i class="fa-bookmark fa"></i></li>
      <li class="item edit"><i class="fa-pencil fa"></i></li>
    </ul>
  </header>
  <div class="body">
    <h1 class="title">Event Title</h1>
    <div class="event-date-location">
      <div class="adr">
        <span class="street-address">665 3rd St</span>,
        <div class="extended-address">Suite 207</div>
        <span class="locality">San Francisco</span>,
        <span class="region">CA</span>
        <span class="postal-code">94107</span>
      </div>
      <span class="date-label">Zero hour:</span> <span class="date">Oct 26, 2016 @ 16:04</span>
      <br>
      <span class="date-label">Closed at:</span> <span class="date">Nov 16, 2016 @ 12:33</span>
    </div>
    <p class="meta">36 Incidents 298 Resources</p>
    <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusantium voluptatem, dolore praesentium laudantium ad</p>
  </div>
  <footer class="footer">
    <p><a href="#" class="more">Read More</a></p>
  </footer>
</aside>

Notes

• Address is currently using the address micro format this isn't technically necessary.
• The mock up does not currently indicate that the incident and resource numbers link anywhere.

[flavour]

Edit button should display only if user has permissions to edit or it should display anyway & give a suitable error if the user doesn't have permissions?

[flavour]

Edit button (like Bookmark) should have a tooltip?

[flavour]

Edit should open a Modal or open the Event profile page?

[flavour]

I assume if not closed then we simply don't include that SPAN at all?

[dhornbein]

re: hide "closed at" span, yes if there is no closed date don't display the span

I'll await Devin/Katie's feedback on your other questions.

[fffalcon]

edit button:

• should appear only if user is logged in and has access
• could have a tooltip or—preferably—open a modal. without knowing the full extent of the user interaction, i'd opt to default on modal.
• should have a consistent experience, ie: opening a modal. clicking the name of an event, incident, resource, etc. should open the corresponding page
• it is assumed that clicking edit on a block of content will allow the user to immediately edit the content inside the block

if we need to, we can create a more effective/obvious prompt for users to click on the names of things to go to their pages. it could be a hover state, an icon, a color, or a link next to it.

thoughts?

[flavour]

"it is assumed that clicking edit on a block of content will allow the user to immediately edit the content inside the block" Do we have examples of that in WACOP currently?