CSS to swap artwork alignment to top

[tbm72]

I'm not an expert with CSS so wondered if there's a simple tweak I could add to align album artwork to the top of the Preview/Playing panel with album info placed underneath it (instead of it being aligned to the bottom as it currently is):



It just means that for albums with long artist/title fields the text often overruns onto the artwork. I'm sure it's probably a fairly simple edit but I can't seem to do it.

[tbm72]

Or I don't know if it's possible but even better would be to dynamically resize the panel so the album info/text always displays above the artwork without running down onto it?

[drakinite]

Unfortunately the text & image positioning of the artwork window are hardcoded in the HTML (see controls/artWindow.js, function _createlayout())

But you can override it in JS with an addon. Example:

Code: Select all

// override the ArtWindow constructor
ArtWindow.prototype.override({
    // specifically override the _createlayout function
    _createlayout: function ($super, ...args) {
        // $super will call the function and run all the default code, then after that, you can modify the content of the HTML
        $super(...args);
        let UI = getAllUIElements(this.container);
        UI.artworkLayer.classList.remove('bottom');
        UI.artworkLayer.classList.add('top');
        UI.artwork.classList.remove('bottom');
        UI.artwork.classList.add('top');
        UI.propsLayer.style.top = '';
        UI.propsLayer.style.bottom = '0';
        UI.propsLayer.style.color = 'red';
    }
})

[tbm72]

Thank you so much! I'm an absolute beginner with JS but I'll play around and see what I can do...

[drakinite]

No prob. If you don't know yet how to package an addon, check the main page on https://www.mediamonkey.com/docs/apinew/ (it was copied over from the wiki but my plan is to put everything MM5 addon-related there) - and since the code snippet modifies ArtWindow, put the code in controls/artWindow_add.js.

[tbm72]

Gotcha, that makes sense (I think!) thank you I'll have a play around later and experiment.

Would I be wasting my time trying to write some simple code that dynamically resizes the pane height to fit the artwork plus the text for artist/album etc above it?

So for albums with longer titles/artist names etc the div height would increase. My instinct was using something like 'height:auto' or 'fit-content'. Maybe it isn't that simple though?

[drakinite]

Gotcha, that makes sense (I think!) thank you I'll have a play around later and experiment.

Would I be wasting my time trying to write some simple code that dynamically resizes the pane height to fit the artwork plus the text for artist/album etc above it?

So for albums with longer titles/artist names etc the div height would increase. My instinct was using something like 'height:auto' or 'fit-content'. Maybe it isn't that simple though?

No prob!
I'm not 100% sure, but I think it would probably be non-trivial to automatically resize the panel height. Definitely possible, but not simple. You'd probably have to deal with edge cases like listening for layout change events and whatnot. I also don't think it can be achieved in CSS alone, sorry.

[tbm72]

Cool, I'll do some searching and see if I can find some suggestions. Thanks again for your helpful pointers!