Preview is not correctly displayed on small screens

[SergeBredin]

@iOiurson If you miss css:

• css is on alternatives.css
• source is on displayPlaces.js

;-)

[bleucitron]

You mean the legend on mobile screens ?

[SergeBredin]

I mean the preview bar at the bottom, the 3 elements overlap on a phone screen:

• title + subtitle
• the span "Cliquez sur chaque élément pour modifier sa disponibilité »
• the bins buttons

Le 18 mai 2016 à 10:23, iOiurson notifications@github.com a écrit :

You mean the legend on mobile screens ?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/anthill/6element/issues/228#issuecomment-219958743

[bleucitron]

Yeah, that's what i meant. My opinion is that the problem comes from a combination of these CSS:

// main.css:294
@media screen and (max-width: 400px) {
    .place-avatar,
    .place-header > li:first-child {
        width: 0;
        padding: 0;
        margin: 0;
    }
}

// main.css:261
.place-header li {
    float: left;
}

On a small screen you set .place-avatar AND .place-header > li:first-child's width as 0 for the RC page, where you want the avatar to disappear. This is fine for the avatar, since it has no content. Note that in this case both selectors refer to the same element. But in the Alternative case, the .place-header > li:first-child is the place name. And when its width is set to 0, the block has no width alright, but its content overflows, and still appears, in spite of the fact the element is supposed to have no width. And since the .place-header li's float: left applies to both Alternative name <li> and Bin list <li> (which also includes the incentive to click), they overlap.

If you delete the .place-header > li:first-child from CSS on line 294, the elements don't overlap anymore. But another problem arises, since now the bin list is set downwards, and is not visible on the screen anymore.

I'm not 100% familiar with the code, but i think a small refactoring of how the place-* elements are displayed is necessary. Maybe even differentiate RC places from Alt places.

Was this useful ?

[bleucitron]

When i think about it, the float part might not be part of the problem. But still, i'm not a big fan of setting elements as float.