Styling of dashboard page

[drkane]

see eg: http://insightsbeta.findthatcharity.uk/file/2abb7efe27ddd52037e0644ff1254c4e

Needs thinking about:

• styles for chart titles, subtitles, description, note (below the chart)
• section at the end for What next
• mobile styling - the filters are very squashed on mobile
• chart styling - not all can be changed

[claudioccm]

• [x] styles for chart titles, subtitles, description, note (below the chart)
• [ ] section at the end for What next (couldn't identify where this is)
• [x] mobile styling - the filters are very squashed on mobile
• [x] chart styling - not all can be changed

[claudioccm]

Fixes first task

.results-page__body__section-title {
  font-size: 2rem;
  font-weight: 300;
}

.results-page__body figure > p, 
/* 
This is awfully generic. Can we target these in a more specific way? 
Targeting the Download button on the very bottom
*/
.results-page__body ul > li > a, 
/* 
This is awfully generic. Can we target these in a more specific way?
Targeting the text below the "Recipient type" chart
*/
.results-page__body__section-subtitle, /* Can we remove the parantheiss? Can we remove the "currency:" word? */.results-page__body__section-description,
.results-page__body__section-note {
  font-size: 1.2rem;
  font-family: neusa-next-std-compact, sans-serif;
  font-weight: 300;  
}```

[claudioccm]

This does some styling to the charts themselves, but very limited by technology itself

/* Tweaking the SVG here */
.ytick text, 
.point > text { font-weight: 300; }

[claudioccm]

for the mobile styles, we will fix two things that will already make it a lot better. But I'd like to analyze the user data to see what's the percentage of users accessing this through mobile, to see how much effort is worth to put in mobile optimization. (besides these two fixes I mentioned)

[morchickit]

I agree, this is not a website for mobile...

HOWEVER, we do have many people who uses tablets and come to our events with tablets.

Claudio, can we maybe just adjust for tablets size then?

On Tue, 19 Feb 2019 at 18:10, Claudio Mendonca notifications@github.com wrote:

for the mobile styles, we will fix two things that will already make it a lot better. But I'd like to analyze the user data to see what's the percentage of users accessing this through mobile, to see how much effort is worth to put in mobile optimization. (besides these two fixes I mentioned)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ThreeSixtyGiving/Insights/issues/79#issuecomment-465246238, or mute the thread https://github.com/notifications/unsubscribe-auth/ADHzuyWRz3WCq-TA4IQs2iq8PNGdtEh6ks5vPD4hgaJpZM4bBBg0 .

-- Mor Rubinstein Data Labs Manager 360Giving http://www.threesixtygiving.org/ Twitter - @morchickit https://twitter.com/Morchickit Cell: +44(0)7904191881 / Office: 020 3752 5775 Skype: mor.rubinstein We are finalists for a DigitalAgenda 2019 Impact Award. Vote for us here https://www.impact-awards.co.uk/finalists! 360Giving is a company https://beta.companieshouse.gov.uk/company/09668396 limited by guarantee and a registered charity http://beta.charitycommission.gov.uk/charity-details/?regid=1164883&subid=0 . Read our privacy notice http://www.threesixtygiving.org/privacy/ to find out how we collect and use personal data.

[image: cid:image001.png@01D122F0.5ED3A880]

[claudioccm]

@drkane - we made a compromise adjustment for the mobile thing. I totally agree that, even though it is not a mobile driven interface, it can't look that terrible on mobile. EVER.

Here is a commit that fixed some issues like paddings and sidebar positioning. Should solve most of the problems. I will double check for tablet. https://github.com/ccmdesign/360-insights/commit/48cb34dd7bbbf6d46904cbee0201ac1c090ac7f4

[claudioccm]

Design for "What's next" section