Feedback: UI 💬

[anbraten]

Summary of UI issues and smaller changes (based on new UI from #245) which can be posted as comments. For complex improvements please open a separate issue.

UI improvements

• improve responsive (mobile) usage
• improve darkmode favicon improve favicons #576
• favicon to show pipeline status improve favicons #576
• use textarea for secret values (to support long texts like ssh keys) Improve secrets tab #574
• show PR name / id instead of target branch if ref: refs/pull/xxx/merge
• Show matrix options in build view Show environ in every BuildProc #526
• add page /<user-or-group-name> to view all enabled woodpecker repos of a user / group
• use icons for build proc status (currently just colored points)

UI bugs

• Event for cancle job not send #469
• fix overflowing commit messages Fix overflowing commit messages #528
• fix back button (direct page load) to go back in history or to some default if history is empty fix back links #529
• fix new build updates not being used / send (new builds are not added list)
• fix flickering when adding new log-lines while step is running

Next Round: #1314

[6543]

#593 (comment)

• add a label/tag disabled on /repos view for disabled repos

[6543]

#593 (comment)

• on disabled repos -> repo config -> repo actions: deactivate button should be hidden
• on disabled repos -> repo config -> repo actions: add activate button

[ivictbor]

I believe WCAG compatibility is pretty important, at least AA grade. A lot of proffesianal interfaces developers (web/mobile) might use this CI, it is great! But a lot of us know WCAG requirments wery well (current issues in Woodpecker are notacible by human eye), so when we see Woodpecker's "gray on gray" (see this issue #721 ) it is kinda looks like, you know, ummm, a little bit "rookie designer mistake". This is absolutely OK, we all passed these steps, just sharing info how to improve and look more professional.
BTW drone satisfied this requirement (you might notice contrast white on blue an so on), you selected very cool color scheme too, only left to fix contrast of texts a little bit.

[qwerty287]

Since my comment has been hidden while my idea isn't fixed, I'll just comment again:
I think it would be nice to see public projects of other users on their "profile" list.

[silverwind]

I'd like to see this "Avenir" custom font removed and instead a standard system font stack to be used. Benefits are a consistent experience across multiple apps that also use system font stack, as well as faster load times and no flash of wrong fonts. See here for an example.

[tecosaur]

This seems like the place to plop UI feedback? I've just started using Woodpecker and I'm sorry to say that the dark mode contrast is atrocious.

Let alone WCAG AAA, this fails WCAG AA standards of accessibility.

I recommend https://accessible-colors.com/ for checking that there's sufficient contrast between foreground and background colours.

Here's what #CCCFD4 looks like:

Copying Gitea's default foreground #bbc0ca is probably another decent option (it's 2/3 of the way to AAA from AA).

On a more stylistic note, I don't think the dark borders do the design any favours either. Here's a lighter version:

There are other improvements that can be made, but this would be a good starting point I think 🙂.

[tecosaur]

Actually, on this topic, how would the project feel about taking heavy inspiration from Gitea's default theme?

[tecosaur]

Thanks for that link, I wasn't aware of that! Good to see that it's been improved, though I do think it's only partway there.

For example, here's what I'm currently seeing:

If I just copy some styling from Gitea's default theme:

I find the latter markedly easier to read.

[ivictbor]

Thanks for that link, I wasn't aware of that! Good to see that it's been improved, though I do think it's only partway there.

For example, here's what I'm currently seeing:

If I just copy some styling from Gitea's default theme:

I find the latter markedly easier to read.

Agree about minimalizm of colors in rows
Also clickable elements should have a separate color (like green repo link), otherwise user would not even know that they are clickable

[tecosaur]

Woodpecker is already roughly similar to Gitea in design (e.g. the background colour is an exact match). For ease of use and accessibility having a clear design is important, and simply put it's much easier to use an existing project as a reference than coming up with something good from scratch.

I know I've only just started looking at this project, but perhaps a good avenue for initially improving the design/styling would be to take heavy inspiration from Gitea's default theme? In the slightly longer term, it would also be neat for Woodpecker to accept custom themes as Gitea does. That would make it easier to gradually develop a distinct visual identity (should the project want that) in parallel to a well-tested style and then switch it as the default once it's reached a sufficient level of refinement.

[qwerty287]

I don't think we (the maintainers) have any disadvantages with custom themes (at least I don't have any...), so feel free to open an issue :)

[tecosaur]

Cool, I'll see about doing so then. One quick question, if I want to try playing around with the styling myself is there some main CSS file like https://github.com/go-gitea/gitea/blob/main/web_src/less/themes/theme-arc-green.less that I could try tweaking?

[qwerty287]

Not really. We're using https://windicss.org as CSS framework, and there's https://github.com/woodpecker-ci/woodpecker/blob/master/web/src/style.css, but I'd recommend you looking at WindiCSS.

[6543]

Pipelines in branches tab (for example master) also include Pull-requests against master => should not contain PRs

I would say they should, you can target PRs to different branches

[6543]

Next Round: #1314

open comments will be copied ...

[6543]

for contrast related stuff ( accessibility ) here is now: #1315