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

Closed
opened 2 years ago by hunger · 15 comments
hunger commented 2 years ago

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 2 years ago
Owner

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/
Owner

@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
Poster

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.

-- spam deleted --

-- spam deleted --
Collaborator

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 2 years ago
Owner

:) PR welcome!

:) PR welcome!
Collaborator

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 1 year ago
Owner

any updates here?

any updates here?
Collaborator

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 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 1 year ago
Owner

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 1 year ago

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. ![Mockup of decluttered top bar on Codeberg.org](https://codeberg.org/attachments/80d4df90-8ef1-4c5c-ac64-77710e14d0a5) 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 1 year ago
Owner

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 1 year ago
Collaborator

I think https://codeberg.org/Codeberg/build-deploy-gitea/pulls/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 1 year ago
Owner

is this ready for merge?

is this ready for merge?
fnetX added this to the (deleted) milestone 8 months ago
fnetX modified the milestone from (deleted) to Summer 2021 (obsolete, lol) 6 months ago
n closed this issue 3 months ago
n commented 3 months ago
Collaborator

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.
Sign in to join this conversation.
No Assignees
9 Participants
Notifications
Due Date

No due date set.

Depends on
Loading…
There is no content yet.