Time Stamp on Notifications

@emermuldoon I agree! It would be great if the time stamp could be removed for the validity period. For example, if a course expires on a specific date, it technically expires on the exact time it was entered in the system or the time the person was enrolled.  In other words, if a course expires on 30Sep at 10:30 am UTC, they could be ‘late’ if they take it on 30Sep at 10:40 am UTC. 

The reports will capture that user as late 😟

Can the system just show the validity date, in that the due date depends on the time zone of the user? 

First of all, I completely agree that this is something that Docebo should allow us to control.

Because I’ve fiddling around with this, and for a while there I even thought I’d worked out some CSS that would mitigate this problem. I’ll share it below because I’m weirdly proud of it, even though it doesn’t really solve anything because Outlook is garbage and simply ignores a lot of CSS.

Maybe it will even be valuable to you, if your users are all using Gmail, for example.

<style>
  .duedate {
    font-weight: bold;
    overflow: hidden;
    overflow-y: hidden;
    max-height: 2.2ex;
    max-width: 12ch;
    display: inline-flex;
  }
</style>

<div>
  <p>Hello [first_name],</p>
  <p>You have been enrolled in the following courses:</p>
  <ul>[items]
    <li><strong>[course_name]</strong>.<br />This course should be completed by <span class="duedate">[expire_at]</span>
    </li>
    [/items]
  </ul>
</div>

What’s going on here? The trick with .duedate { max-width } is finding a width that will safely accommodate the date without being so wide as to leave room for the timestamp afterwards. At first I was specifying this width using the em unit, before I learned of the ch alternative, which is perfect for this use case.

The max-width and display: inline-flex properties have the effect of wrapping the date over two lines (with the space between the date and time serving as a natural break point), while the overflow(-y) and max-height properties are set such that only the first line (i.e. the date) is shown.

Depending on your font-family, it could take you a bit of trial and error to get the right value for .duedate { max-height }. If it’s too low, your date will have be clipped along the bottom. If it’s too high, the top of the second line will be visible. I used the ex unit here because it’s relative to the x-height of the font being used (as opposed to the width). You’ll likely want to pay particular attention to this when testing.