hulkrelax/hltb-for-deck

Overlapping divs when using clean gameview theme

Closed this issue · 7 comments

The How long to beat section overlaps the Play bar when using the clean game view theme.

I'm not sure I can address this tbh. I can't code against every css loader theme. What happens when I fix it for this theme but then I get a request to fix it for another theme and then fixing that breaks it for the clean theme again. And then what happens when all these changes break it for the vanilla ui? I'm open to suggestions but I don't see how I could accommodate for every theme

I don't use css loader, could you send a screenshot so I know what this looks like?

Ill attach a screenshot when i get home. Yeah i get that you cant work around every theme but you should be able to inject your div relative to another existing ui element so it scales with different screen sizes and when themes hide or move elements. Ive had these issues with some of my themes like the minimal lock screen. Especially when accounting for different monitor sizes when docked.

By the way the plugin is really cool. I was working on the same thing but got sidetracked with work. I was pleasently surprised to see that you had made it.

I ended up installing CSS Loader and the clean game view theme to see what it looked like.

FWIW, my element is positioned relative to another ui element. It's not absolutely positioned. In the DOM, it's placed right above the component that has the play button. It also works in 4K resolution I believe since I've used my Steam Deck in docked mode on my TV.

I can try to tinker more with the CSS but I think that with CSS Loader potentially changing things so significantly I'm just not sure what I can do. Granted I'm not a CSS guru so I could be wrong. I can just imagine there are situations where a css loader theme overrides things in such a way that would make it really difficult to account for. If a theme for example were to remove the cover art for a game but I wanted my element to be positioned somewhere on top of it, I would also have to modify the CSS to unhide the cover art and we would just be fighting each other. There would also be no way for me to know that the image was going to be hidden.

Yeah you could do a calc to set the height of the div based on where the play button div is actually rendered. But i see you add unique classes and stuff so worst case scenario i can write a quick theme to line it up. No issues from me if you want to keep it as is just thought id bring it up

It would be nice to see this fixed. If not in this plugin, maybe in a CSS Loader theme like @joamjoamjoam suggested? I don't want to give up either one of the plugin/theme to be able to use the other, and im sure I'm not the only one.

I have resolved this in version 1.1.0. I've made a PR to the Decky Loader store. You can view that PR here. When it merges, it will be released to the store. If you don't want to wait, you can download the plugin from my latest release. Just download hltb-for-deck.zip and unzip to the plugins folder.

The new styles are as follows:
"Clean" -- This style is basically the best looking style for Clean Gameview.
Clean

"Clean" Left -- Similar to "Clean" but on the left side
Clean  Left

"Clean" Default -- Similar to the "Default" style of this plugin but compatible with the Clean Gameview theme.
Clean  Default

You can change the style of this plugin in the Decky Loader tab of QAM.

If you have any other styles you'd like to see or other features, let me know.