WUI: niggles in the new Welcome page

[davidsarah]

Here are the presentation niggles I've noticed in the new Welcome page (#1713):

• The red bullet for an unconnected introducer or helper may not indicate clearly enough that it is unconnected. I suggest, since this is an error condition, "Introducer not connected" or "Helper not connected" in large type. Fixed.
• The nickname and node ID at the top right may not be prominent enough; I didn't notice them at first.
• The left-hand sidebar could be narrower, or alternatively the fields could be extended to use its full width. This depends on the horizontal window size; for narrow windows the sidebar becomes too narrow for the fields.
• Some page elements overlap if the window size is too narrow (see comment:17).

These also existed in the previous Welcome page:

• If there is only one storage server, then "Connected to 1 of 1 storage servers" is ungrammatical.
• In the list of package versions, a package and its version can be broken across lines. The list could also be made easier to read by different styles for package and version number.
• 'Create a Directory' is an immediate operation. Should it have the » symbol indicating that? fixed

[davidsarah]

Also it might be better for the Report Incident form to be on a separate page.

[davidsarah]

When one of the buttons on the left is focussed (using Tab for example), the dotted line showing the focus overlaps the preceding text or control.

[davidsarah]

The text baseline of the Nickname and Node ID values is slightly below that of the field names (on Firefox 17.0).

[davidsarah]

This line is unnecessarily ugly:

Tahoe-LAFS code imported from: <module 'allmydata' from '/home/davidsarah/tahoe/git/tarcieri/src/allmydata/init.pyc'>

It could just be:

Tahoe-LAFS code imported from '/home/davidsarah/tahoe/git/tarcieri/src'.

(Note that the case of importing from a zip file should also be handled correctly.)

[davidsarah]

The Grid Status heading is a little close to the black top banner.

[davidsarah]

The section headings on the left panel are indented slightly more than the controls they refer to. That should probably be the other way around.

[davidsarah]

When the page is made narrower, it does not resize elegantly: the fields in the left panel protrude to the right, and information is lost from the right-hand columns of the server list. (The columns should instead size proportionally to the space available.)

When the page is printed, or if the user has forced backgrounds to white (for accessibility, say), the text of the Tahoe-LAFS logo does not show up because it is then white-on-white. Putting a black outline around the letters would fix this, and have no effect when displayed over the default black background.

[davidsarah]

In Opera 11.01 for Windows, the bullets show up as squares (for the Introducer and Helper) or slightly rounded squares (for the known servers). It looks fine, just cosmetic.

Also the incident text box is on the same line as the 'What went wrong?' caption, causing the text box and the Report button to protrude from the right of the panel.

[davidsarah]

In Safari 5.0.4 for Windows, the bullets are squares, otherwise no problems (apart from the Choose File button looking ugly, but I think that's because it isn't styleable at all).

[davidsarah]

Chrome 25.0.1364.172 looks pretty much identical to Firefox on Windows and Linux.

[davidsarah]

Last and most definitely least: Internet Explorer 8.0.6001.18702 on Windows only shows "The webpage cannot be displayed."

[davidsarah]

Replying to davidsarah:

Last and most definitely least: Internet Explorer 8.0.6001.18702 on Windows only shows "The webpage cannot be displayed."

I was mistaken (typing "127.0.0.1:3456" in the URL bar does not work, but typing "​http://127.0.0.1:3456" does).

Now it is just ugly on IE8:

• the whole right-hand column (starting from Grid Status) is laid out after the left panel
• there's a white gap at the top of the page, slightly thicker than the black banner
• the radio buttons are the whole width of the left panel, each above the corresponding label
• the buttons are styled flat and as wide as the panel
• 'Nickname' and 'Node ID' are almost invisible (very dark grey)
• the bullets are rectangular.

[davidsarah]

I think if the columns were laid out properly and 'Nickname' and 'Node ID' made visible, it would be acceptably usable on IE.

[gdt]

With an installed version of 1.10a2 (not running from source), the css files are missing. (Daira has apparently fixed this, but requested, perhaps before the fix, that I comment on the ticket.)

[daira]

Replying to gdt:

With an installed version of 1.10a2 (not running from source), the css files are missing. (Daira has apparently fixed this, but requested, perhaps before the fix, that I comment on the ticket.)

Actually I was referring to this:

• After installing, the main page of the WUI looks totally different, and overall it seems like a bit of a regresssion. The table formatting of connected nodes is awkward.

... but I don't know to what extent that was only due to lack of the .css files. How does it look with trunk?

[daira]

sickness wrote in 1713#comment:26:

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

[tarcieri]

To fix the introducer furl wrapping, add:

.furl {

word-wrap: break-word;

}

To the existing ".furl" CSS selector

[tarcieri]

This is somewhat helpful with the sidebar:

.sidebar-nav {

min-width: 250px;

}

[zooko]

See also somewhat related new ticket: #2070.

[Daira Hopwood <daira@…>]

In d2514e995dff2b2a8d88541146ae9c00b1d5636b/trunk:

Merge pull request #81 from multikatt/right_align

Right-align the services div on the WUI Welcome page, to address overlap. refs #1931

[warner]

I will land tarcieri's two recommended CSS changes and double-check that it doesn't break anything on FF/Chrome. Then I'll bump this ticket to 1.12 and reassign to daira for testing on IE (which I don't have). With luck these CSS changes will be enough to make IE work well enough that she can then close it.

[Brian Warner <warner@…>]

In 7015f21e5a359ce55db3b4e81cbbb556b5759386/trunk:

welcome page: improve CSS slightly for narrow windows

Thanks to tarcieri for the patch.

refs ticket:1931

[warner]

CSS looks fine, reassigning to daira for 1.12

[warner]

Milestone renamed

[warner]

renaming milestone

[exarkun]

Moving open issues out of closed milestones.

[meejah]

Ticket retargeted after milestone closed