#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:
Change History (26)
comment:1 Changed at 2012-04-10T04:51:02Z by tarcieri
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:
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
comment:18 follow-up: ↓ 19 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.
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: ↓ 22 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:
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
Screenshot of the actual version in the pull request available here:
http://i.imgur.com/tf1iJ.png