Upcoming moOde 6.6.0 feature release

[Tim Curtis]

It's done by CSS media queries in moode.css. Below is an example from the file. The width and height values represent the viewport width and height.

Code:

/* smaller portrait for small screens */
@media (max-width:479px) and (orientation:portrait) {
.
.
.
    #albumcovers .lib-entry, .database-radio li {width:var(--mthumbcols);}
    #albumcovers .lib-entry img, .database-radio img {max-height:calc(var(--mthumbcols) * .9);}
.
.
.

The appearance option that sets the number of columns does the following in playerlib.js

Code:

        setLibraryThumbnailCols($('#thumbnail-columns span').text().substring(0,1));
.
.
.

function setLibraryThumbnailCols(cols) {
    var map = {6:'16vw,45vw', 7:'14vw,30vw', 8:'12vw,22vw'}
    var css = map[cols].split(',');
    document.body.style.setProperty('--thumbcols', css[0]);
    document.body.style.setProperty('--mthumbcols', css[1]);
}