Smartphone view

[ionl]

Is it possible to hide left bar (with city list) ? On smartphone (Nexus 5, 5") with Firefox, I can't see main all view with city, temperature, humidity etc. and I can't see at all array hours list predictions. Thank you https://cloud.ionl.fr/index.php/s/EL8BL9zuvo1MKi2

[berdosi]

Adding some media queries, may help here - the below CSS moves the city list to the bottom, hides the last columns of the forecast table, and pushes the forecast panels around a bit. I like the way it looks.

@media screen and (orientation: portrait) and (max-width: 12cm) and (min-height: 10cm) {
    #app-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 50px);
    }
    #city-list-left {
        order: 2;
        width: 100%;
        flex: min-content;
    }
    #city-list-left ul.city-list {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
    }
    #city-list-left ul.city-list li {
        flex: min-content;
        min-width: 50%;
    }
    #city-list-left ul.city-list li:last-child {
        flex: auto;
    }
    #city-right {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    #city-right tr td:nth-of-type(n+4), th:nth-of-type(n+4) {
        display: none;
    }
}

[e-alfred]

@berdosi It looks nice on your screenshot, but I cannot get it to open the weather forecast using your code block:

[berdosi]

My bad, I was testing it on the wrong branch with different element IDs. Replacing #app-container with #app in the second line solves the issue.

[e-alfred]

@berdosi I like the view, but the city selection is taking up too much space (should be scrollable too) especially on small devices and/or if there is a long list of towns:

Also, the Tablet view is not ideal at the moment:

[FadeFx]

@berdosi @e-alfred why not just hide the left pannel and unhide it using a burger button? Id say its not necessarry to permanently see the cities list... this would also solve the space problem with list length