Seneral / FlagPlayer

Music-oriented YouTube web-app - single-page, client-side, simple
https://flagplayer.seneral.dev
17 stars 5 forks source link

small fix in style.css #18

Closed NeuroCPP closed 2 years ago

NeuroCPP commented 2 years ago

fixed playlist drop down arrow cutting off in some playlist due to font size and more characters to be fit in already made an issue out of it and found a temporary fix to it let's see what more can be done although there is a solution I don't know how to implement it 😕

Seneral commented 2 years ago

From some experimentation I found that changing plTitles class to oneline (instead of twoline) and removing "flex-shrink: 0;" from plDesc CSS works very well, resulting in ellipses before the button gets pushed off.

If we want the header to get bigger to accomodate two lines of title, alternatively just removing "flex-shrink: 0;", as well as removing "height: 4em;" from plHeadMain CSS works, too. However, this will by default misalign all buttons vertically, especially if it's using two lines. It can be partially adressed, but not easily fully. So I'd just drop the two-line header.

Btw, the website is served from the gh-pages branch, so any changes should be applied to both branches. Very messy, but I couldn't think of a better solution back then if I wanted it to be in the master as well with the server

NeuroCPP commented 2 years ago

how about overflow-wrap:hidden or overflow-wrap:break-word in the plTitle

Seneral commented 2 years ago

Doesn't seem to do anything. Try modifying stuff with Developer Tools, e.g. try my first suggestions, and see what works

NeuroCPP commented 2 years ago

oh i will try...after i get some rest and study

On Tue 19 Jul, 2022, 10:59 AM Seneral, @.***> wrote:

Doesn't seem to do anything. Try modifying stuff with Developer Tools, e.g. try my first suggestions, and see what works

— Reply to this email directly, view it on GitHub https://github.com/Seneral/FlagPlayer/pull/18#issuecomment-1188614790, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUP66TP3CHTV3PBPQ7VEEZTVUY4LLANCNFSM536QP7AQ . You are receiving this because you authored the thread.Message ID: @.***>

NeuroCPP commented 2 years ago

.truncate { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; but i tried this to add like read more sort of thing in the so that it drop down vertically to be read fully

NeuroCPP commented 2 years ago

an one more small update add display: inline-block remove flex-shrink=0 does it also but pushes the plDesc down and if there is overflow tag then it will be hidden (if hidden is the allias)

Seneral commented 2 years ago

an one more small update add display: inline-block remove flex-shrink=0 does it also but pushes the plDesc down and if there is overflow tag then it will be hidden (if hidden is the allias)

Sounds like same behaviour as in my second attempt (two-lines).

  • [x] tried 1st suggestion ..it looks promising BUT annoying(the ellipsis) at the same time if it was some sort of like (read more) then it would have been a different thing thought

    • [x] tried/ experimented with some truncate

.truncate { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; but i tried this to add like read more sort of thing in the so that it drop down vertically to be read fully

There is always a trade-off, at some point we need ellipses. Just a question of whether that should be after one or two lines

Alternative: Keep it two-line, but change the fixed size of the header from 4em to, say, 5em (or 6em) - that way, we can hardcode that and all the buttons will stay centered, but on the other hand it will always be that size, and not expand when the title is long.

PS: Interesting, just by clicking on your checkboxes I edited your comment (afaik I can do that because I am the repo owner)

NeuroCPP commented 2 years ago

second solution seems fine to me but what it does is also annoying a little bit as the buttons now seem wobbly and it feels creepy somehow 😖..now i am tired i will do some more stuff later

NeuroCPP commented 2 years ago

PS: Interesting, just by clicking on your checkboxes I edited your comment (afaik I can do that because I am the repo owner) 😂

NeuroCPP commented 2 years ago

Alternative: Keep it two-line, but change the fixed size of the header from 4em to, say, 5em (or 6em) - that way, we can hardcode that and all the buttons will stay centered, but on the other hand it will always be that size, and not expand when the title is long.

yeah i was also thinking that why did this guy did not do it in the first place then , after thinking it over i understood why...

NeuroCPP commented 2 years ago

one small request can you assign me as for making a new theme for it as only dark doesn't seem that good(excluding 'light' as who keeps as a theme anyways) or should be said we want more themes in the mean time i am try some to make some contrast theme may look good and not very interruptive to the eyes

Seneral commented 2 years ago

one small request can you assign me as for making a new theme for it as only dark doesn't seem that good(excluding 'light' as who keeps as a theme anyways) or should be said we want more themes in the mean time i am try some to make some contrast theme may look good and not very interruptive to the eyes

Wdym assign? If you make an issue I can assign you. But yeah, some new themes could be fun, maybe some actual colored ones for accent. I agree that the light theme makes it very obvious that I didn't ever consider using it myself lol Actually I think next to high contrast, the existing light theme could be the base for a range of accented themes (basically just multiplying the light theme with one or two accent colors)

Seneral commented 2 years ago

Fixed in 2d9361b along with some other small design changes and fixes Made it so it shows one line with fixed 4em when collapsed, and two lines with variable space when expanded. Hope that works for you? One thing I could have tried is to not limit it to two lines when expanded at all, though that'd be a weirdly long title anyway. Not needed I'd say.

Seneral commented 2 years ago

Feel free to open an issue for the themes