Skip to content

Add a new look-and-feel for the web UI.#258

Closed
ewanmellor wants to merge 4 commits intoocurrent:masterfrom
ewanmellor:ui-restyle
Closed

Add a new look-and-feel for the web UI.#258
ewanmellor wants to merge 4 commits intoocurrent:masterfrom
ewanmellor:ui-restyle

Conversation

@ewanmellor
Copy link
Copy Markdown
Contributor

This adds Roboto / Roboto Mono as web fonts, and adds highlight colors
for table heading and the nav menu based on the OCaml logo. It adds the
logo itself to the nav bar and the favicon.

This adds a static module, which serves static files from a specified
docroot. Hook this in to the routes under /images/*.

Lots of padding and spacing adjustments too.

Set the diagram node color (i.e. the box outline color) to match the fill.
This makes the boxes less heavy on the page, because they no longer have
the black border.

Signed-off-by: Ewan Mellor ewan@tarides.com

Copy link
Copy Markdown
Contributor

@talex5 talex5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. The styling does need some work. The new design doesn't seem to work well with narrow windows, though.

Before (from ocaml-ci, running a slightly older version):

Screenshot_2021-04-13 ocaml-ci

After:

Screenshot_2021-04-13 docker_build_local

Also, CI is failing.

@ewanmellor
Copy link
Copy Markdown
Contributor Author

ewanmellor commented Apr 17, 2021

Thanks. The styling does need some work. The new design doesn't seem to work well with narrow windows, though.

[Snip images]

Also, CI is failing.

I have rebased, fixed the failing tests, and addressed all the other comments inline.

I have addressed the narrow-screen issue above by making the query-form class contents wrap at medium sizes, and then go to a single column form on mobile screens.

This is now ready for review again. Note that this is rebased on top of PR #255 , since there is now a dependency (for the graphviz helper functions).

This adds Dot.digraph.

Signed-off-by: Ewan Mellor <ewan@tarides.com>
This adds a static module, which serves the file from a specified
docroot.  Hook this in to the routes under /images/*.

Signed-off-by: Ewan Mellor <ewan@tarides.com>
This adds Roboto / Roboto Mono as web fonts, and adds highlight colors
for table heading and the nav menu based on the OCaml logo.  It adds the
logo itself to the nav bar and the favicon.

For the Graphviz diagrams, set the node color (i.e. the box outline color)
to match the fill. This makes the boxes less heavy on the page, because
they no longer have the black border.  Set the default font for the
graph, node, and edge options to use Roboto.  This changes the unit
test expected output to include the options.

Lots of padding and spacing adjustments too.

Signed-off-by: Ewan Mellor <ewan@tarides.com>

Note that we ignore the given path, and we use the Context.uri instead.
The routes package has added a wildcard option
(https://github.com/anuragsoni/routes/pull/118) but this has not been
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has been released as 1.0.0

@MisterDA MisterDA mentioned this pull request Mar 15, 2022
@MisterDA
Copy link
Copy Markdown
Contributor

Most of these changes have been merged as part of #315, thanks!

@MisterDA MisterDA closed this May 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants