Create an alert bar for time-sensitive Event-related alerts

[cjyabraham]

We want a block that is similar to the pink bar at the top of cncf.io. The admin can set a date when the block will no longer display. We would typically use this directly below the Event hero image to make time-sensitive announcements like about the coronavirus.

[cjyabraham]

@meganelizabethphillips @dankohn do we want the same bar to appear on every page of an Event above the topnav, every page of the whole Events site, or just the homepage for an Event below the main hero?

[dankohn]

I don’t have an opinion.

[meganelizabethphillips]

@cjyabraham I think just the homepage is perfect :)

[cjyabraham]

@andycochran can you mockup how an alert bar could look below the hero image on an Event homepage?

@deigolocco can you create a Gutenberg container block for this with the following attributes:

• background color
• text color
• expiry date (after which the block no longer displays on the front-end)

[fuerzastudio]

@cjyabraham the block is done. The plugin's name is "LF | Headline" The css was moved to the theme. PR: https://github.com/LF-Engineering/lfevents/pull/494 Sample: https://pr-494-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[meganelizabethphillips]

Can we have this go the full width of the screen?

On Fri, Feb 21, 2020 at 8:05 AM Fuerza Studio notifications@github.com wrote:

@cjyabraham https://github.com/cjyabraham the block is done. The plugin's name is "LF | Headline" The css was moved to the theme. [image: screenshot_20200221-084549] https://user-images.githubusercontent.com/52936031/75036850-911fe880-5491-11ea-8eb8-fd0c713ceea6.png PR: #494 https://github.com/LF-Engineering/lfevents/pull/494 Sample: https://pr-494-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/477?email_source=notifications&email_token=ALM44SXVKR6WVMU5N65MUXDRD7GP3A5CNFSM4KTSNDB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMSUH5A#issuecomment-589644788, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SVFHR3RYEO6KY27AYLRD7GP3ANCNFSM4KTSNDBQ .

-- Megan Phillips, PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

---

Upcoming Out of Office Limited Hours: February 19 & February 25 (limited email access)

[cjyabraham]

Yes, can we have it go full-width and stay flush with the block above it (so that there's no space)? @meganelizabethphillips is there an example of a site with one of these that you like?

I'm not sure "Headline" is the right name for this block... how about "Alert" or "Attention Bar"? @meganelizabethphillips any other ideas?

@andycochran any thoughts?

[meganelizabethphillips]

That’s perfect Chris! Flush with the block above. For the name, let’s go with Alert or Scheduled Alert bar.

Thank you!!

On Fri, Feb 21, 2020 at 11:01 AM Chris Abraham notifications@github.com wrote:

Yes, can we have it go full-width and stay flush with the block above it (so that there's no space)? @meganelizabethphillips https://github.com/meganelizabethphillips is there an example of a site with one of these that you like?

I'm not sure "Headline" is the right name for this block... how about "Alert" or "Attention Bar"? @meganelizabethphillips https://github.com/meganelizabethphillips any other ideas?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/477?email_source=notifications&email_token=ALM44SQKH67Y6VCVVQY7YGLRD73GLA5CNFSM4KTSNDB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMTF2KA#issuecomment-589716776, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SRAUKNGTA3XGSJHGZLRD73GLANCNFSM4KTSNDBQ .

-- Megan Phillips, PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

---

Upcoming Out of Office Limited Hours: February 19 & February 25 (limited email access)

[fuerzastudio]

plugin renamed for "LF | Alert"

[cjyabraham]

@fuerzastudio, I've made a commit so that the naming is consistent with our other blocks.

Could you make the alert block flush with adjacent blocks and full-width, as mentioned above?

[andycochran]

Adding the .alignfull class to the block will make it flush with the previous block. There's a style that adds negative top margin to .alignfull + .alignfull in order to remove the space between them.

[cjyabraham]

@fuerzastudio can you implement @andycochran's suggestion?

[fuerzastudio]

sure @cjyabraham

[fuerzastudio]

@cjyabraham and @andycochran is done.

PR: #494 Sample: https://pr-494-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/

[cjyabraham]

Thanks. Deployed.

[meganelizabethphillips]

@cjyabraham After playing around with this a bit and getting feedback from Kristin, we have a few requests on this one:

• We currently can't control the font size here - can we add that in please? The standard font looks a little weak in here.

• Most (not all, but most) of these will have links out to another area of the site. When I hyperlinked it, it overrode the font color settings. I used the "highlight" feature to change it to white but it didn't change the underline color. What can we do so that it looks more like the hyperlinks in the cncf.io alert bar?

• Would it be possible to add a button inside the alert bar? This would eliminate the hyperlink issue mentioned above. Screenshot attached.

• Would it be possible to have the option to toggle on an icon that is something like >> with a circle around it that implies they are being taken somewhere else? It could have a default position of the end of the text. This would not be necessary if we have the button.

[cjyabraham]

@meganelizabethphillips to your points:

1. As for font-size, we can add a dropdown for that
2. I can't reproduce the issue with link colors. When I link a word, that word stays the same color as the rest of the text (on the front-end) but just has an underline added. Note that in the editor it does change color but on the front-end the color remains the same.
3. I'm not sure I like the idea of a button in such a small space but would like @andycochran's opinion
4. Would like @andycochran's suggestion here as well.

[meganelizabethphillips]

@cjyabraham Thanks for taking another look at this.

1. Drop down would be perfect.
2. DUH! I was thinking how it looked on the backend is how it looked on the front end. Thanks for pointing that out.
3. Yes would like @andycochran 's opinion on the button or icon option.

[andycochran]

I'm not sure a button is necessary. Bolding the text could give it more visual weight if that's what you're after. If we do need to be able to add buttons in this block, I'd suggest reengineering it quite significantly so that it's just a container block in which you can put any content.

For the icon, this is tricky. We could dynamically add the external link icon to links in this block. That could be turned on/off with a checkbox. If checked, we could filter the content to insert the icon. However, that would apply to all links within the block, not particular ones. Would there ever be a case where you'd need two links, one external and one internal? (This idea feels a bit over-engineered. It might be worth exploring a way to add inline icons to any text in the admin.)

[cjyabraham]

For the icon, I don't think @meganelizabethphillips had an external link icon in mind but rather some kind of icon that catches your eye, almost like a button. Maybe something like this?

[meganelizabethphillips]

@cjyabraham that is correct, something like >>

[andycochran]

We could always use an HTML character

➲

➲

➮

➮

➜

➜

➔

➔

[cjyabraham]

A few other options to consider:

• the fast-forward icon in the same color as the text:
• something like this:

[cjyabraham]

or how about this duotoned one:

or this one:

[andycochran]

I was suggesting an html character so that this didn't have to be inserted programmatically, but instead manually. Seems wrong to engineer this.

[cjyabraham]

@meganelizabethphillips I was talking with @thetwopct about this and he suggested just having an icon to the left of the alert bar text, similar to how we have an icon here:

We could pick one like these:

Any thoughts?

[meganelizabethphillips]

@cjyabraham I think the past event bar and alert bar serve two different purposes. The icons suggested above indicate there is something to look at but don't say we are taking you off this page. I've added a few suggestions here that Kristin and I like.

[cjyabraham]

@meganelizabethphillips ok. There are several options for that in our fontawesome library:

Would you want the >> symbol to be clickable? If so, I assume we'd want to set the link url independently of any links in the alert text in case there are, say, more than one or none? Would you always want this symbol or only sometimes?

[meganelizabethphillips]

@cjyabraham oh perfect! I think the second one will work nicely. What is your suggestion on the clickability of it? I can' think of a time where we would have more than one link in the bar, but we haven't fully decided how we will leverage this tool. Not sure which way to go there.

We would like the ability to toggle it on and off please!

[cjyabraham]

I think we should work on a clear set of use-cases that we want to address with this alert bar. Once we have those, it'll be more obvious what set of features we should build. I propose we discuss this on our next call.

[meganelizabethphillips]

@cjyabraham Alright, Kristin and I chatted on this and here is where we landed!

These will be primarily used for registration promotions, keynote speaker announcements, speaker announcements, etc.

We do not see a need to have the icon linked. We think linking just the text is perfect.

We do not anticipate using more than one link in the bar.

Additional note from Kristin: I think the best example to give on that is CNCF.io. I like how it stays on top of the page as you scroll. Would it be possible to have this be at the top of the page and stick instead of below the hero image?

Thank you!

[cjyabraham]

@meganelizabethphillips do you want it above the topnav or between the topnav and hero?

[meganelizabethphillips]

I think she wants it above the menu like it is on the cncf example.

Megan Phillips, PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

---

Upcoming Out of Office OOO: April 20 - 27 (no access to email/phone)

On Wed, Apr 1, 2020 at 2:12 AM Chris Abraham notifications@github.com wrote:

@meganelizabethphillips https://github.com/meganelizabethphillips do you want it above the topnav or between the topnav and hero https://sandbox-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-north-america/ ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/477#issuecomment-607101361, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SXXUD2ZVQIFE6V4YD3RKLZNPANCNFSM4KTSNDBQ .

[cjyabraham]

Ok. So I assume you'll want it to show on top of the topnav on every page of the Event?

[cjyabraham]

How does this look?

[cjyabraham]

@meganelizabethphillips one other question, do you want it to stick at the top when you scroll as it is now or disappear on scroll as we have on our new cncf rebuild site?

[meganelizabethphillips]

Hi @cjyabraham! Just talked through this with Kristin. We like it at the top of each page. It looks like I don't have access to the cncf rebuild site, unless there is a log-in I should use somewhere?

[cjyabraham]

You shouldn't need a login. Can you try it again?

[meganelizabethphillips]

This is what I see

Megan Phillips, PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

---

Upcoming Out of Office OOO: April 20 - 27 (no access to email/phone)

On Fri, Apr 3, 2020 at 7:48 PM Chris Abraham notifications@github.com wrote:

You shouldn't need a login. Can you try it again https://dev-cncfci.pantheonsite.io/?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/477#issuecomment-608953075, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SVL7JW4XQEBCEBQX5TRK2GYFANCNFSM4KTSNDBQ .

[cjyabraham]

If you hit refresh a couple times it should work. It's a dev instance so may need waking up.

In any case, there are two options: 1) Have the alert bar stick at the top as you scroll down the page as it is here now 2) Have it scroll out of view as you scroll down the page so you're left with just the topnav stuck to the top of the browser. When you scroll back to the top of the page the alert bar will come back into view.

Option (1) will make the alert bar slightly more prominent and harder to miss than (2), however, it will occupy more real-estate. Any preference?

[meganelizabethphillips]

I got the site to wake up - hah! Looks great :) I think we would like to have it stick the whole time rather than disappearing. Thanks so much!

Megan Phillips, PMP Events Web Project Manager The Linux Foundation 1 Letterman Drive Building D, Suite D4700 San Francisco, CA 94129 E: mphillips@linuxfoundation.org

Why Attend Linux Foundation Events https://youtu.be/X_rLxfmLlYY Why Sponsor Linux Foundation Events https://youtu.be/Rr-9cIH42fE

---

Upcoming Out of Office OOO: April 20 - 27 (no access to email/phone)

On Mon, Apr 6, 2020 at 7:33 PM Chris Abraham notifications@github.com wrote:

If you hit refresh a couple times it should work. It's a dev instance so may need waking up.

In any case, there are two options:

1. Have the alert bar stick at the top as you scroll down the page as it is here now https://pr-525-lfeventsci.pantheonsite.io/kubecon-cloudnativecon-europe/
2. Have it scroll out of view as you scroll down the page so you're left with just the topnav stuck to the top of the browser. When you scroll back to the top of the page the alert bar will come back into view.

Option (1) will make the alert bar slightly more prominent and harder to miss than (2), however, it will occupy more real-estate. Any preference?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LF-Engineering/lfevents/issues/477#issuecomment-610123075, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALM44SUETL5T5QMI7ZAPOPDRLJ7GZANCNFSM4KTSNDBQ .

[cjyabraham]

Ok. This has been deployed. You can see an example on the sandbox site of how it looks. To add an alert bar to an event, fill in the relevant fields in the Event settings: