[Cosmetics] Construction/Critters icons

[Dajakk]

The icons and the text seem to be slightly misaligned, also they look messy and out of sync when there is a prosperity card

Few quick proposals on changing that:

One more thing, that's more of a visual bug I think. When the text of a card is long, the alignment of the icons gets broken: I can see two easy ways to fix it, either always display the text in one line with ellipsis and a tooltip if too long, or make the score icon always the same size

[tadeaustria]

Do you have code for your proposals? I'm no HTML designer and happy for any suggestions here...

[Dajakk]

I'm more of a backend developer myself and no CSS expert, but I tested all versions with margin: 5px and changing the order of the elements in the container:

<div class="d-flex">
    <div class="flex-grow-1" data-i18n="card.bargetoad" data-i18n-options="{ &quot;card&quot;: &quot;(Ever Tree)&quot; }">Barge Toad</div>
    <img src="img/critter.png" height="20px" style="margin: 5px;">
    <span class="badge text-bg-warning">1</span>
</div>

<div class="d-flex">
    <img src="img/critter.png" height="20px" style="margin: 5px;">
    <div class="flex-grow-1" data-i18n="card.bargetoad" data-i18n-options="{ &quot;card&quot;: &quot;(Ever Tree)&quot; }">Barge Toad</div>
    <span class="badge text-bg-warning">1</span>
</div>

<div class="d-flex">
    <div class="flex-grow-1" data-i18n="card.bargetoad" data-i18n-options="{ &quot;card&quot;: &quot;(Ever Tree)&quot; }">Barge Toad</div>
    <span class="badge text-bg-warning">1</span>
    <img src="img/critter.png" height="20px" style="margin: 5px;">
</div>

Maybe it's possible to do it differently with those flexes, but that's outside my knowledge right now, would need to do some investigation first.

As for the other issue... didn't try anything yet

[Dajakk]

title + some css seems to work:

<div title="Budowa Traktu Królewskiego" class="flex-grow-1" data-i18n="event.kingsroadestablished" onclick="app.removeSpEventFromActivePlayer('0')" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">Budowa Traktu Królewskiego</div>

[tadeaustria]

title + some css seems to work:

Eventhough this looks good, and I am also developing on a desktop, the main device is still a phone. With a phone tooltips are not really useful.

[Dajakk]

I think it can be solved with a long press (at least that's what I quickly found in Google as a mobile friendly way to handle tooltips). I will consult my frontend coworker how we handle this in our corporate app, but I think this is what material ui is doing

[Dajakk]

That's also what apparently GitHub does when you open it in mobile

[tadeaustria]

I think it can be solved with a long press (at least that's what I quickly found in Google as a mobile friendly way to handle tooltips). I will consult my frontend coworker how we handle this in our corporate app, but I think this is what material ui is doing

Yeah well, of course I know that. But can you test this specifically, because if it should work that way does not automatically mean it will work that way. It would be annoying if the onClick event is triggered after the tooltip is shown and always removes the card.