Show indicator when station doesn't have free slots

[NeoLegends]

Right now this suffers from some visual artifacts (the icons aren't aligned for some reason), so I didn't push this to master directly.

Pinging @LucasForster and @sudmann for review.

[LucasForster]

Right now this suffers from some visual artifacts (the icons aren't aligned for some reason)

Looks fine by me, what do you mean exactly? What certainly needs to be changed, is to shorten the bottom line to match the icon width.

Furthermore, I would look for a solution that allows displaying the number of free slots like so: The ❗️can then be replaced by other emojis depending on just one, or multiple slots being available.

One last thing: When I first worked on issue #11, I didn't manage to make the paragraphs in the additional icon look like the text on the slot icons. Your solutions doesn't include that either, maybe you can take a look at it. And tell me how to fix it.

[NeoLegends]

Looks fine by me, what do you mean exactly?

Try a station with a lot of bikes and a narrow screen (so that the layout switches from "centered" to normal). The icon will move upwards a little (at least in Chrome).

[sudmann]

Looking good. But like @LucasForster I think that it is necessary to display the exact number of available slots. Think about a group of people traveling together.

Right now this suffers from some visual artifacts

Sadly I also weren't able to reproduce this.

Maybe it would be useful to provide some testing environment. Currently you have to be pretty lucky to test a wide variety of situations or reproduce certain problems like the one mentioned above.

[NeoLegends]

Sadly I also weren't able to reproduce this.

Interesting. Which browser(s) were you using? Perhaps it's specific to Chrome or to my machine.

But like @LucasForster I think that it is necessary to display the exact number of available slots.

I like this. It would fit the look of the other slots much better if we have a symbol and a number below inside the rounded box.

[NeoLegends]

Looks like this now:

[NeoLegends]

@LucasForster @sudmann This is what the visual artifacts look like:

Notice the difference in vertical offset.

[LucasForster]

Interesting. Which browser(s) were you using? Perhaps it's specific to Chrome or to my machine.

Reproducible on Firefox 65:

[NeoLegends]

@LucasForster thanks for the reproduction. I will look deeper into this.

Another suggestion for the icon:

IMO this one looks "too big" compared to the flashes.

[NeoLegends]

So I have just fixed the vertical offset issue (see https://stackoverflow.com/questions/12113296/h2-inside-div-inline-block-weird-offset for more information) and I'm ready to merge, but we'd have to settle on an emoji to use first.

[NeoLegends]

I have adjusted the font size of the return emoji (while keeping its height), IMO it looks great now. WDYT @LucasForster @sudmann ?

[LucasForster]

So I have just fixed the vertical offset issue (see https://stackoverflow.com/questions/12113296/h2-inside-div-inline-block-weird-offset for more information) and I'm ready to merge, but we'd have to settle on an emoji to use first.

I was still looking into it, but I'm glad this is fixed now.

Alternative symbols that I would prefer for looking less like a typical emoji:

• ⏎ - maybe the best option, very simplistic
• ⮐ - I don't like this one too much
• This one is two characters long and based on the first one (can't get it copied here properly)

IMO this one looks "too big" compared to the flashes.

The emojis above would need the same treatment, of course.

[NeoLegends]

I like the first one. Merged.