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.
CSS to swap artwork alignment to top
Moderators: jiri, drakinite, Addon Administrators
Re: CSS to swap artwork alignment to top
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?
Re: CSS to swap artwork alignment to top
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:
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';
}
})
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.
Re: CSS to swap artwork alignment to top
Thank you so much! I'm an absolute beginner with JS but I'll play around and see what I can do...
Re: CSS to swap artwork alignment to top
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.
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.
Re: CSS to swap artwork alignment to top
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?
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?
Re: CSS to swap artwork alignment to top
No prob!tbm72 wrote: ↑Wed Oct 04, 2023 2:15 pm 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?
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.
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.
Re: CSS to swap artwork alignment to top
Cool, I'll do some searching and see if I can find some suggestions. Thanks again for your helpful pointers!