Site redesign

[feross]

[jakefb]

I could help with this if would like. I have experience with Bootstrap and CSS. I think the website should be kept simple for the time being, but should look a bit prettier :)

[quicoto]

+1

[harrisjose]

I'd like to take this on if no one else is on it. :) I'm just getting started out with css and jquery [and new around here] so definitely gonna need lots of help.

uh and i've messing around with this for the last couple of hours.. ;)

https://github.com/harrisjose/instant.io/tree/redesign

[alxhotel]

+1

[quicoto]

Sweet!

[feross]

Nice! Can you send a PR? This is way better than what we got now :+1:

But make sure you find some way to add back the "download from infohash" text input. Maybe a small link that enables the text input?

[harrisjose]

Yeah Im working on the download part... One thing i cant decide on is : where and how do i put the log ?

and btw anyone have a suggestion for the icon instead of the rocket ?

[harrisjose]

Added footer and a link that shows a text input and button for 'download from infohash'

@feross I have a few questions. Do I email you or ask here?

[feross]

You can ask here. On Sun, Jun 14, 2015 at 9:48 AM Harris Jose [email protected] wrote:

Added footer and a link that shows a text input and button for 'download from infohash' [image: 2015-06-14 20_52_40-instant io - streaming file transfer over webtorrent] https://cloud.githubusercontent.com/assets/10582112/8149499/c8e740ba-12e2-11e5-85b1-d2eaaee27b08.png

@feross https://github.com/feross I have a few questions regarding this. Do I email you or ask here?

— Reply to this email directly or view it on GitHub https://github.com/feross/instant.io/issues/17#issuecomment-111849044.

[harrisjose]

1. The css files have to be put in the 'css' folder right ? or do i put them in views along with the jade files. I use skeleton.css and normalize.css
2. Why is the page split into layout.jade and index.jade ? why cant it be all in one file..

[feross]

1. Yes.
2. You can get rid of layout.jade and just use index.jade if you want. The code was lifted from another site where there was a core layout that was reused across pages. But for instant.io, we only have one page.

[harrisjose]

I'm sorry for the delay, but i'm having a pretty hard time getting instant.io up and running on my system..will try to send pr as soon as possible.

[countlurk]

Any progress with this? @harrisjose? it's been awhile...

[joshterrill]

I can take a stab at it tonight. It wouldn't be too hard to recreate this. I'll post what I come up with some time tomorrow.

[rileyjshaw]

I'm not convinced that the proposed design actually improves the interface. Biggest concern is that there's no longer a text input for the info hash..?

I'd be happy to give it a go, but don't want to step on @joshterrill or @harrisjose's toes. Ping me if I can help out.

[joshterrill]

Doesn't matter to me :)

On Mon, Oct 19, 2015 at 4:21 PM, Riley Shaw [email protected] wrote:

I'm not convinced that the proposed design actually improves the interface. Biggest concern is that there's no longer a text input for the info hash..?

I'd be happy to give it a go, but don't want to step on @joshterrill https://github.com/joshterrill or @harrisjose https://github.com/harrisjose's toes. Ping me if I can help out.

— Reply to this email directly or view it on GitHub https://github.com/feross/instant.io/issues/17#issuecomment-149374482.

Josh Terrill // developer

[rileyjshaw]

Alright! I'll work on a re-redesign in my spare time. I've got a busy month coming up, so you might want to just go ahead with the existing design. I don't want to block this issue, so I'll create a new PR if/when I get around to it :)

[joshterrill]

Sounds good. For now, I'll fork the repo and continue with what I was going to do, then you can just make your changes when you get around to it.

On Tue, Oct 20, 2015 at 1:01 AM, Riley Shaw [email protected] wrote:

Alright! I'll work on a re-redesign in my spare time. I've got a busy month coming up, so you might want to just go ahead with the existing design. I don't want to block this issue, so I'll create a new PR if/when I get around to it :)

— Reply to this email directly or view it on GitHub https://github.com/feross/instant.io/issues/17#issuecomment-149468621.

[Danita]

Is there anybody still working on this issue? Because I just discovered instant.io and it seemed to me that a redesign could make it more approachable and I wanted to contribute in my spare time. I have some questions:

• I set up the repo for development but I cannot find the way to make the watch task to watch for changes on the jade files. EDIT: Nevermind, I just discovered the watch task doesn't auto refresh the page, so a manual F5 it's all what's needed to see the changes.
• Is there any specific need to use jade and stylus instead of plain HTML/CSS?

Thanks!

[robrobinbin]

I also just discovered instant.io and webtorrent in general (I heard of it before, but didn't understand it).

instant.io is awesome as a tech demo, but the basic lay-out makes a bit confusing. I wouldn’t use this site in it current form to share files with my friends. I'll briefly describe the drawbacks I have, maybe it can help you guys when you're changing the theme.

I'm using Firefox. Imagine I send a video to my pal. The first couple of seconds he sees this:

Which is confusing. It would be nice if they was some kind of big central theatre view with a spinning wheel saying something is being downloaded. "Start seeding" and "Start downloading (something else)" should be nice buttons somewhere in the side/header/bottom, out of your way.

Than we see this:

At this moment we can begin watching the file (yup, the white rectangle is the video), but in Firefox there isn't anyway we would know that. There isn't any way to safe the video either, even when progress reaches 100% (right click doesn't work). When watching media the technical information (peers, progress, up, down) should be less prominent.

When you have a torrent with multiple files I think it would be useful to have two panes, the left one with the list of files (and progress per file). When you click on a file, a preview + download button appears on the right pane. Now we first have the list of files, than all the preview thrown underneath and than the download links

[rileyjshaw]

I should have posted an update here earlier – I'm no-longer working on this :disappointed:

[harrisjose]

I'm sorry for not updating the status sooner, but I never could get it working with the changes I made. I was a complete noobie to node and jade when i started working on this. Probably shouldn't have taken it on.

[agenestar]

Is anybody working on the redesign? Have anybody done a psd with the desired design?

[robrobinbin]

I'm not working on a functioning design, but I made a very rough mock-up.

I think some kind of tabbed structure would be nice.

Pressing the "+" on the side summons a pop-up more or less like this (but more polished)

A polished version of the "Start sharing" and "Start downloading" sections would also be present on the landing page.

[ganezdragon]

This seems to be still open. I can work on the re-design in my spare time. I could do it in reactjs. @feross does that sound okay? If so, I could do it, and raise a pull request.

[davidak]

@ganezdragon have you considered Vue? It seems already more popular than React (at least from GitHub stars and many blog posts).

[ganezdragon]

@davidak Yea I could try Vue. But is the site redesign ticket still open? The repo owner mentioned here to ask for feedback before spending time on coding.