Page 1 of 1
CSS to swap artwork alignment to top
Posted: Mon Oct 02, 2023 8:35 am
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):
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.
Re: CSS to swap artwork alignment to top
Posted: Mon Oct 02, 2023 8:52 am
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?
Re: CSS to swap artwork alignment to top
Posted: Tue Oct 03, 2023 7:34 pm
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';
}
})
Re: CSS to swap artwork alignment to top
Posted: Wed Oct 04, 2023 3:28 am
by tbm72
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
Posted: Wed Oct 04, 2023 11:02 am
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.
Re: CSS to swap artwork alignment to top
Posted: Wed Oct 04, 2023 2:15 pm
by 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?
Re: CSS to swap artwork alignment to top
Posted: Thu Oct 05, 2023 7:42 pm
by drakinite
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?
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.
Re: CSS to swap artwork alignment to top
Posted: Fri Oct 06, 2023 1:40 am
by tbm72
Cool, I'll do some searching and see if I can find some suggestions. Thanks again for your helpful pointers!