Add styling

[rudigiesler]

This PR aims to add styling to the various templates.

It does so by using the Material Design Lite framework, with a momconnect colour theme, because I'm not a designer, CSS is magic, and the users of this site are all internal, so the styling isn't very important.

[rudigiesler]

Login page:

Main page:

Log view:

[alexmuller]

This all looks good and works for me in Firefox and Chrome 👍

There are some things we might want to think about in the future:

The grey/blue colour combination fails WCAG AAA colour contrast guidlines - https://webaim.org/resources/contrastchecker/ is super helpful for checking this. I'm surprised by this because as far as I can tell we're just using the default material design colours and I would have thought they would have tested this.

It works pretty well with JavaScript disabled but I do get a slight flash of unstyled content before the JavaScript has totally finished executing.

Perhaps at some point we should think about creating a Python package which we could add to all of our Django apps to automatically get consistent Praekelt styling. I've seen this in the past for example as https://github.com/alphagov/govuk_admin_template which is a Rubygem for building consistent admin apps.

[KaitCrawford]

👍

[rudigiesler]

@alexmuller Yeah, so firstly, I'm not too concerned with the styling, since this is a tool that only internal people will use.

Yeah I'm surprised at the material design colours not passing contrast. I'm not sure that that's something that can be changed easily though. Seems to only affect links. I could add a

label {
 display: none !important;
}

, but that seems quite hacky.

So the javascript is purposefully loading async, so that it doesn't block. That causes a flash of unstyled, because django adds a label to each dropdown, which the MDL JS removes. I could maybe add a

label {
  display: none !important;
}

style to not have that happen without JS, but that also seems very hacky.

Overall, the little things are just fighting with MDL, but it's just easier right now than trying to do all the styling.

A package with praekelt styling would be great. We can probably talk to the front end team about that, I think they've done similar things for the Youth team's mobi sites.