digitalfabrik/integreat-cms

Make HIX-block more compact

Closed this issue · 6 comments

dkehne commented

Motivation

After discussing problems and struggles from municipalities on T33K we came up with a shorter/more compact design of the HIX-block. It can become leaner after the supporting/explanation structures had been improved.

Proposed Solution

Key change would be to use another graphic (a bar instead of a curve) to save space. Some elements should be removed or re-sorted, as you can see on the attached screenshot.

The question if the HIX-value itself can be positioned ON the graphical bar or next to it should be answered by the development team. On the bar is desired but if it costs more effort than adding in next to the bar, then go ahead with a placement beside.

HIX-box
charludo commented

We could also do the progress bar in plain html & css, then it would still qualify as good first issue in my opinion.

https://gist.github.com/WeiChiaChang/abe92ca2e8da86ef69560b63903e8764

Or even just:

background-image: linear-gradient(to right, green 89%, gray 89%);
  • 👍1
charludo commented 
* https://flowbite.com/docs/components/progress/#with-label-inside

TBH Flowbite could be nice for a lot of the things we're doing (e.g. I think we currently use custom code for opening/closing modals,...)

  • 👍1
seluianova commented

Or just a bold text in green/red color (without a chart)?

HIX 16.89

(out of 20)

osmers commented

@seluianova we are currently discussing a redesign of the hix value box together with the feedback on the hix value - maybe wait with working on this issue till we have the new design from @hauf-toni :)

seluianova commented

@osmers ah, sure, thanks for letting me know.
I have committed this draft version so far:
image