#1931 new defect

WUI: niggles in the new Welcome page

Reported by: davidsarah Owned by: daira
Priority: normal Milestone: soon
Component: code-frontend-web Version: 1.9.2
Keywords: welcome wui aesthetics usability unfinished-business Cc:
Launchpad Bug:

Description (last modified by tarcieri)

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

Change History (31)

comment:1 Changed at 2013-03-15T00:38:09Z by davidsarah

  • Description modified (diff)

comment:2 Changed at 2013-03-15T01:24:04Z by davidsarah

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

comment:3 Changed at 2013-03-15T01:30:09Z by 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.

comment:4 Changed at 2013-03-15T02:01:30Z by davidsarah

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

comment:5 Changed at 2013-03-15T02:06:15Z by 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.)

Last edited at 2013-03-15T02:09:30Z by davidsarah (previous) (diff)

comment:6 Changed at 2013-03-15T02:40:06Z by davidsarah

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

comment:7 Changed at 2013-03-15T02:41:37Z by 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.

comment:8 Changed at 2013-03-15T02:50:20Z by 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.

comment:9 Changed at 2013-03-15T19:24:51Z by 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.

Last edited at 2013-03-15T19:28:03Z by davidsarah (previous) (diff)

comment:10 Changed at 2013-03-15T19:30:35Z by 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).

comment:11 Changed at 2013-03-15T19:36:11Z by davidsarah

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

comment:12 follow-up: Changed at 2013-03-15T19:38:30Z by davidsarah

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

comment:13 in reply to: ↑ 12 Changed at 2013-03-15T20:47:29Z by 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.
Last edited at 2013-03-15T20:48:51Z by davidsarah (previous) (diff)

comment:14 Changed at 2013-03-15T20:49:55Z by davidsarah

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

comment:15 follow-up: Changed at 2013-03-28T11:53:26Z by 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.)

comment:16 in reply to: ↑ 15 Changed at 2013-03-29T18:41:55Z by 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?

comment:17 Changed at 2013-04-18T21:10:58Z by 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

comment:18 Changed at 2013-04-18T21:13:12Z by daira

  • Description modified (diff)

comment:19 Changed at 2013-04-18T21:22:01Z by daira

  • Description modified (diff)

comment:20 Changed at 2013-05-09T16:12:20Z by tarcieri

  • Description modified (diff)

To fix the introducer furl wrapping, add:

.furl {

word-wrap: break-word;

}

To the existing ".furl" CSS selector

comment:21 Changed at 2013-05-09T16:18:10Z by tarcieri

This is somewhat helpful with the sidebar:

.sidebar-nav {

min-width: 250px;

}

comment:22 Changed at 2013-08-30T21:44:10Z by zooko

See also somewhat related new ticket: #2070.

comment:23 Changed at 2013-09-01T05:28:41Z by daira

  • Keywords unfinished-business added
  • Milestone changed from undecided to 1.11.0

comment:24 Changed at 2013-12-28T13:48:03Z by 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

comment:25 Changed at 2014-09-02T18:24:07Z by warner

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

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.

comment:26 Changed at 2014-09-02T20:47:17Z by Brian Warner <warner@…>

In 7015f21e5a359ce55db3b4e81cbbb556b5759386/trunk:

welcome page: improve CSS slightly for narrow windows

Thanks to tarcieri for the patch.

refs ticket:1931

comment:27 Changed at 2014-09-02T20:47:56Z by warner

  • Milestone changed from 1.11.0 to 1.12.0
  • Owner changed from warner to daira
  • Status changed from assigned to new

CSS looks fine, reassigning to daira for 1.12

comment:28 Changed at 2016-03-22T05:02:25Z by warner

  • Milestone changed from 1.12.0 to 1.13.0

Milestone renamed

comment:29 Changed at 2016-06-28T18:17:14Z by warner

  • Milestone changed from 1.13.0 to 1.14.0

renaming milestone

comment:30 Changed at 2020-06-30T14:45:13Z by exarkun

  • Milestone changed from 1.14.0 to 1.15.0

Moving open issues out of closed milestones.

comment:31 Changed at 2021-03-30T18:40:19Z by meejah

  • Milestone changed from 1.15.0 to soon

Ticket retargeted after milestone closed

Note: See TracTickets for help on using tickets.