Quiks 15 Posted April 18, 2018 Share Posted April 18, 2018 (edited) Hi, I haven't done any Web App CSS before, but something I would really like would be the ability to scale down the size of the web client. It is definitely in a TV mode where you'd be able to see everything far away from the screen, but when I'm using it on a secondary monitor, it feels very crowded or overwhelming. I'd love to be able to scale it down ~50%. It'd be great if this were just a slider or setting in the UI, but I don't know if/when it would be implemented. Is this something I can achieve with CSS? Scale the images to 50%, but keep the text the same size? If the above is possible, is it possible to make a slider for scaling to a desired size from (25-200% maybe) in CSS? I assume this one probably won't be possible. Edited April 18, 2018 by Quiks Link to comment Share on other sites More sharing options...
Luke 36879 Posted April 18, 2018 Share Posted April 18, 2018 Hi, the web app is not in TV mode. What you can try doing is adjusting your browser zoom setting. Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 (edited) Hi, the image size does get smaller, but I can't get to my desired size even at 25% and the text becomes unreadable. What I meant by tv mode, is that it's optimized in a way that is easier to view from sitting further away. From a Maximized browser window, where i'm < 1 foot away from the screen, it's pretty huge. If you click on my below picture, you can see how it's scaled on a 22 inch monitor at 1920x1080. The size of the banners/posters are unnecessarily large when close to a screen. I don't see a problem with this view being the default, but it'd be nice to be able to change it in some way. Normal Size The image size also doesn't scale to the same ratio as the text. The image size went down a little bit, but not even to where i'd want it eventually. at 25%, it looks like the image went down to 66% the size or so. 25% size This is at 25% and the images still aren't as small as I'd like them on my browser window. If I resize my browser window, I can get it to about the size i'd want, but i'd like to be able to do this independent of my window size because as it is, it's very large on a 22 inch screen when maximized. Also, zooming out makes the text completely illegible, not to mention any UI elements or administrative interface. 25% size browser window re-sized. Edited April 18, 2018 by Quiks Link to comment Share on other sites More sharing options...
Luke 36879 Posted April 18, 2018 Share Posted April 18, 2018 In the future we'll probably add font size adjustment settings. Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 Is there no chance to just have a scalable slider in the UI or setting option. It seems kind of silly to have to scale the browser window and then adjust the text size after (if you added that setting). Maybe it's just me, but it feels like it should be built in rather than worked around. Also, is there no css option to adjust the home screen image size? Thanks for the replies. I really do appreciate it. Link to comment Share on other sites More sharing options...
Luke 36879 Posted April 18, 2018 Share Posted April 18, 2018 We already have a custom case feature and there is a section in the community where people have posted what they've come up with. Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 (edited) Maybe my searching is lacking, but I can't seem to find it. Are we talking about the CoverArt plugin? Just so it's known, scaling the browser to 25% will likely never be a real option even with changing the text font size. every element becomes unusable and tiny. If the images scaled uniformly, it might help, but as it stands, they barely change in size compared to the rest of the UI. Edited April 18, 2018 by Quiks Link to comment Share on other sites More sharing options...
Luke 36879 Posted April 18, 2018 Share Posted April 18, 2018 In general server settings there is a custom css section. Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 (edited) Oh, right. I think you typo'd it to "custom case feature". That makes more sense. Yeah, that's why I opened this thread. I think I created it in the correct spot. I wanted to see if there were any css options to scale the size of the home screen images down as I have never worked with custom css before and wouldn't know where to begin myself. Thanks in advance if anyone can point me in the right direction on this! Edited April 18, 2018 by Quiks Link to comment Share on other sites More sharing options...
Solution Happy2Play 8139 Posted April 18, 2018 Solution Share Posted April 18, 2018 Something like this? Just need to adjust the scaling to your needs. /* My Media Image Size */ #homeTab .smallBackdropCard { width: 14%;} #homeTab .overflowBackdropCard { width: 14vw;} #homeTab .overflowPortraitCard, .overflowSquareCard { width: 10vw; } 2 Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 (edited) Awesome! Thanks Happy! You're a life saver. With regards to the numbers, are each of those a type of image? overflowportraitcard = poster? overflowbackdropcard = ? smallbackdropcard = thumb? What are the original values? Is there an easy way to apply this to all the others views in the interface? for instance, when scrolling through movies or tv shows. Edited April 18, 2018 by Quiks Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted April 18, 2018 Share Posted April 18, 2018 Awesome! Thanks Happy! You're a life saver. With regards to the numbers, are each of those a type of image? overflowportraitcard = poster? overflowbackdropcard = ? smallbackdropcard = thumb? What are the original values? Is there an easy way to apply this to all the others views in the interface? for instance, when scrolling through movies or tv shows. It depends on your resolutions as there are multiple default values. You can use your browser console to inspect each element. overflowportraitcard = poster? yes overflowbackdropcard = ? other rows thumb smallbackdropcard = thumb? My media row thumb /*All portrait view and music*/ .portraitCard, .squareCard { width: 10% !important; } /*Thumb views*/ .backdropCard { width: 15% !important; } 1 Link to comment Share on other sites More sharing options...
Quiks 15 Posted April 18, 2018 Author Share Posted April 18, 2018 You are the best. Thanks a lot! Link to comment Share on other sites More sharing options...
Chyron 221 Posted February 4, 2019 Share Posted February 4, 2019 (edited) . Edited February 4, 2019 by chyron8472 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now