WebUI CSS Hacking Responsive / Mobie UI Features

Suggestions and discussion of future versions
Post Reply
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

Since the current web UI is very hard to use on small screen devices I decided to look into what could be done.. Unfortunately the way the UI is generated it is full of table elements and code that forces inline styles, this makes any layout changes a major programming effort, or a hack.. For the sake of time I went with HACK.

My first goal was to make the main screen actually viewable.. I trimmed down the header buttons to icons, and made the icons bigger for fingers.. I cleared out the list to JUST the torrent name, leaving the details to the tabs that can be hidden at the bottom.

I suspect that someone with better CSS experience than me could do a better job, but it does help to remove elements when the horizontal screen space gets too small to display it.
mobilecss.png
mobilecss.png (45.91 KiB) Viewed 10228 times
index.html (add the viewport meta tag to prevent device zooming / scaling)

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
edit web.conf to change your theme and put the following in your ui\web\themes\css folder with the other themes.
remove the .txt extention (the forum does not allow attaching .css)
xtheme-response.css.txt
(2.57 KiB) Downloaded 537 times
Edit: the theme css file now only contains the over rides, it imports the gray theme css file.
Last edited by Lazybones on Sun Jul 13, 2014 8:30 am, edited 2 times in total.
Cas
Top Bloke
Top Bloke
Posts: 3679
Joined: Mon Dec 07, 2009 6:04 am
Location: Scotland

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Cas »

Have you tried creating a theme and setting it in web.conf?
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

I was going to try that after messing around to see if I could even override the layouts inline styles which normally take priority over style sheets.
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

Cas wrote:Have you tried creating a theme and setting it in web.conf?

Seems to work, updated my directions...

I originally chose the delgue.css as it is the LAST to load, however the CSS !important; directive seems to work UNLESS deluge.css contains an attribute that also has !important;
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

I have made some more edits.. I have opted to hid things that are just plain broken.. The list now is the normal list with only some size tweaks... On small screens I remove the filter options but keep the tab toggle at the bottom of the screen..
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

Due to the lack of comments I guess I am the only one that likes to check torrent status on his phone... This hack mostly works for me.... Have to collapse the filters and the tabs the first time you connect but after that everything fits on the screen fairly well and it is possible to stop and remove torrents as well as scroll through them.

A change to the actual code would be needed to take away a number of re-sizing glitches that happen and higher res icons should be used in a few places.
m3th1dz
New User
New User
Posts: 2
Joined: Tue Nov 20, 2012 4:53 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by m3th1dz »

Thanks for this. I've been trying to figure out how to do this for awhile now.
Lazybones
Leecher
Leecher
Posts: 62
Joined: Sat Dec 31, 2011 11:00 pm

Re: WebUI CSS Hacking Responsive / Mobie UI Features

Post by Lazybones »

m3th1dz wrote:Thanks for this. I've been trying to figure out how to do this for awhile now.

After using it for a while, I would like to add the filter bar back, although you can still trigger it from the side of the screen some times..

I am currently running Deluge along side another torrent client again, so I am not sure how much more effort I will put into this (web interface and seeding performance is better on the other client for me, only running deluge for one tracker)... It is all now in a css file modifys layout so I think others with CSS knowledge could fix this up.
Post Reply