Show banner on archived events that point to this year's event

[cjyabraham]

When an event is moved to an archive url it should have a banner that appears somewhere "above the fold" which says something like "This event has passed. Please visit the current KubeCon + CloudNativeCon event" with a link to the current event.

Before it has been moved to the archive but after the event has passed, the banner could say "This event has passed. Please visit other [Open Source Summit] events." And if there are no upcoming events in the same category, can we just say "Please visit other upcoming Linux Foundation events."

Assigning to Andy for design, html and css on this that will work across various event color palettes. I can implement once we have the design.

[andycochran]

This mockup insert a div with the same background color as the event menu dropdown. It'd be on every event page above all content, but not sticky (it'd scroll with the other content).

Here's how I did it:

<div class="alignfull text-center xlarge-padding-top large-padding-bottom" style="background: #002d6a; color: #ffffff; box-shadow: inset 0 -0.125rem 0 0 rgba(0,0,0,.2);">
    <h4 class="no-margin" style="">
        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon--inline small-margin-right"><path fill="currentColor" d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm257.3 160l48.1-48.1c4.7-4.7 4.7-12.3 0-17l-28.3-28.3c-4.7-4.7-12.3-4.7-17 0L224 306.7l-48.1-48.1c-4.7-4.7-12.3-4.7-17 0l-28.3 28.3c-4.7 4.7-4.7 12.3 0 17l48.1 48.1-48.1 48.1c-4.7 4.7-4.7 12.3 0 17l28.3 28.3c4.7 4.7 12.3 4.7 17 0l48.1-48.1 48.1 48.1c4.7 4.7 12.3 4.7 17 0l28.3-28.3c4.7-4.7 4.7-12.3 0-17L269.3 352z" class=""></path></svg>
        This event has passed. View the upcoming <a class="text-weight-bold" style="color:inherit;text-decoration:underline;">Kubernetes Forum Bengaluru</a>.
    </h4>
</div>

Let's make sure that this language/phrasing sounds good with various event names. @dankohn, do you have ay thoughts on this?

[cjyabraham]

I might suggest prefixing with "Note:" @dankohn and @meganelizabethphillips any thoughts?

[meganelizabethphillips]

I think the phrasing currently @andycochran and @cjyabraham - is it possible to change the calendar icon with an "x" to one with a checkmark? To me, the X feels like it was canceled rather than completed.

[cjyabraham]

Here's an icon that could work.

[cjyabraham]

I've got this working and set up some test data to show the various possibilities:

• Here is an event that has been archived with a new one set up on the canonical url that has not yet passed. In this case we point people to the upcoming event.
• Here is an event that has been archived with a new one set up on the canonical url that has passed. So in this case we point people to upcoming events in the category.
• Here is an event that has been archived and yet a new event hasn't been set up on the canonical url, so we point people to the category.
• Here is an event which has passed, has not yet been archived, and is not assigned to a category.

When linking to events in a category, I have not programmed the check to see whether there are any present in that category. It's a more expensive call and I expect it would only rarely return 0 events, if ever, but let me know if you disagree, @dankohn.

Any feedback before I deploy?

[dankohn]

The banner needs to be a bit taller because the calendar icon is currently covered by the enlarged event logo.

[cjyabraham]

Ok, fixed.

[meganelizabethphillips]

Random question on this - since we are leaving the events up that have been postponed (like KubeCon EU or ServiceMeshCon), if we for some reason don't know the new dates before these dates pass, would there be a way to disable this or change the messaging?

[cjyabraham]

That's an interesting question. I would recommend doing this:

1. change the Event dates temporarily for a year into the future, just so this banner doesn't show
2. go to the the "Advanced" options on the event and select "Hide from Homepage and Calendars" so that it doesn't show there with the wrong dates and mislead anyone
3. as soon as the new dates become available, uncheck the "Hide..." option and set the correct dates

Does that work?

[cjyabraham]

this issue is deployed.