iainkirkpatrick commented 4 years ago

Latest design tweaks from @iainkirkpatrick and @bsides44

Let me know if there's anything unclear / I can do and I'll fix on Wednesday NZT 😄

Deployed at https://hrmi-design-tweaks-3-1.firebaseapp.com

tmfrnz commented 4 years ago

A few things that I am noticing

Home

[x] Intro images are stretched horizontally on wide screens - there must be a limit to how far these images can stretch. I had discussed this with @adi-cam that this limit could be at 1440px

Header

[x] Dropdown arrow should be the same size, it appears that only the down arrow has been reduced in the size, but not the up arrow, this also leads to a horizontal jump when opening/closing

[x] Language dropdown width issue

tmfrnz commented 4 years ago

... continuing

Header

[x] Search field without border or background area - could be intentional but a bit funny as inconsistent with other search fields
[x] Download Data button not aligned with other menu items

Home

[x] Our Data section: download link should also go to WordPress site (as the header link) - instead goes to current download data page

Charts

[x] x-axis chart label shown on CPR chart

[x] chart source information now breaking lines instead of continuing horizontally

tmfrnz commented 4 years ago

Mobile

Home

[ ] slider cards very high (minor)

Charts

[x] x-axis chart label too wide for mobile (single metric - works on single country)

[x] vertical gap between summary charts very small (this has been small before but the new summary score position makes this gap even smaller, making it also less clear where it belongs to)

Single country

[x] "Ghost" FAQs heading on about tab

iainkirkpatrick commented 4 years ago

Addressing your points @tmfrnz:

Intro images are stretched horizontally on wide screens - there must be a limit to how far these images can stretch. I had discussed this with @adi-cam that this limit could be at 1440px

I'm reverting this - I can see what was done was mistaken in reading Adina's notes, but I'm not confident of a working solution in the short-term

Download Data button not aligned with other menu items

This looks to me to be the same on the current live site - I'm wavering between seeing it not aligned and then not sure if it's just my eyes playing tricks on me. From a look in the inspector there doesn't appear to be any reason they aren't aligned... something IMO to look at later.

slider cards very high (minor)

I believe this was the solution presented for the text causing different card heights (esp with different languages) - perhaps could use some tweaking later, but for now seems fine?

x-axis chart label too wide for mobile (single metric - works on single country)

I haven't seen any mobile designs for this... IMO there's a few issues with general legibility + clarity of the data on mobile, especially narrow mobile screens. We could remove the label on mobile, but that's probably not really what we want?

All the other points that I haven't quoted I've also now pushed fixes for - should be a single commit for each of them (in order). So for me, the main one is the last quoted point above re x-axis chart labels on mobile - is this a dealbreaker to getting the changes in? Happy to discuss / work on this tonight with you @tmfrnz 🙂

iainkirkpatrick commented 4 years ago

Also just found that the message "FAQs" now appearing in the aside has no translations associated with it - I've removed these for now so it defaults to "FAQs" across all locales.

annemariebrook commented 4 years ago

Thanks very much @iainkirkpatrick and @tmfrnz for identifying and ironing out these issues.

annemariebrook commented 4 years ago

Just a couple of things I noticed:

Download Data button not aligned with other menu items This looks non-aligned to me. But agree that it's not a major and can be addressed later.
On the Safety and Empowerment tabs on the country pages, the "Source" note is very close to the bottom of the charts. If the gap could be increased slightly (to be more like that for Quality of Life), that would be great. But not a major.

tmfrnz commented 4 years ago

for this

x-axis chart label too wide for mobile (single metric - works on single country)

I would suggest to simply remove the worse/better annotation that is overlapping

tmfrnz commented 4 years ago

Addressing your points @tmfrnz:

Intro images are stretched horizontally on wide screens - there must be a limit to how far these images can stretch. I had discussed this with @adi-cam that this limit could be at 1440px

I'm reverting this - I can see what was done was mistaken in reading Adina's notes, but I'm not confident of a working solution in the short-term

Yes this has always been a challenging layout proposition so will have to introduce a limit somewhere where images stop aligning with the screen edge

Download Data button not aligned with other menu items

This looks to me to be the same on the current live site - I'm wavering between seeing it not aligned and then not sure if it's just my eyes playing tricks on me. From a look in the inspector there doesn't appear to be any reason they aren't aligned... something IMO to look at later.

fixed

slider cards very high (minor)

I believe this was the solution presented for the text causing different card heights (esp with different languages) - perhaps could use some tweaking later, but for now seems fine?

Sure

x-axis chart label too wide for mobile (single metric - works on single country)

I haven't seen any mobile designs for this... IMO there's a few issues with general legibility + clarity of the data on mobile, especially narrow mobile screens. We could remove the label on mobile, but that's probably not really what we want?

So actually the issue is the overlap with underlying better/worse labels, so have removed them for mobile. However one could consider removing them altogether as the new axis label kind of conveys the same message

All the other points that I haven't quoted I've also now pushed fixes for - should be a single commit for each of them (in order). So for me, the main one is the last quoted point above re x-axis chart labels on mobile - is this a dealbreaker to getting the changes in? Happy to discuss / work on this tonight with you @tmfrnz 🙂

I think this is good to go now - have a few other little things to address today so can address any (small) potential issues that have not yet been identified

tmfrnz commented 4 years ago

Just a couple of things I noticed:
Download Data button not aligned with other menu items
This looks non-aligned to me. But agree that it's not a major and can be addressed later.

Fixed =)

On the Safety and Empowerment tabs on the country pages, the "Source" note is very close to the bottom of the charts. If the gap could be increased slightly (to be more like that for Quality of Life), that would be great. But not a major.

Might be able to have a look later...

tmfrnz commented 4 years ago

@iainkirkpatrick

Haven't noticed this before

Quite ugly I think, so for now I am changing this to

align key right
show 'symbol' on right also (after all this is where it is shown also
do not wrap source
use common label (replacing hard-coded text labels

https://github.com/HumanRightsMeasurementInitiative/hrmi-dataportal/commit/f8e5ec7750e0e5a3cf4c5b276ff74a443e5337b9

tmfrnz commented 4 years ago

@iainkirkpatrick, some more issues coming up so I will keep documenting here

[x] do not use borderSize, borderColor as attributes (instead use styled-components or style attribute)

react_devtools_backend.js:6 Warning: React does not recognize the borderSize prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bordersize instead. If you accidentally passed it from a parent component, remove it from the DOM element.

react_devtools_backend.js:6 Warning: React does not recognize the borderColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bordercolor instead. If you accidentally passed it from a parent component, remove it from the DOM element.

tmfrnz commented 4 years ago

@iainkirkpatrick, some more issues coming up so I will keep documenting here

[x] do not use borderSize, borderColor as attributes (instead use styled-components or style attribute)

react_devtools_backend.js:6 Warning: React does not recognize the borderSize prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bordersize instead. If you accidentally passed it from a parent component, remove it from the DOM element.

react_devtools_backend.js:6 Warning: React does not recognize the borderColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bordercolor instead. If you accidentally passed it from a parent component, remove it from the DOM element.

resolved: https://github.com/HumanRightsMeasurementInitiative/hrmi-dataportal/commit/1676486fccf4fce265235561f398dfdaa2dcf544

tmfrnz commented 4 years ago

Adding some IE 11 issues here (that I will not be able to address today unfortunately)

logo image stretches vertically

also see https://github.com/HumanRightsMeasurementInitiative/hrmi-dataportal/issues/146

annemariebrook commented 4 years ago

Quite ugly I think, so for now I am changing this to

align key right

show 'symbol' on right also (after all this is where it is shown also

do not wrap source

use common label (replacing hard-coded text labels

Thanks @tmfrnz. Looks good.

HumanRightsMeasurementInitiative / hrmi-dataportal

Design tweaks 3.1 #178

Home

Header

Header

Home

Charts

Mobile

Home

Charts

Single country