@kostis90
I do this by resizing the DIV of Windy.
(Toggle class between contentbg and map-large)
JS:
var mapexpandbool = 0;
var mapdivmenu = document.getElementById("weather-map");
var mapdivmenutext = document.getElementById("weather-map+-");
var mapframe = document.getElementById("weather-map");
function weathermapexpand() {
if (mapexpandbool === 0) {
mapdivmenu.className = 'map-large';
mapdivmenutext.innerHTML = '-';
mapexpandbool = 1;
} else {
mapframe.className = 'contentbg';
mapdivmenutext.innerHTML = '+';
mapexpandbool = 0;
}
}
CSS:
.contentbg {
width: calc(100% - 10px - 2px);
border-width: 1px;
border-color: rgba(255, 255, 255, 0.5);
border-style: solid;
background-color: rgba(0, 0, 0, 0.15);
opacity: 1;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display:inline-block;
padding: 5px;
margin-bottom: 15px;
transition: .5s linear;
-ms-transition: .5s linear;
cursor: default;
}
.map-large {
width: calc(90vw - 12px) !important;
height: calc(90vh - 12px) !important;
top: 0vh !important;
display: block;
position: absolute;
z-index: 10;
transition: .5s linear;
-ms-transition: .5s linear;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.5);
border-style: solid;
background-color: rgba(0, 0, 0, 1);
padding: 5px;
}