iOS7 interface [Update V2] [Download]

[MichielDor]

Hi there,
I made an updated retina version of the web interface for iPhones.
Leave a comment if this is something you would like to see more of or have any feedback.

Features
- Custom icons
- Less CSS/images, faster
- Splash screen & custom web clip icon
- Shorter home screen name "Transmission"
- iOS Blue and Transmission Red versions
- Responsive design (works in all orientations and on all devices now)
and many more...

Instructions
1 Download and unzip
2 Locate the "web" folder inside your Transmission program files ("Show package contents > Contents > Recources" on Mac)
3 Backup and replace the entire folder with the provided "web" folder

Download
http://bit.ly/TransmissionBlue
http://bit.ly/TransmissionRed

Changelog for Version 2
- Now works in both orientations
- Desktop gets it's own design back
- Red and Blue version
- Responsive (so it also works on the desktop too, if you duplicate mobile.css to replace common.css)
- Fixed some icons getting stretched out so it's pixel perfect now
- iOS statusbar in "home screen web app" version now properly shows the time and signal dots
- All images/CSS are now optimised to only 26kb (in stead of desktops 62kb)
- "Info" icons are a little easier to touch
- Resume icon is new. "Closed" triangle to match the pause icon
- Fixed that annoying horizontal scrolling (Page always seemed 10 pixels too wide, resulting in scrolling left and right)
- Toolbar and footer are now sticky to the browser
- Making sure people know I love "Big Buck Bunny"

Screenshots

[livings124]

Awesome!

[John Clay]

That looks fantastic.

[MichielDor]

Thank you!

I'll continue developing then
Any ideas would be greatly appreciated!

Some ideas:
- Trying a (transmission) red variation
- Fixing the horizontal orientation
- "Mounting" the top and bottom bar to the window so the don't scroll when you do (should also fix the bottom bar for iPhone 4/4S etc.)
- Updating the settings to look a little more iOS 7
- Making the "info" buttons a little more touchable size
- Custom home screen icon
- CSS/HTML/Java compression and other optimisations
- Look into some local storage, seeing as how the app already functions if you lose connection
- Locking the horizontal scrolling (had issues with the original too, and in first development round for this theme)

Also:
- A Status Board (by Panic) version for iPad? Would be great to throw your downloads up on the big screen

[livings124]

Sounds great! Would you consider developing the current, full web client?

[MichielDor]

Sure!

I love the full version, use it all the time. I'd love to work on that!
Just tell me what you would like to see done

[MichielDor]

V2 is live. Enjoy!

[livings124]

Great! There's a whole bunch of tickets at https://trac.transmissionbt.com/query?s ... Web+Client, plus the whole ui needs a lot of love. The web interface has been neglected because of a lack of developer for quite some time.

[Exp]

V2 is live. Enjoy!

Very elegant work!
I hope it gets included in the next Transmission update!!!
Using it now. It might need a little work on the iPad.

[MichielDor]

V2 is live. Enjoy!

Very elegant work!
I hope it gets included in the next Transmission update!!!
Using it now. It might need a little work on the iPad.

Thank you!
I don't own an iPad, but would love to do a 2-pane version (responsive, so you can still use it on your iPhone/Desktop of course). I'll see what I can do

Also, for people interested, I'm working on version 2.1 (of this theme) including:
- Using the delete button to delete a torrent from the list (only on your desktop off course)
- Embedding the necessary UI elements into the CSS files so you get even faster loading (less files = less time loading)
- A desktop version of the interface (in your OSX menubar) like this:



And a tip for people using a NAS (I'm using an old 2009 ReadyNas Duo),
this theme works great on that running the latest Transmission. And considerably improves speed when loading in my experience.

[Exp]

Please keep us updated on your project, I just love your work!
Looking forward to 2.1.

[MichielDor]

Please keep us updated on your project, I just love your work!
Looking forward to 2.1.

Will do!

[MichielDor]

Here's a little preview for whats coming in 2.1
- Fixing the scrolling when in compact view (only occurs when the page is longer than the device)
- Integrated UI elements into CSS for faster loading (Base64)
- Inspector fix, sometimes it has some crazy padding on top
- Other small fixes and updates

Version 3: Aurora
- Custom iPad interface
- Updated and sharper icons for non-retina devices
- Instructions for NAS devices
- (Maybe) Transparency for the top bar like native iOS7 apps have
- iPad App Statusboard support (by Panic) http://panic.com/statusboard/
- (Maybe) Save to home screen popup like many websites have
- (Maybe) Animations (Yes, you read that correctly)
- Even better home screen icon, current one still looks like iOS6 in my opinion
- Fix for the splash screen
- Desktop version, using Fluid http://fluidapp.com
- Anything YOU can come up with, I'll implement!

Again, comments equals updates (Any response is greatly appreciated. Critical feedback, bugs, feature requests, etc. all get implemented/fixed).

[Exp]

I'm just sorry no one is visiting this thread, can't believe I'm the only one. ;-(
Any thoughts on the code signing problem? Every time I restart Transmission, I have to re-allow the firewall prompt. I guess until it's integrated into Transmission, code signing will be a problem.
All your ideas for Aurora sound good!

[MichielDor]

I'm just sorry no one is visiting this thread, can't believe I'm the only one. ;-(
Any thoughts on the code signing problem? Every time I restart Transmission, I have to re-allow the firewall prompt. I guess until it's integrated into Transmission, code signing will be a problem.
All your ideas for Aurora sound good!

I agree, it's not like i'm looking for any buzz or anything. I just see 167 downloads and think it's a shame if people don't provide any feedback. It's not like I'm charging for this or anything

Also, does that code signing happens with the "regular" transmission web interface too? And what setup do you have (running transmission from a mac/pc/nas/etc.)?