Alert card implementation

[dhornbein]

Alert cards display system wide alert messages.

Notes

• The icon changes based on the status of the alert. This is achieved (ideally) by a class in header.status-bar indicated by {{status}} in the HTML below. This class should be a lowercase string with no spaces. I assume it can be generated based on the status variable.

Data

• Icon (active, testing, complete)
• Status (active, testing, complete)
• Title
• Meta Data
  • Date posted
  • Time posted
  • User (department?) who posted
• Location: {{City}}, {{State Abbreviation}}; {{lat}}, {{long}}
• Description

HTML Structure

<aside class="card-alert">
  <header class="status-bar {{status}}">
    <ul class="status-bar-left">
      <li class="item icon"></li>
      <li class="item secondary status">{{status}}</li>
    </ul>
    <ul class="controls">
      <li class="item bookmark"><a href="#"><i class="fa-bookmark fa"></i></a></li>
    </ul>
  </header>
  <div class="body">
    <h1 class="title">Alert Title</h1>
    <p>
      <span class="meta">{{posted_date}} @ {{posted_time}} by {{posted_user}}</span>
      <br>
      <span class="meta-location">{{City}}, {{State Abbreviation}}; {{lat}}, {{long}}</span>
    </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>

[flavour]

For bookmarks, what I had before had 2 different Icons depending on the current state of the Bookmark, and also included a tooltip...are these enhancements not seen as useful?

[flavour]

I presume if the user isn't logged-in then we shouldn't show the bookmark icon at all? Or should this show but then trigger a request to login?

[flavour]

Note that using the same variable for both a visible string & a class prevents the site being translated into other languages. This isn't an issue for WACOP, as I understand that this is only meant to be used in English...however if we hope to reuse some of this for SAFIRE, as per my understanding, then we should avoid putting up such barriers.

[flavour]

The images don't have dates or times in so I don't know how these are supposed to be formatted

[dhornbein]

re: Bookmarks, yes keep that functionality. I'll await Katie/Devin's response on if it should display to non-logged in users.

Note that using the same variable for both a visible string & a class prevents the site being translated into other languages.

Very good point. My intention is to use a special class in the header.status-bar or the aside.card-alert to change the icon (and any other styling) based on that class name. This could be accomplished with the status number: status-{{=status_num}}

What would you suggest the best solution is?

Date / time format: mmm dd, yyyy @ hh:mm by name@example.com OCT 23, 2017 @ 12:23 by user@example.com

att: @flavour

[flavour]

status_num would work, but I prefer more semantic terms so the English version of the status would be fine...just be clear that this needs to be a different variable

[flavour]

For Date/Time formatting, I see the Events have these, so I assume we should use the same formatting?

• ah yes, I see you answred that, yes, the same.

[dhornbein]

status_num would work, but I prefer more semantic terms so the English version of the status would be fine...just be clear that this needs to be a different variable

Yes me too. I'll just need to know what the output will be to create css to style the card correctly.

[devinbalkind]

Hi I got a little lost on this thread. Are there any questions for me that I need to answer?

[flavour]

@devinbalkind: Nothing you need to engage with here currently, no :)