Could you please consider to separate the Codeberg items in the top menu from my items? #140

hunger commented 2020年03月03日 10:51:31 +01:00

The web site has a top bar with Dashboard, Issues, Pull Requests, ... etc. which belong to my user when logged in.

There are also codeberg-related items in that top bar like Codeberg Issues, Blog, etc.

I do appreciate those being there (otherwise I would not have found the place to report this so fast;-), but can those get more clearly separated from my items?

E.g. add some spacing before the codeberg items or make them visually distinct?

The web site has a top bar with `Dashboard`, `Issues`, `Pull Requests`, ... etc. which belong to my user when logged in. There are also codeberg-related items in that top bar like `Codeberg Issues`, `Blog`, etc. I do appreciate those being there (otherwise I would not have found the place to report this so fast;-), but can those get more clearly separated from my items? E.g. add some spacing before the codeberg items or make them visually distinct?

hw commented 2020年03月04日 09:41:21 +01:00

Pull request welcome! The relevant code is in https://codeberg.org/codeberg/build-deploy-gitea/

Pull request welcome! The relevant code is in https://codeberg.org/codeberg/build-deploy-gitea/

ashimokawa commented 2020年03月04日 17:12:50 +01:00

@hunger
I deployed that on codeberg-test.org, you can see it there

Two problems I see:

• Looks a bit odd on mobile
• People already complained that the top bar takes too much space for their setup

@hunger I deployed that on codeberg-test.org, you can see it there Two problems I see: * Looks a bit odd on mobile * People already complained that the top bar takes too much space for their setup

hunger commented 2020年03月05日 08:57:57 +01:00

I guess this needs more CSS then, at which point I am unfortunately out.

Maybe we could merge all the Codeberg items into one "About" and only link to that (with an nice separator in front). That would reduce the need for horizontal space quite a bit.

I guess this needs more CSS then, at which point I am unfortunately out. Maybe we could merge all the Codeberg items into one "About" and only link to that (with an nice separator in front). That would reduce the need for horizontal space quite a bit.

davidak commented 2020年03月14日 21:59:19 +01:00

Yes, it would be one solution to have just "About" there or just the Logo which links to the homepage which should have all information.

The links can also be added to the footer.

It works for GitHub, so why shouldn't it work for us? They are successfull because their UI is not cluttered with unneeded information.

Yes, it would be one solution to have just "About" there or just the Logo which links to the homepage which should have all information. The links can also be added to the footer. It works for GitHub, so why shouldn't it work for us? They are successfull because their UI is not cluttered with unneeded information.

hw commented 2020年03月19日 18:25:00 +01:00

:) PR welcome!

:) PR welcome!

fnetX commented 2020年03月24日 20:34:10 +01:00

I guess I won't find the time to check for that, but you could either create some flexible div containers that center the codeberg items in the middle of the navbar or, probably a better approach, move the codeberg related things into an dropdown still allowing a quick access to these items.

I'll set up an reminder for me to look back into that if no one else finds the time to do so ... but I'd really appreciate someone w/ more experience looking at this.

I guess I won't find the time to check for that, but you could either create some flexible div containers that center the codeberg items in the middle of the navbar or, probably a better approach, move the codeberg related things into an dropdown still allowing a quick access to these items. I'll set up an reminder for me to look back into that if no one else finds the time to do so ... but I'd really appreciate someone w/ more experience looking at this.

hw commented 2020年07月02日 09:50:05 +02:00

any updates here?

any updates here?

fnetX commented 2020年07月05日 17:22:21 +02:00

Well, It's still on my todo list ...
I assume that I or the next person that finds some time for that should directly create a PR in https://codeberg.org/Codeberg/gitea/src/branch/codeberg (in the codeberg branch as linked) and #140 (comment) is now obsolete?

Well, It's still on my todo list ... I assume that I or the next person that finds some time for that should directly create a PR in https://codeberg.org/Codeberg/gitea/src/branch/codeberg (in the codeberg branch as linked) and https://codeberg.org/Codeberg/Community/issues/140#issuecomment-49756 is now obsolete?

hw commented 2020年07月07日 09:55:54 +02:00

Both patchfiles as part of build-deploy-gitea and changes to the codeberg branch in codeberg/gitea are perfectly agreeable places for this.

Both patchfiles as part of build-deploy-gitea and changes to the codeberg branch in codeberg/gitea are perfectly agreeable places for this.

da commented 2020年08月30日 21:24:12 +02:00

From a usability perspective, much of the top bar should be removed entirely when you’re browsing on repository pages. It duplicates elements from the repository top-bar which will cause confusion. Which of the two (or three when logged in) menu items labeled "Issues" takes me to the current repository’s issue tracker? Is the "Blog" in the top menu the current repository’s blog or the site’s? The same issue exist with the "Donate" and "Help" menu items. The double top-bar architecture is confusing.

Not to shame anyone, but here is an example of user who clicked on the wrong Issues menu item. This isn’t the users’ fault, but the navigational aritecture of the page.

The "Codeberg Issues" menu item should be moved to the bottom bar for logged in users. It’s not a primary navigation item. Or at least it shouldn’t be nessecary for every user to constantly report bugs against Codeberg.

GitHub solves this using colors and whitespace. There’s more whitespace between their top bar and a project’s top bar. The top bar is white-on-black and the project’s is black-on-white. Codeberg uses the same-ish blue color for it’s top bar and the project name label and there is less whitespace between the two. This creates a stronger association between the top-top bar and the project on Codeberg than you get with Github’s more stand-off-ish black top bar.

GitHub also, notably, has no overlap between the items in the topmost top bar and the project’s top bar (when you’re not signed in). They reveal more complexity and menu items to signed-in users.

My preferred solution would involve hiding most of the top bar when you are browsing projects. Keep it on the front-page and other Codeberg-focused pages, but keep the focus on the project when exploring project pages. When you’re not logged in and exploring a project’s repository, the top bar should only contain the Codeberg logo, a message saying "The free home of open source software" or somesuch, and login/signup links. The front page and other non-repo pages should still include Explore, Donate, About, and other navigational anchors.

Mockup of decluttered top bar on Codeberg.org

I beleive this approach should be easier to use for new users. It brings more focus on the projects hosted on Codeberg rather than Codeberg itself. There is plenty of opportunities to convert users to supporters later on once they’ve signed up.

From a usability perspective, much of the top bar should be removed entirely when you’re browsing on repository pages. It duplicates elements from the repository top-bar which will cause confusion. Which of the two (or three when logged in) menu items labeled "Issues" takes me to the current repository’s issue tracker? Is the "Blog" in the top menu the current repository’s blog or the site’s? The same issue exist with the "Donate" and "Help" menu items. The double top-bar architecture is confusing. Not to shame anyone, but [here is an example](https://codeberg.org/Codeberg/Community/issues/240) of user who clicked on the wrong Issues menu item. This isn’t the users’ fault, but the navigational aritecture of the page. The "Codeberg Issues" menu item should be moved to the bottom bar for logged in users. It’s not a primary navigation item. Or at least it shouldn’t be nessecary for every user to constantly report bugs against Codeberg. GitHub solves this using colors and whitespace. There’s more whitespace between _their_ top bar and a project’s top bar. The top bar is white-on-black and the project’s is black-on-white. Codeberg uses the same-ish blue color for it’s top bar and the project name label and there is less whitespace between the two. This creates a stronger association between the top-top bar and the project on Codeberg than you get with Github’s more stand-off-ish black top bar. GitHub also, notably, has no overlap between the items in the topmost top bar and the project’s top bar (when you’re not signed in). They reveal more complexity and menu items to signed-in users. My preferred solution would involve hiding most of the top bar when you are browsing projects. Keep it on the front-page and other Codeberg-focused pages, but keep the focus on the project when exploring project pages. When you’re not logged in and exploring a project’s repository, the top bar should only contain the Codeberg logo, a message saying "The _free_ home of _open source software_" or somesuch, and login/signup links. The front page and other non-repo pages should still include Explore, Donate, About, and other navigational anchors.  I beleive this approach should be easier to use for new users. It brings more focus on the projects hosted on Codeberg rather than Codeberg itself. There is plenty of opportunities to convert users to supporters later on once they’ve signed up.

hw commented 2020年08月30日 21:43:49 +02:00

How to access quick links to dashboard/issues/pending pull requests/support/donation and geenric help/issues then?

Agree that clear distinction of per-project and site-issues makes much sense, a PR to https://codeberg.org/codeberg/build-deploy-gitea/ for testing on https://codeberg-test.org is highly welcome!

How to access quick links to dashboard/issues/pending pull requests/support/donation and geenric help/issues then? Agree that clear distinction of per-project and site-issues makes much sense, a PR to https://codeberg.org/codeberg/build-deploy-gitea/ for testing on https://codeberg-test.org is highly welcome!

6543 commented 2020年08月30日 21:53:18 +02:00

I think Codeberg/build-deploy-gitea#17 is an answer to this - isn't it?

I think https://codeberg.org/Codeberg/build-deploy-gitea/pulls/17 is an answer to this - isn't it?

hw commented 2020年08月30日 22:14:14 +02:00

is this ready for merge?

is this ready for merge?

n commented 2021年08月11日 16:13:53 +02:00

The Codeberg links have now been moved to a Codeberg dropdown in the navbar.

The Codeberg links have now been moved to a Codeberg dropdown in the navbar.

Codeberg-Infrastructure/forgejo