Moode Forum

Full Version: CSS fix to look at
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Maybe swizzle can put this on his to-do list?

The right hand index has no left buffer (margin/padding) against the album bg, which becomes highlighted when an active green bg is applied. Wink

The image is from a 2560x1440 desktop, browser running at the image dimentions.

[Image: moode_bug_01.png]



Cheers

Paul
Can u enable overlay scrollbars in Windows and get rid of those white scrollbars?
Must admit that screenshot of chrome was because that was the last browser I tested in, my daily driver is Firefox; no overlay overrides.

TBH it is a minor edge case really, maybe a new setup using css grid or flexbox will be better in the future.

Paul.
(05-30-2020, 06:14 PM)grumbleweed Wrote: [ -> ]Must admit that screenshot of chrome was because that was the last browser I tested in, my daily driver is Firefox; no overlay overrides.

TBH it is a minor edge case really, maybe a new setup using css grid or flexbox will be better in the future.

Hmm, interesting. I’m assuming the right edge of the screen shot is an artifact of the screen capture? Unfortunately I don’t see this behavior in the simulator.

I can’t replicate it to see what’s going on but there is a relatively easy way to fix this by using the thumbcols css variable. I forget if you can set thumbnail column number in the appearance dialog now, if so try that first. You won’t have fine tuned control but you can try adjusting it to show more columns. If more columns doesn’t fix it you’d need to hack the playerlib.js file to adjust the values. Iirc the default for 6 columns is 16vw, if you reduce that a bit (e.g. 15.9vw) it’ll give larger gutters on the screen edges. If it’s not in the appearance dialog yet you can adjust the —thumbcols value it in panels.css.
Thanks for the heads up swizzle, appreciate you taking the time to have a look. Smile

Paul.
@grumbleweed

Paul try the css in this post:

http://moodeaudio.org/forum/showthread.p...2#pid21282

With the quick-jump index we’d probably want to modify that like:

width:calc(100% - (var(—sbw) + 1em));
margin-left:calc(var(—sbw) + 1em);

Just guessing at the 1em value, we’d need to set a real width for the quick-jump indexes but I’m not sure these are all that useful for desktop. The — is supposed to be a double dash.

ETA: you’d still need to adjust the thumb size as the extra spacing will cause it to lose a column.
Thanks swizzle, I went with
Code:
width:calc(100% - var(--sbw));


I don't size my browser small enough to get that lost column.

Smile 

Paul.
Do I need to make any changes?
(06-19-2020, 03:04 PM)Tim Curtis Wrote: [ -> ]Do I need to make any changes?

Yes, I’ll try to post a list of changes tonight. It basically means adding a fixed width to the indexes and then subtracting that (and sbw) from the width of a few different elements.
(06-19-2020, 03:04 PM)Tim Curtis Wrote: [ -> ]Do I need to make any changes?

It's kind of painful, it needs to do like:

Code:
panels.css

clean these up so we don't need to use !important so much, possible road to hell paved with good intentions situation but seems good so far. ;)

#lib-content ul {display:table;overflow-x:hidden;word-break:break-word;}
#lib-content li {display:block;position:relative;cursor:pointer;line-height:1.25em;}

add this to account for scrollbar and index width in li elements so the text doesn't overrun the index or scrollbar,

#genresList li, #artistsList li, #albumsList li {width:calc(100% - (var(--sbw) + 1.17rem));}

add this to handle radio covers and album covers, it needs to go after #albumcovers to avoid being overwritten

#radiocovers, #albumcovers {width:calc(100% - 2 * (var(--sbw) + 1rem));margin-left:calc(var(--sbw) + 1rem);}

add this to handle tag view columns.

#lib-genre ul, #lib-artist ul, #lib-album ul {width:calc(100% - (var(--sbw) + 1rem));margin:.25em 0;}

modify this to account for sbw:

#songsList {padding-bottom:calc(8em + env(safe-area-inset-bottom));margin:.5em .25em;width:calc(100% - var(--sbw));}

add a fixed width to the indexes and modify the spacing a bit...

#index-genres, #index-artists, #index-albums, #index-albumcovers, #index-browse, #index-radio {display:none;width:1rem}

#index-genres {right:calc(66.85% + var(--sbw));top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-artists {right:calc(33.33% + var(--sbw));top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-albums {right:var(--sbw);top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-albumcovers {position:fixed;right:var(--sbw);top:calc(3.5rem + 1px);top:calc(3.5rem + 1px + env(safe-area-inset-top));height:calc(100% - 9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
#index-browse {right:var(--sbw);top:calc(3rem + 1px);height:calc(100% - 10rem);height:calc(100% - 10rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
#index-radio {right:var(--sbw);top:calc(3rem + 1px);height:calc(100% - 12rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}

this makes the index text a little smaller but bolder and uses textvariant instead of opacity, the hit area is still the same but it looks a little cleaner. maybe. if we move the size back to .8em then the 1rem used in the calcs needs to grow a bit, I was using 1.17rem.

.alphabits ul li {display:table-row !important;font-size:.6em;text-transform:uppercase;line-height:normal;font-weight:600;color:var(--textvariant);text-align:center;}
Pages: 1 2