Open ionl opened 7 years ago
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;
}
}
@berdosi It looks nice on your screenshot, but I cannot get it to open the weather forecast using your code block:
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.
@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:
@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
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