Style scenario box

[nesnoj]

Breathe beauty into scenario box. Should contain:

• title
• heating technology / technologies
  • there is always 1 main tech, e.g. "Fernwärme", "BHKW" , "Erdwärmepumpe"
  • additional heating can be added, e.g. combination "Erdwärmepumpe"+"Heizstab"+"Solarthermie"
  • max. number of simultaneously shown tech/icons is 5
  • use icons from Add scenario icons #48
• renovation measures, max. number of simultaneously shown tech/icons is 4, icons from Add scenario icons #48
• delete button (implemented)
• edit button (being implemented in small fixes #45)

First draft from figma:

[bmlancien]

Here a draft with 2 variants for the scenario box. Basically the second one is the same but the edit and delete actions are hidden behind the more button at the top right corner (personally, my favorite).

[nesnoj]

Thx for the draft, I prefer the 2nd one too 😍

On the layout: The user can create up to 3 scenarios which sum up to a max of 27 items - maybe too many in the vertical space? What do you think about a more compact design?

For example:

or alternatively:

In this case the icons should be fully self-explanatory..

[bmlancien]

I would be cautious about only using icons, even if they are more or less easy to identify. In our case we are dealing with icons that are not very common, so it's more difficult to understand at a glance what they are about. Usually it is better to have the label too. But if we want to do without visible labels, we should add them on hover. We can also give them the possibility to expand the boxes.

[nesnoj]

Yes, I understand your concern and I'm also a bit skeptical about the comprehensibility.
Maybe you could draft a scenario section from your first proposal with 3 scenarios holding 9 items each and see if there's a chance to fit into a vertical screen resolution sth. below full HD?

[bmlancien]

Maybe using something like a tag look, so they can also appear next to each other? It would probably still have a vertical scroll visible on smaller screens, but this is already more compact.

[nesnoj]

Yess, looks very nice, go for it!
I like the left, colored version :)
Arranging the elements in a grid instead of the tag layout might looked more clean, maybe worth a try..

[bmlancien]

Do you prefer with a grid?

[nesnoj]

Do you prefer with a grid?

Yes I do :)

[bmlancien]

@henhuy Is it possible to make the items inside the content as a list or divs so I can style them? Right now this is just plain text. Also good to have would be the category names.

[henhuy]

@henhuy Is it possible to make the items inside the content as a list or divs so I can style them? Right now this is just plain text. Also good to have would be the category names.

@josihoppe could you take over?

[josihoppe]

Yes I can do that. @bmlancien by list you mean putting the items in <ul> <li> item </li> </ul> structure? And would you prefer list or divs? :)

[bmlancien]

@josihoppe For accessibility purposes, I would go for the <ul> type. I just need to be able to specify css classes. But I guess I can do this on my own.
Something good would also to have <span>icon path</span><span>name</span> inside the list item, if possible :)

[josihoppe]

@josihoppe For accessibility purposes, I would go for the <ul> type. I just need to be able to specify css classes. But I guess I can do this on my own. Something good would also to have <span>icon path</span><span>name</span> inside the list item, if possible :)

will see what I can do :D

[josihoppe]

@bmlancien does #87 look the way you wanted it?

[bmlancien]

It looks good, thank you @josihoppe