CSS to swap artwork alignment to top

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

tbm72
Posts: 352
Joined: Tue Dec 09, 2008 3:04 pm
Location: UK

CSS to swap artwork alignment to top

Post by 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):

Image

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
Posts: 352
Joined: Tue Dec 09, 2008 3:04 pm
Location: UK

Re: CSS to swap artwork alignment to top

Post by 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
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS to swap artwork alignment to top

Post by 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';
    }
})
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
tbm72
Posts: 352
Joined: Tue Dec 09, 2008 3:04 pm
Location: UK

Re: CSS to swap artwork alignment to top

Post by tbm72 »

Thank you so much! I'm an absolute beginner with JS but I'll play around and see what I can do...
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS to swap artwork alignment to top

Post by 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.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
tbm72
Posts: 352
Joined: Tue Dec 09, 2008 3:04 pm
Location: UK

Re: CSS to swap artwork alignment to top

Post by tbm72 »

Gotcha, that makes sense (I think!) thank you :D 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
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS to swap artwork alignment to top

Post by drakinite »

tbm72 wrote: Wed Oct 04, 2023 2:15 pm Gotcha, that makes sense (I think!) thank you :D 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.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
tbm72
Posts: 352
Joined: Tue Dec 09, 2008 3:04 pm
Location: UK

Re: CSS to swap artwork alignment to top

Post by tbm72 »

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