WUI: niggles in the new Welcome page #1931

New Issue

tahoe-lafs · 2013-03-15T00:36:50Z

davidsarah commented

2013-03-15 00:36:50 +00:00

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

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

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:91192](/tahoe-lafs/trac-2024-07-25/issues/1931#issuecomment-91192)). These also existed in the previous Welcome page: * If there is only one storage server, then "Connected to 1 of 1 storage server*s*" 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

tahoe-lafs added the

labels 2013-03-15 00:36:50 +00:00

tahoe-lafs added this to the undecided milestone 2013-03-15 00:36:50 +00:00

davidsarah commented

2013-03-15 01:24:04 +00:00

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

davidsarah commented

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

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 commented

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

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

davidsarah commented

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

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

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 commented

2013-03-15 02:40:06 +00:00

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

davidsarah commented

2013-03-15 02:41:37 +00:00

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 commented

2013-03-15 02:50:20 +00:00

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.

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 commented

2013-03-15 19:24:51 +00:00

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.

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 commented

2013-03-15 19:30:35 +00:00

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 commented

2013-03-15 19:36:11 +00:00

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

davidsarah commented

2013-03-15 19:38:30 +00:00

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

davidsarah commented

2013-03-15 20:47:29 +00:00

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.

Replying to [davidsarah](/tahoe-lafs/trac-2024-07-25/issues/1931#issuecomment-91187): > 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 commented

2013-03-15 20:49:55 +00:00

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

gdt commented

2013-03-28 11:53:26 +00:00

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 commented

2013-03-29 18:41:55 +00:00

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?

Replying to [gdt](/tahoe-lafs/trac-2024-07-25/issues/1931#issuecomment-91190): > 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 commented

2013-04-18 21:10:58 +00:00

sickness wrote in /tahoe-lafs/trac-2024-07-25/issues/6745#comment:-1:

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

sickness wrote in [/tahoe-lafs/trac-2024-07-25/issues/6745](/tahoe-lafs/trac-2024-07-25/issues/6745)#[comment:-1](/tahoe-lafs/trac-2024-07-25/issues/1931#issuecomment--1): > 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 commented

2013-05-09 16:12:20 +00:00

To fix the introducer furl wrapping, add:

.furl {
  word-wrap: break-word;
}

To the existing ".furl" CSS selector

To fix the introducer furl wrapping, add: .furl { word-wrap: break-word; } To the existing ".furl" CSS selector

tarcieri commented

2013-05-09 16:18:10 +00:00

This is somewhat helpful with the sidebar:

.sidebar-nav {
    min-width: 250px;
}

This is somewhat helpful with the sidebar: .sidebar-nav { min-width: 250px; }

zooko commented

2013-08-30 21:44:10 +00:00

See also somewhat related new ticket: #2070.

tahoe-lafs modified the milestone from undecided to 1.11.0

2013-09-01 05:28:41 +00:00

Daira Hopwood <daira@jacaranda.org> commented

2013-12-28 13:48:03 +00:00

In /tahoe-lafs/trac-2024-07-25/commit/d2514e995dff2b2a8d88541146ae9c00b1d5636b:

Merge pull request #81 from multikatt/right_align

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

In [/tahoe-lafs/trac-2024-07-25/commit/d2514e995dff2b2a8d88541146ae9c00b1d5636b](/tahoe-lafs/trac-2024-07-25/commit/d2514e995dff2b2a8d88541146ae9c00b1d5636b): ``` Merge pull request #81 from multikatt/right_align Right-align the services div on the WUI Welcome page, to address overlap. refs #1931 ```

warner commented

2014-09-02 18:24:07 +00:00

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.

warner self-assigned this 2014-09-02 18:24:07 +00:00

Brian Warner <warner@lothar.com> commented

2014-09-02 20:47:17 +00:00

In /tahoe-lafs/trac-2024-07-25/commit/7015f21e5a359ce55db3b4e81cbbb556b5759386:

welcome page: improve CSS slightly for narrow windows

Thanks to tarcieri for the patch.

refs ticket:1931

In [/tahoe-lafs/trac-2024-07-25/commit/7015f21e5a359ce55db3b4e81cbbb556b5759386](/tahoe-lafs/trac-2024-07-25/commit/7015f21e5a359ce55db3b4e81cbbb556b5759386): ``` welcome page: improve CSS slightly for narrow windows Thanks to tarcieri for the patch. refs ticket:1931 ```

warner commented

2014-09-02 20:47:56 +00:00

CSS looks fine, reassigning to daira for 1.12

warner modified the milestone from 1.11.0 to 1.12.0

2014-09-02 20:47:56 +00:00

warner commented

2016-03-22 05:02:25 +00:00

Milestone renamed

warner modified the milestone from 1.12.0 to 1.13.0

2016-03-22 05:02:25 +00:00

warner commented

2016-06-28 18:17:14 +00:00