redesigned welcome page #1713

New issue

Closed

opened 2012-04-10 02:57:57 +00:00 by tarcieri · 23 comments

tarcieri commented

2012-04-10 02:57:57 +00:00

Owner

I've integrated the redesign of the welcome page I did using Twitter Bootstrap and it's actually mostly usable now. I submitted a pull request on Github here:

https://github.com/warner/tahoe-lafs/pull/5

There's still some work to be done to get all of the links working, and the Open URI box needs to be wired up, but the overall majority of the work is done and I think it's looking a lot nicer than the old version.

Here's an earlier work-in-progress screenshot. The version I'm submitting looks even nicer, IMO:

http://i.imgur.com/ftZ8W.png

I've integrated the redesign of the welcome page I did using Twitter Bootstrap and it's actually mostly usable now. I submitted a pull request on Github here: <https://github.com/warner/tahoe-lafs/pull/5> There's still some work to be done to get all of the links working, and the Open URI box needs to be wired up, but the overall majority of the work is done and I think it's looking a lot nicer than the old version. Here's an earlier work-in-progress screenshot. The version I'm submitting looks even nicer, IMO: <http://i.imgur.com/ftZ8W.png>

tahoe-lafs added the

labels 2012-04-10 02:57:57 +00:00

tahoe-lafs added this to the undecided milestone 2012-04-10 02:57:57 +00:00

tarcieri commented

2012-04-10 04:51:02 +00:00

Author

Owner

Screenshot of the actual version in the pull request available here:

http://i.imgur.com/tf1iJ.png

Screenshot of the actual version in the pull request available here: <http://i.imgur.com/tf1iJ.png>

jg71 commented

2012-04-10 04:56:48 +00:00

Author

Owner

I like it :thumbs-up:

daira commented

2012-04-10 16:08:19 +00:00

(I changed the ticket summary because it's not really relevant that the prototype was done using Twitter Bootstrap.)

I like the general layout. The file upload and directory creation functions seem to be behind links when they were previously on the welcome page. I know they were a bit ugly, but there's enough room for them and perhaps we can make them less ugly. (I changed the ticket summary because it's not really relevant that the prototype was done using Twitter Bootstrap.)

daira added

v/1.9.1

and removed

v/unknown

labels 2012-04-10 16:08:19 +00:00

daira changed title from ~~Twitter Bootstrap-based welcome page~~ to redesigned welcome page

2012-04-10 16:08:19 +00:00

tarcieri commented

2012-04-11 02:31:05 +00:00

Author

Owner

Yeah, treat anything you see as a concept that's easily changed. You can add another "well" in the Bootstrap terminology which contains the file upload form.

One of the nice things about Bootstrap is that it's extremely well documented, so getting all of the original features back and working again should be something anyone should be able to pull off, and if you use Bootstrap's idioms the visual design should end up looking pretty nice as well:

http://twitter.github.com/bootstrap/scaffolding.html
http://twitter.github.com/bootstrap/components.html

If no one will volunteer to do the rest of the work to get this all of the way there I can finish it up, but I was hoping someone would like it enough to get whatever remains to be done finished for me ;)

Yeah, treat anything you see as a concept that's easily changed. You can add another "well" in the Bootstrap terminology which contains the file upload form. One of the nice things about Bootstrap is that it's extremely well documented, so getting all of the original features back and working again should be something anyone should be able to pull off, and if you use Bootstrap's idioms the visual design should end up looking pretty nice as well: <http://twitter.github.com/bootstrap/scaffolding.html> <http://twitter.github.com/bootstrap/components.html> If no one will volunteer to do the rest of the work to get this all of the way there I can finish it up, but I was hoping someone would like it enough to get whatever remains to be done finished for me ;)

daira commented

2012-11-09 18:14:49 +00:00

New pull request from tarcieri: https://github.com/tahoe-lafs/tahoe-lafs/pull/19

New pull request from tarcieri: <https://github.com/tahoe-lafs/tahoe-lafs/pull/19>

tarcieri commented

2012-11-09 18:32:39 +00:00

Author

Owner

I redesigned the sidebar as follows:

http://i.imgur.com/1Epjv.png

I've also deleted all the script tags on the page as there were concerns about them (there was at least one script loading from a third party domain)

There's a couple concerns left:

There's a single test failure in test_web.py line 3087, in _after_get_welcome_page probably due to the altered markup
davidsarah noted that the file download input boxes aren't labeled properly more and look confusing

I redesigned the sidebar as follows: <http://i.imgur.com/1Epjv.png> I've also deleted all the script tags on the page as there were concerns about them (there was at least one script loading from a third party domain) There's a couple concerns left: 1) There's a single test failure in test_web.py line 3087, in _after_get_welcome_page probably due to the altered markup 2) davidsarah noted that the file download input boxes aren't labeled properly more and look confusing

daira was unassigned by warner

2013-01-31 16:28:35 +00:00

warner self-assigned this 2013-01-31 16:28:35 +00:00

warner commented

2013-01-31 16:29:39 +00:00

Looks awesome! I'm going to one last review pass and get this landed on trunk, where it will be included in 1.10.

warner modified the milestone from undecided to 1.10.0

2013-01-31 16:29:39 +00:00

amiller commented

2013-01-31 16:37:15 +00:00

I gave this interface a whirl and immediately learned about new features (like the timeline!) that I hadn't used before. And all the functionality I'm used to from the front-page is still intact. So +1 I really like this update and look forward to its integration, and also (additionally, not as a prerequisite) to this style being applied to the rest of the WUI pages.

daira commented

2013-03-14 23:45:41 +00:00

I'm currently rebasing this and fixing tests.

warner was unassigned by daira

2013-03-14 23:45:41 +00:00

daira self-assigned this 2013-03-14 23:45:41 +00:00

daira commented

2013-03-15 01:54:30 +00:00

https://github.com/tahoe-lafs/tahoe-lafs/commits/1713-bootstrapped-welcome-page

Please test for usability and regressions!

This adds back the Report Incident form, avoiding a regression pointed out by warner. It also removes the PNG icon files and bootstrap-responsive.css, which were unused, and it renames static/css/tahoe.css to new-tahoe.css to avoid confusion with the existing static/tahoe.css. (We may merge them at some point though.)

<https://github.com/tahoe-lafs/tahoe-lafs/commits/1713-bootstrapped-welcome-page> Please test for usability and regressions! This adds back the Report Incident form, avoiding a regression pointed out by warner. It also removes the PNG icon files and `bootstrap-responsive.css`, which were unused, and it renames `static/css/tahoe.css` to `new-tahoe.css` to avoid confusion with the existing `static/tahoe.css`. (We may merge them at some point though.)

daira removed their assignment 2013-03-15 01:57:04 +00:00

daira commented

2013-03-15 02:02:49 +00:00

Also see #1931 for possible aesthetic improvements (as opposed to functionality).

daira commented

2013-03-15 02:24:24 +00:00

The following CSS warnings are reported by Firefox 17:

Error in parsing value for 'background-image'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2203
Expected color but found 'top'.  Error in parsing value for 'background-image'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2204
Error in parsing value for 'filter'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2206
Expected end of value but found '	'.  Error in parsing value for 'background-color'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2220
Expected declaration but found '*'.  Skipped to next declaration. @ http://127.0.0.1:3456/css/bootstrap.css:2249
Unknown property '-moz-border-radius'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2307
Unknown property '-moz-border-radius-topleft'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2313
Unknown property '-moz-border-radius-bottomleft'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2316
Unknown property '-moz-border-radius-topright'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2322
Unknown property '-moz-border-radius-bottomright'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2325
Unknown property '-moz-box-shadow'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2360
Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'.  Ruleset ignored due to bad selector. @ http://127.0.0.1:3456/css/bootstrap.css:2946
Unknown property '-moz-background-clip'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3295
Unknown property 'box-sizing'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3733
Unknown property '-moz-background-size'.  Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3749
Unknown property '-moz-border-radius'.  Declaration dropped. @ http://127.0.0.1:3456/css/new-tahoe.css:39

Most of them appear to be relatively harmless uses of deprecated Mozilla-specific properties.

The following CSS warnings are reported by Firefox 17: ``` Error in parsing value for 'background-image'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2203 Expected color but found 'top'. Error in parsing value for 'background-image'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2204 Error in parsing value for 'filter'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2206 Expected end of value but found ' '. Error in parsing value for 'background-color'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2220 Expected declaration but found '*'. Skipped to next declaration. @ http://127.0.0.1:3456/css/bootstrap.css:2249 Unknown property '-moz-border-radius'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2307 Unknown property '-moz-border-radius-topleft'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2313 Unknown property '-moz-border-radius-bottomleft'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2316 Unknown property '-moz-border-radius-topright'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2322 Unknown property '-moz-border-radius-bottomright'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2325 Unknown property '-moz-box-shadow'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:2360 Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'. Ruleset ignored due to bad selector. @ http://127.0.0.1:3456/css/bootstrap.css:2946 Unknown property '-moz-background-clip'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3295 Unknown property 'box-sizing'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3733 Unknown property '-moz-background-size'. Declaration dropped. @ http://127.0.0.1:3456/css/bootstrap.css:3749 Unknown property '-moz-border-radius'. Declaration dropped. @ http://127.0.0.1:3456/css/new-tahoe.css:39 ``` Most of them appear to be relatively harmless uses of deprecated Mozilla-specific properties.

daira commented

2013-03-15 02:30:05 +00:00

Hmm, this was a bug:

GET http://127.0.0.1:3456/img/logo.png [HTTP/1.1 404 Not Found 2ms]

Now fixed.

Hmm, this was a bug: ``` GET http://127.0.0.1:3456/img/logo.png [HTTP/1.1 404 Not Found 2ms] ``` Now fixed.

daira commented

2013-03-15 04:57:51 +00:00

The branch has been rebased on top of the fixes for #1746 and #1775.

daira commented

2013-03-15 19:56:57 +00:00

The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed."). Should that be considered a blocker?

I tried forcing it into or out of Compatibility Mode but that didn't help (it's just the chicken you always have to wave in the air for any IE problem).

The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed."). Should that be considered a blocker? I tried forcing it into or out of Compatibility Mode but that didn't help (it's just the chicken you always have to wave in the air for any IE problem).

daira commented

2013-03-15 20:52:26 +00:00

Replying to davidsarah:

The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed.").

I was mistaken; see ticket:1931#comment:389466.

Replying to [davidsarah](/tahoe-lafs/trac/issues/1713#issuecomment-389471): > The new Welcome page does not work at all on Internet Explorer 8 ("This page cannot be displayed."). I was mistaken; see ticket:1931#[comment:389466](/tahoe-lafs/trac/issues/1713#issuecomment-389466).

daira commented

2013-03-15 20:53:34 +00:00

Having the connected/not-connected indicator be a red or green bullet without any change in text, is an accessibility regression for colourblind people, so I would like to fix that before the release.

daira commented

2013-03-17 17:20:58 +00:00

Landed in 709be93a. \o/

I will fix the accessibility problem mentioned in comment:389473.

Landed in [709be93a](https://github.com/tahoe-lafs/tahoe-lafs/commit/709be93a29e20026e61a436dac3fa1c160e9cef2). \o/ I will fix the accessibility problem mentioned in [comment:389473](/tahoe-lafs/trac/issues/1713#issuecomment-389473).

daira self-assigned this 2013-03-17 17:20:58 +00:00

daira commented

2013-03-19 03:31:44 +00:00

Replying to davidsarah:

I will fix the accessibility problem mentioned in comment:389473.

Please review: https://github.com/davidsarah/tahoe-lafs/commit/1713-accessibility.

Replying to [davidsarah](/tahoe-lafs/trac/issues/1713#issuecomment-389474): > I will fix the accessibility problem mentioned in [comment:389473](/tahoe-lafs/trac/issues/1713#issuecomment-389473). Please review: <https://github.com/davidsarah/tahoe-lafs/commit/1713-accessibility>.

daira commented

2013-03-19 05:45:29 +00:00

Fix for comment:389473 committed in 1f38c920. It still needs review.

Fix for [comment:389473](/tahoe-lafs/trac/issues/1713#issuecomment-389473) committed in [1f38c920](https://github.com/tahoe-lafs/tahoe-lafs/commit/1f38c920119aa66e83c0c06b1898a889c97ca623). It still needs review.

David-Sarah Hopwood <david-sarah@jacaranda.org> commented

2013-03-19 07:31:25 +00:00

Author

Owner

In changeset:1f38c920119aa66e:

New Welcome page: ensure 'not connected' status for Introducer and Helper is shown via text as well as bullet colour. refs #1713

Signed-off-by: David-Sarah Hopwood <david-sarah@jacaranda.org>

In changeset:1f38c920119aa66e: ``` New Welcome page: ensure 'not connected' status for Introducer and Helper is shown via text as well as bullet colour. refs #1713 Signed-off-by: David-Sarah Hopwood <david-sarah@jacaranda.org> ```

warner commented

2013-03-20 00:16:02 +00:00

That last fix looks fine. It seems slightly weird to have a rendering function delegate-to-self and then compare the result against a string (i.e. data_introducer_description() calls self.data_connected_to_introducer() and sees if the return value is "no". In the future, we should probably factor out an internal function that returns a boolean instead. But that code is cool for now.

That last fix looks fine. It seems slightly weird to have a rendering function delegate-to-self and then compare the result against a string (i.e. `data_introducer_description()` calls `self.data_connected_to_introducer()` and sees if the return value is `"no"`. In the future, we should probably factor out an internal function that returns a boolean instead. But that code is cool for now.

warner added the

r/fixed

label 2013-03-20 00:16:02 +00:00

warner closed this issue

2013-03-20 00:16:02 +00:00

sickness commented

2013-04-18 20:56:50 +00:00

Author

Owner

I'm trying the new welcome page web interface after downloading allmydata-tahoe-1.10b1.post1.zip

I've built the release and configured a simple 3 node introducer/storage/client on the same box just

to see how the new web interface is

first of all I noticed that the introducer interface still has the old style

then I've noticed that on firefox 20.0 on 1024x600 resolution lots of things overlap

screenshots of introducer, storage, client web interface provided

introducer http://www.pr0n.it/tahoeintroducer1.10b1.post1.png

storage http://www.pr0n.it/tahoestorage1.10b1.post1.png

client http://www.pr0n.it/tahoeclient1.10b1.post1.png

I'm trying the new welcome page web interface after downloading allmydata-tahoe-1.10b1.post1.zip I've built the release and configured a simple 3 node introducer/storage/client on the same box just to see how the new web interface is first of all I noticed that the introducer interface still has the old style then I've noticed that on firefox 20.0 on 1024x600 resolution lots of things overlap screenshots of introducer, storage, client web interface provided introducer <http://www.pr0n.it/tahoeintroducer1.10b1.post1.png> storage <http://www.pr0n.it/tahoestorage1.10b1.post1.png> client <http://www.pr0n.it/tahoeclient1.10b1.post1.png>

Rows
Columns