Responsive app

[vbakke]

This PR resolves most of my bullet points in #347.
(I left the calculations of the heatmap out.)

I though I'd better share the changes I did regarding this, now that @PAVAN507-STAR is showing an interest as well.

It would be great if you all could do some testing to identify any bugs that I've overlooked, @wurstbrot, @0x41head, @PAVAN507-STAR. I've tried to bulk changed into separate commits, per bullet point.

I have moved the Heatmap up as then main page, even you were not quite convinced @wurstbrot. We can figure out if we want a feature toggle in code, in yaml, or save last page. But I do find the heatmap do give a better overview. And that is what I'd like my users to see first. And for the returning users that are welcome to go straight to the Matrix, to look at the details.

But this is a fairly common pattern: Start with the overview. Then dig into the details.

I'm happy do hear you guys' point of view. :)

[vbakke]

Yay! Learnt some about angular unit test setup, @wurstbrot. Did pass, but can probably be improved.

[vbakke]

Any comments on the PR, @0x41head or @ptechofficial?

[0x41head]

Any reason why when hovering over the heatmap, you pivoted to a green border rather than the original yellow fill ?

[vbakke]

Any reason why when hovering over the heatmap, you pivoted to a green border rather than the original yellow fill ?

When filling the sector one cannot see the degree of green.

I was missing a visual cue for which sector was selected. And it would be annoying if that cue was filling the sector, obscuring the gradient of green. I fiddled a bit to find a way to highlight just the border.

Since the click indicator ("cursor") was now using just the border fo indication, then I though it looks better if both hover and cursor use the border as a visual cue.

[wurstbrot]

Hi @vbakke ,

after you resolved the merge conflict we can merge :)

[vbakke]

Merge conflict should now have been fixed.
Local test looks okay, @wurstbrot

[wurstbrot]

Thank you