A banner to notify users data is out of date

k8hughes commented 5 years ago

Is your feature request related to a problem? Please describe. The DDH is now out of date in several places. We need to let users know we know, so they don't think it is a DI error.

Describe the solution you'd like A banner that is on all pages that says: The Development Data Hub is currently not displaying the most up to date data as it is soon to undergo redevelopment, if you have any data related questions please email info@devinit.org

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Requested Delivery Date: dd/MMM/YYYY Eary next week

k8hughes commented 5 years ago

Slight change to the copy: The Development Data Hub is not currently displaying the most up-to-date data, as it is soon to undergo redevelopment. If you have any data-related questions please email info@devinit.org

edwinmp commented 5 years ago

@k8hughes Will that do?

k8hughes commented 5 years ago

With it all in white it doesn't stand out, is there a way of making it more prominent?

edwinmp commented 5 years ago

Sure ... we could either go for a bigger font-size, or choose a brighter colour that'd stand out... I'm open to suggestions :)

k8hughes commented 5 years ago

For me it is the white on white that is the issue. Can we try giving it a border so it is clear an banner not just part of the page?

k8hughes commented 5 years ago

I just showed Rohini and she suggestion was to try changing the background of the banner to one fo the other very light reds in the brand colours so the background is more visable.

edwinmp commented 5 years ago

samuele-mattiuzzo commented 5 years ago

Yellow is the color you want to go with for such a warning, but it needs to stand out more (more pastel). Red gets too easily confused with the above nav menu
The warning div should be detached from the top menu and possibly not span 100% of the width
Text inside it should be bolder (like the menu items) and slightly bigger

Check out the examples in this page here https://isabelcastillo.com/error-info-messages-css: the warning box is perfect (although in our case text should be centered and bold)

The icons add an extra nice touch to it all, I would use the i icon since we're informing people about something.

Also, a nice x in the top-right corner to hide the banner would be nice, as it is just a fyi temporary piece of information (somebody that stays on the website for 1-2 hours doesn't need reminding every page)

edwinmp commented 5 years ago

Initial one was a warning alert ... maybe its shade of yellow was just too light. Problem is, there's a fondness for DI brand colours that tends to move us away from conventional choices. Yup, will make it closable.

Alright... version 3.0 coming up.

edwinmp commented 5 years ago

@k8hughes http://212.111.41.68:8080/

edwinmp commented 5 years ago

Found some DI brand colours for the DDH in the datahub-cms. That shade of yellow is brand and also adheres to convention.

@samuele-mattiuzzo opted for a full width version. More uniform across multiple pages.

k8hughes commented 5 years ago

This is good as it looks much more like a warning, sorry to have another change, but now the text feels too big. Once we can reduce the text size a bit it should be good.

samuele-mattiuzzo commented 5 years ago

@samuele-mattiuzzo opted for a full width version. More uniform across multiple pages.

I would still suggest to have it adapt when going for mobile (in which case 100% width is fine, but for desktop keep it as a non full width bar)

also, I'd still say to follow the color palette of the link I shared: black text on yellow bg doesn't stand out as a warning enough

edwinmp commented 5 years ago

@samuele-mattiuzzo better? http://212.111.41.68:8080/

samuele-mattiuzzo commented 5 years ago

Yes @edwinmp much better! Maybe work a bit on the weight of the bold font, but looks great!

Also, take a look at the responsive style of the menu (if it's already being worked on or you prefer me to raise this in a separate issue let me know)

Screenshot 2019-06-13 at 11 58 42 am

k8hughes commented 5 years ago

@samuele-mattiuzzo can you be the one to LGTM this when it is ready for release? :awthanks:

samuele-mattiuzzo commented 5 years ago

@edwinmp have you made any other changes on this?

edwinmp commented 5 years ago

@samuele-mattiuzzo fixed the responsive style of the menu. Wasn't a big issues, so didn't bother opening up a new issue for it.

devinit / datahub

A banner to notify users data is out of date #498