add cosmetic improvements

[atreya2011]

Let me know if I broke something unexpectedly 🙇🏼 This is how it looks now. I ended up using Bulma because it was a bit easier to integrate as compared to Bootstrap. Resolves #2

[adonovan]

Thanks Atreya, it looks like you're off to a good start.

A few things I notice right off the bat:

• When the tool is invoked with multiple initial packages, they used to be displayed in a vertical list, but now they are separated by spaces, which runs off the page and is hard to read. Ideally, they would all be displayed vertically, with some kind of limit and scroll if there are lots of them.
• There are three typefaces (Garamond? for title and text, Courier? for code, and Lato for the tree). Let's see if we can reduce it to two or perhaps just one. It's not obvious to me that we must use a monospace face because the only "code" we show is package names, for which Lato works nicely. Perhaps that one face could be used throughout.
• The dense black blocks are a little terrifying. Let's use one of the shades of blue from the Go project's color scheme.

More generally, it would be nice to see the layout improved. I'm not a GUI designer, but I assume you are, and now that you understand how the application works and what it does, what do you think would make for the most natural and helpful appearance? Some ideas that spring to my mind:

• the captions could be reduced in size.
• the little (i) info widgets improved somehow. What is the state of the art for help text? Perhaps it could be displayed unconditionally, but discreetly in a small grey font.
• the dropdown menus could be aligned
• the whole "selected package" section could be made invisible when nothing is selected
• the break/break all/unbreak buttons could somehow be made into some kind of graphical buttons that looks like an edge being broken or restored.
• the first node in the broken edges table could be aligned with the second and subsequent.
• the link to the documentation should perhaps use this image instead of the Gopher.

[atreya2011]

Thanks Atreya, it looks like you're off to a good start.

Thank you for the detailed feedback 🙇🏼

A few things I notice right off the bat:

• When the tool is invoked with multiple initial packages, they used to be displayed in a vertical list, but now they are separated by spaces, which runs off the page and is hard to read. Ideally, they would all be displayed vertically, with some kind of limit and scroll if there are lots of them.

Can you give me examples of packages where the list contains multiple package names? This issue can easily be fixed 👍🏼

• There are three typefaces (Garamond? for title and text, Courier? for code, and Lato for the tree). Let's see if we can reduce it to two or perhaps just one. It's not obvious to me that we must use a monospace face because the only "code" we show is package names, for which Lato works nicely. Perhaps that one face could be used throughout.

This can be done. I will consolidate to using Lato.

• The dense black blocks are a little terrifying. Let's use one of the shades of blue from the Go project's color scheme.

I understand. I am not sure if I can replicate the exact color scheme with the palette provided by Bulma but I will do my best to get it close as much as possible 🙏🏼

More generally, it would be nice to see the layout improved. I'm not a GUI designer, but I assume you are, and now that you understand how the application works and what it does, what do you think would make for the most natural and helpful appearance? Some ideas that spring to my mind:

I tried my best to keep the design as minimalistic as possible. I have given my thoughts below on what can be done with minimal amount of CSS and JS hackery... Looking forward to your feedback.

• the captions could be reduced in size.

Hmmm... Keep the standard size at 1rem? and then take it from there?

• the little (i) info widgets improved somehow. What is the state of the art for help text? Perhaps it could be displayed unconditionally, but discreetly in a small grey font.

This is a bit tricky. There are different ways of doing this. We could remove the (i), make it static and show it in a small grey font as you said. However, I did notice that some of the text is a bit long. I will give this a shot 👍🏼

• the dropdown menus could be aligned

✅

• the whole "selected package" section could be made invisible when nothing is selected

This would require some JS hackery. Will give this one a try 👍🏼

• the break/break all/unbreak buttons could somehow be made into some kind of graphical buttons that looks like an edge being broken or restored.

I am not able to visualize this. Do you have any particular image in mind?

• the first node in the broken edges table could be aligned with the second and subsequent.

Do you mean the one showed along with the unbreak button?

• the link to the documentation should perhaps use this image instead of the Gopher.

✅