[IDEA] Coverart UI customization

[Tim Curtis]

I tested centered metadata text and it doesn't look very good on typical displays or Pi Touch because of the way word-break happens, however ultra-wide displays like the one you are working with could possibly be handled (to a point) in a CSS Media query but I'd need to know it's viewport size in order to test it in a sim. 

Run the command below and then in System config restart Local display, or if the display has touch capability then Menu, Refresh. It will show the viewport size of the display in a popup. 

Code:

# Show viewport size on page refresh
moodeutl -q "update cfg_system set value='viewport' where param='pkgid_suffix'"

# Revert the setting
moodeutl -q "update cfg_system set value='' where param='pkgid_suffix'"

[manolomalele]

@Tim Curtis

this is what I've got:

   

it says:

viewport
1919x479

I hope this can help

[Tim Curtis]

Here is how it could look with the CSS media query. If you plan to use it's touch capabilities (if it has any) then a few other UI elements including the popup volume control and audio info screen need to be sized appropriately.

With Playbar hidden
   

With Playbar showing
   

[manolomalele]

Here is how it could look with the CSS media query. If you plan to use it's touch capabilities (if it has any) then a few other UI elements including the popup volume control and audio info screen need to be sized appropriately.

With Playbar hidden


With Playbar showing

That is AWESOME!

Thank you ro much. My monitor has not any touchscreen, so I don't tink that is going to be an issue.

I honestly do prefer with the Playbar.

Can't wait for the next release

[manolomalele]

Thank you Tim 

You've done a really good work! 

   

It looks perfect 

Great

[Tim Curtis]

Thank you Tim 

You've done a really good work! 



It looks perfect 

Great

Except for a regression that causes the top border on the Playbar to be visible :-0

It's fixed for upcoming 8.2.3 release :-)

If you want to get rid of it now run the command below. It's one long line.

Code:

sudo sed -i s"/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);border-top:1px solid var(--btnshade2);display:none}/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);display:none}/" /var/www/css/styles.min.css

[manolomalele]

Thank you Tim 

You've done a really good work! 



It looks perfect 

Great

Except for a regression that causes the top border on the Playbar to be visible :-0

It's fixed for upcoming 8.2.3 release :-)

If you want to get rid of it now run the command below. It's one long line.

Code:

sudo sed -i s"/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);border-top:1px solid var(--btnshade2);display:none}/#menu-bottom{bottom:0;height:5.3rem;width:100%;z-index:9997;background-color:var(--btnbarback);display:none}/" /var/www/css/styles.min.css

Ciao Tim, 
Honestly I thought that was made pourposly... it doesn't look bad

However, I will use the code you've pasted on the previous post.

Thanks again and I hope that his new visualization option could be useful for many other users and inspire them for new amazing projects!