#1713 closed enhancement (fixed)

redesigned welcome page

Reported by: tarcieri Owned by: davidsarah
Priority: normal Milestone: 1.10.0
Component: code-frontend-web Version: 1.9.1
Keywords: wui welcome aesthetics html standards review-needed Cc:
Launchpad Bug:

Description

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

Change History (26)

comment:1 Changed at 2012-04-10T04:51:02Z by tarcieri

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

Version 0, edited at 2012-04-10T04:51:02Z by tarcieri (next)

comment:2 Changed at 2012-04-10T04:56:48Z by jg71

I like it :thumbs-up:

comment:3 Changed at 2012-04-10T16:08:19Z by davidsarah

  • Keywords wui welcome aesthetics design-review-needed added
  • Summary changed from Twitter Bootstrap-based welcome page to redesigned welcome page
  • Version changed from n/a to 1.9.1

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.)

comment:4 Changed at 2012-04-11T02:31:05Z by tarcieri

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 ;)

comment:5 Changed at 2012-08-10T20:05:25Z by tarcieri

  • Owner set to tarcieri
  • Status changed from new to assigned

comment:6 Changed at 2012-11-09T18:14:49Z by davidsarah

  • Keywords review-needed added; design-review-needed removed
  • Owner changed from tarcieri to davidsarah
  • Status changed from assigned to new

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

comment:7 Changed at 2012-11-09T18:32:39Z by tarcieri

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

comment:8 Changed at 2013-01-31T16:28:35Z by warner

  • Owner changed from davidsarah to warner

comment:9 Changed at 2013-01-31T16:29:39Z by warner

  • Milestone changed from undecided to 1.10.0

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

comment:10 Changed at 2013-01-31T16:37:15Z by amiller

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.

comment:11 Changed at 2013-03-14T23:45:41Z by davidsarah

  • Owner changed from warner to davidsarah
  • Status changed from new to assigned

I'm currently rebasing this and fixing tests.

comment:12 Changed at 2013-03-15T01:54:30Z by davidsarah

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.)

comment:13 Changed at 2013-03-15T01:57:04Z by davidsarah

  • Owner davidsarah deleted
  • Status changed from assigned to new

comment:14 Changed at 2013-03-15T02:02:49Z by davidsarah

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

comment:15 Changed at 2013-03-15T02:24:24Z by davidsarah

  • Keywords html standards added

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.

comment:16 Changed at 2013-03-15T02:30:05Z by davidsarah

Hmm, this was a bug:

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

Now fixed.

comment:17 Changed at 2013-03-15T04:57:51Z by davidsarah

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

comment:18 follow-up: Changed at 2013-03-15T19:56:57Z by davidsarah

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).

comment:19 in reply to: ↑ 18 Changed at 2013-03-15T20:52:26Z by davidsarah

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 1931#comment:13.

Last edited at 2013-03-17T17:19:33Z by davidsarah (previous) (diff)

comment:20 Changed at 2013-03-15T20:53:34Z by davidsarah

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.

comment:21 follow-up: Changed at 2013-03-17T17:20:58Z by davidsarah

  • Owner set to davidsarah
  • Status changed from new to assigned

Landed in 709be93a. \o/

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

comment:22 in reply to: ↑ 21 Changed at 2013-03-19T03:31:44Z by davidsarah

Replying to davidsarah:

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

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

comment:23 Changed at 2013-03-19T05:45:29Z by davidsarah

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

comment:24 Changed at 2013-03-19T07:31:25Z by David-Sarah Hopwood <david-sarah@…>

In 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@…>

comment:25 Changed at 2013-03-20T00:16:02Z by warner

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

comment:26 Changed at 2013-04-18T20:56:50Z by sickness

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

Note: See TracTickets for help on using tickets.