Implement site-wide banner

cjyabraham commented 5 years ago

Make it configurable via the admin so that the text can easily be changed. Mockups attached.

deigolocco commented 5 years ago

the bar is implemented https://fuerza-cncf.pantheonsite.io/ We created an option page to edit the bar, enable and disable it too. Captura de Tela 2019-08-15 às 19 49 44 This option page can be used for more global features if necessary.

deigolocco commented 5 years ago

We used provisionally the textarea field because the wysiwyg editor was presenting a bug. We'll investigate and fix tomorrow, so we can replace.

deigolocco commented 5 years ago

Bug fixed, was conflict with the plugin Cool Timeline Pro. Good to go.

dankohn commented 5 years ago

Your bar has significantly more top and bottom margin than the mockup. Could you also try removing some of the black top and bottom margin from the menubar so that the two together take up the same amount of vertical space as just the menubar today?

Also, as a second step after we deploy this, can you add an x that makes the banner dismissable?

dankohn commented 5 years ago

Also, the link needs to go to https://events.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2019/.

lindsayshaw commented 5 years ago

Hi Diego, 3 things from me:

Confirm the "learn more" is white and turns purple when someone engages with the link?
On mobile (iOS), there is a shaded area when the text breaks to 3 lines, and the link is not clickable in that shaded area.
Also, the link needs to go to https://events.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2019/.

I'd like to track how this link performs (site referral traffic/conversions) in google analytics. We could use the below custom url, or I'm open to suggestions. Maybe @cjyabraham has a better way to do this using Google Tag Manager?

https://events.linuxfoundation.org/events/kubecon-cloudnativecon-north-america-2019/?utm_source=cncf.io&utm_medium=nav&utm_campaign=kccncna19

KimMcMahon commented 5 years ago

@lindsayshaw Link updated to the tracking link.

deigolocco commented 5 years ago

@dankohn the user should be able to close the banner? If yes, would be good to save a cookie for the session to avoid the banner open in other pages, because it's global.

dankohn commented 5 years ago

I opened a new issue for that: https://github.com/cncf/wordpress-site/issues/40

deigolocco commented 5 years ago

@dankohn padding was reduced. The close button will be implemented on Monday, I'll reply on issue #40.

@lindsayshaw 1 - Yes, mobile has the same hover color but on click. We can change if necessary 2 - fixed 3 - Copy and link are editable http://cncf.fuerza/wp-admin/admin.php?page=acf-options

cjyabraham commented 5 years ago

@deigolocco the bar seems to make the drop-down menu too long now. When I open Projects | Incubating Projects, I can no longer scroll to the bottom.

@lindsayshaw I think that custom url will work for tracking clicks from this banner.

deigolocco commented 5 years ago

@cjyabraham menu height adjusted

cjyabraham commented 5 years ago

The menu no longer looks flush with the bottom of the page. Also, the purple follow color is hard to read against the pink background:

deigolocco commented 5 years ago

adjusted @cjyabraham

cjyabraham commented 5 years ago

Thanks Diego. I think it's almost there...

The text size varies depending on the page you're on. Here it's larger than here for example. Could you make it consistent.

deigolocco commented 5 years ago

adjusted @cjyabraham. We have duplications of css causing this inconsistence. I believe would be great we consolidate all common css in a single file.

cjyabraham commented 5 years ago

The presence of the banner removes some whitespace from the top of all page content. It's particularly problematic here as you can see the "Results for" actually touches the top menu when the page loads. Can this be corrected across all pages? Here's another page whose content is particularly close to the menu now.

deigolocco commented 5 years ago

@cjyabraham adjusted

cjyabraham commented 5 years ago

I see you got rid of the close "X"? The banner on mobile view seems to be taller than it needs to be: Screenshot_20190822-132146

In other instances it seems to be too short:

deigolocco commented 5 years ago

adjusted @cjyabraham, we hide the 'x' now, we wanna to aprove the banner first. After banner approved we'll activate the 'x' and respond at issue #40

cjyabraham commented 5 years ago

Mobile banner still seems to take up more vertical real-estate than it needs to but I'm curious what others think: Screenshot_20190824-190923

@lindsayshaw, @dankohn, @KimMcMahon would you like any further tweaks or are we good to launch?

dankohn commented 5 years ago

Let's deploy, please and then try to make it shorter.

cjyabraham commented 5 years ago

@deigolocco can you resolve the merge conflicts by pulling in master to your branch, then I'll deploy.

deigolocco commented 5 years ago

@cjyabraham merge conflicts adjusted. The banner demand height be determined, because of menu's position fixed. Tomorrow morning we'll make it shorter for some devices checking the number of characters and adding a new break point, to verify if will break in 2 or 3 lines.

cjyabraham commented 5 years ago

I've deployed this but the banner content needs setting. @deigolocco where do you set this and can you do it for the live site?

deigolocco commented 5 years ago

@cjyabraham I added the intructions before, you can manage the bar here https://www.cncf.io/wp-admin/admin.php?page=acf-options. We just ajusted the visited color link, could you deploy this please?

deigolocco commented 5 years ago

@dankohn was made the fix to make it shorter

cjyabraham commented 5 years ago

@deigolocco the banner appears to be pushing down the menu to cover titles again: