Navbar text too small #39

Open
opened 4 months ago by mray · 19 comments
mray commented 4 months ago
Collaborator

I remember this being a result of other issues – still I want to keep an issue as a reminder this is still problematic. I also know this might become obsolete with a new header, in that case it can just be closed :P

The main menu text is too small.

I know the navbar holds much text, which is problematic on smaller screens but should be changed, too.

Possible text tweaks that can help:

"Documentation" -> "Docs"
"Join Codeberg e.V." -> "Join"
Codeberg Issues -> (Why have Codeberg issues and Issues in the main nav?)

I remember this being a result of other issues – still I want to keep an issue as a reminder this is still problematic. I also know this might become obsolete with a new header, in that case it can just be closed :P The main menu text is too small. I know the navbar holds much text, which is problematic on smaller screens but should be changed, too. Possible text tweaks that can help: "Documentation" -> "Docs" "Join Codeberg e.V." -> "Join" Codeberg Issues -> (Why have Codeberg issues and Issues in the main nav?)
n commented 4 months ago
Collaborator

For 'Codeberg Issues' could we change it to 'Help'? This would make it distinct from issues and make it obvious that you can go there to report stuff and get help.

For 'Codeberg Issues' could we change it to 'Help'? This would make it distinct from issues and make it obvious that you can go there to report stuff and get help.
n added the
Part: Navbar
label 4 months ago
Poster
Collaborator

Sound good to me:

"Codeberg Issues" -> "Help"

Sound good to me: "Codeberg Issues" -> "Help"
n referenced this issue from a commit 4 months ago
Collaborator

Hmm, looking at the PR Codeberg/Gitea#21 which removed the Help link from the user dropdown:

Why don't we make more us of that? Like, why do we always need to link to the Codeberg Issues and the Documentation and Donate + join all the time? We could also consider moving this to the dropdown instead, or some of it.

Hmm, looking at the PR Codeberg/Gitea#21 which removed the Help link from the user dropdown: Why don't we make more us of that? Like, why do we always need to link to the Codeberg Issues and the Documentation and Donate + join all the time? We could also consider moving this to the dropdown instead, or some of it.
n commented 4 months ago
Collaborator

That's a good idea.

What about taking it one step further: having a drop-down next to the Codeberg logo with a list of Codeberg-related links. Essentially it would be Codeberg/build-deploy-gitea#17 but simpler and native to Gitea.

That's a good idea. What about taking it one step further: having a drop-down next to the Codeberg logo with a list of Codeberg-related links. Essentially it would be Codeberg/build-deploy-gitea#17 but simpler and native to Gitea.
Poster
Collaborator

This thread is getting a bit off topic: all I'm bringing up is a change similar to that:

image

There is much more we can do to improve the navigation, maybe track that elsewhere?

@ moving Codeberg links to submenus:
I think we should hold on to one condition at ALL TIMES;
There needs to be one obvious link on any given page at any given time on codeberg that enables members/users/visitors to support the project. This typically is somewhere in the top right.

We should not make it hard for people to help. And we should be humble but honest about the fact that we depend on money that does not come from google or microsoft.

This thread is getting a bit off topic: all I'm bringing up is a change similar to that: ![image](/attachments/4fa5cade-e766-45b2-addd-5cd578993777) There is much more we can do to improve the navigation, maybe track that elsewhere? @ moving Codeberg links to submenus: I think we should hold on to one condition at ALL TIMES; There needs to be one _obvious_ link on any given page at any given time on codeberg that enables members/users/visitors to support the project. This typically is somewhere in the top right. We should not make it hard for people to help. And we should be humble but honest about the fact that we depend on money that does not come from google or microsoft.
102 KiB
Collaborator

well, I don't think we should dive too much into styling (sounds at least hard to me, but I'm no designer). A new navbar design can be discussed at Moritz and the big PR.

I think this is about a hotfix to improve text readability and lighten the navbar a little, so at least by shortening the names, and maybe by using native Gitea menues (not a hard job).

What about

  • Help > Link to the docs (always visible), mention the Issue tracker and chats there, too
  • Codeberg (dropdown) v
    • Issues
    • Donate
    • Blog
    • Join / Support

I don't think the donate button must always be visible. People won't donate more often because of this IMHO. Those who can afford, will probably join Codeberg and be done with it. It's just a waste of space.

Asking for donations must happen more actively IMO, but that's a different matter.

My structure above thinks that

  • there should always be a link to get help
  • the docs can be styled more freely, with a getting started, mentioning community channels like Matrix and of course the issue tracker. Pointing people to the issue tracker doesn't give them a first-aid.
well, I don't think we should dive too much into styling (sounds at least hard to me, but I'm no designer). A new navbar design can be discussed at Moritz and the big PR. I think this is about a hotfix to improve text readability and lighten the navbar a little, so at least by shortening the names, and maybe by using native Gitea menues (not a hard job). What about - Help > Link to the docs (always visible), mention the Issue tracker and chats there, too - Codeberg (dropdown) v - Issues - Donate - Blog - Join / Support I don't think the donate button must always be visible. People won't donate more often because of this IMHO. Those who can afford, will probably join Codeberg and be done with it. It's just a waste of space. Asking for donations must happen more actively IMO, but that's a different matter. My structure above thinks that - there should always be a link to get help - the docs can be styled more freely, with a getting started, mentioning community channels like Matrix and of course the issue tracker. Pointing people to the issue tracker doesn't give them a first-aid.
n commented 4 months ago
Collaborator

I modified Codeberg/Gitea#21 for the dropdown and it should look something like this:

Now all that's left is to write up the Docs article.

I modified Codeberg/Gitea#21 for the dropdown and it should look something like this: ![](https://codeberg.org/attachments/541ce778-f52c-4a3a-8535-dfc8b201b46f) Now all that's left is to write up the Docs article.
6543 referenced this issue from a commit 4 months ago
6543 referenced this issue from a commit 4 months ago

I think after https://codeberg.org/Codeberg/build-deploy-gitea/pulls/81 got merged we can close this

I think after https://codeberg.org/Codeberg/build-deploy-gitea/pulls/81 got merged we can close this
fnetX referenced this issue from a commit 4 months ago
Collaborator

The navbar shortening has happened. We can now talk about changing the font size and / or applying more styling short-term.

The navbar shortening has happened. We can now talk about changing the font size and / or applying more styling short-term.
n commented 4 months ago
Collaborator

I think a first step would be to revert the Codeberg-specific tweaks that make the navbar small. With some quick inspect element it looks like it wouldn't break the navbar on small screens.

I think a first step would be to revert the Codeberg-specific tweaks that make the navbar small. With some quick inspect element it looks like it wouldn't break the navbar on small screens.

Just wanted to mention, that I did not find the docs. There is at least a small triangle at the help button missing so one knows it`s a drop down menue.

Just wanted to mention, that I did not find the docs. There is at least a small triangle at the help button missing so one knows it`s a drop down menue.
hw commented 4 months ago
Owner

I am somewhat worried that "community issue tracker", "join Codeberg e.V." and "donate to our cause" involve some friction to be discovered. Ease of use, being approachable in case of issues, and gathering support are very important.

I am somewhat worried that "community issue tracker", "join Codeberg e.V." and "donate to our cause" involve some friction to be discovered. Ease of use, being approachable in case of issues, and gathering support are very important.
Collaborator

Now that the design change is live, I dislike the help icon. It looked ugly to me with the dropdown arrow next to it, but it also feels a little misplaced in terms of spacing to me.

Also, people don't really discovered it. What about moving the three links to the Codeberg dropdown, too? Also further shortening the navbar a little? I think this is easier to find.

We could use a separator like in the user dropdown to separate interactive parts and supportive links or something.

@hw do you think that donations will cease? I mean, people will probably still use and look at the Codeberg dropdown. Also, my wild guess would be that specific calls to donations are more effective?

Now that the design change is live, I dislike the help icon. It looked ugly to me with the dropdown arrow next to it, but it also feels a little misplaced in terms of spacing to me. Also, people don't really discovered it. What about moving the three links to the Codeberg dropdown, too? Also further shortening the navbar a little? I think this is easier to find. We could use a separator like in the user dropdown to separate interactive parts and supportive links or something. @hw do you think that donations will cease? I mean, people will probably still use and look at the Codeberg dropdown. Also, my wild guess would be that specific calls to donations are more effective?

can we close this issue now?!?

can we close this issue now?!?
Collaborator

hahaha, the issue is actually about the font size, so #39 (comment) is still relevant - offtopic talk about content has ended and we now can talk about Design. But this isn't my domain, so I'm only here to touch CSS if people tell me what to do ...

hahaha, the issue is actually about the font size, so https://codeberg.org/Codeberg/Design/issues/39#issuecomment-247073 (comment) is still relevant - offtopic talk about content has ended and we now can talk about Design. But this isn't my domain, so I'm only here to touch CSS if people tell me what to do ...
Poster
Collaborator

Text in th navbar is still very small.
And left aligned, despite the effort of making it shorter.

All is still pretty similar to the first screenshot on #39

Needless to say I'd appreciate any CSS touching that brings us closer to the second image… ;)

Text in th navbar is still very small. And left aligned, despite the effort of making it shorter. All is still pretty similar to the first screenshot on [#39](https://codeberg.org/Codeberg/Design/issues/39#issuecomment-244392) Needless to say I'd appreciate any CSS touching that brings us closer to the second image… ;)
Collaborator

Personally, I have objections to a centerred navbar. Positions of the icons will vary depending on login state and scren size. I think many people are used to where to click (e.g. top left - visit dashboard) and I make heavy use of this.

If this varies from day to day (window size, the machine I'm working on etc), I'd probably have much more trouble with this (my workflow is actually placing the mouse on the correct position while scrolling back up).

I'm not a CSS pro, but changing the font size should be easily feasible (and should be done :D), but I'd like to hear a second opinion on the centered navbar. What's the value for this change design-wise?

Personally, I have objections to a centerred navbar. Positions of the icons will vary depending on login state and scren size. I think many people are used to where to click (e.g. top left - visit dashboard) and I make heavy use of this. If this varies from day to day (window size, the machine I'm working on etc), I'd probably have much more trouble with this (my workflow is actually placing the mouse on the correct position while scrolling back up). I'm not a CSS pro, but changing the font size should be easily feasible (and should be done :D), but I'd like to hear a second opinion on the centered navbar. What's the value for this change design-wise?
Poster
Collaborator

timed out. probably won't fix.

timed out. probably won't fix.
mray closed this issue 1 month ago
Collaborator

no, I'm on it, first task is moving the CSS from build-deploy-gitea to the Gitea theme and reverting some special fixes. But I'm having issues to understand some of the changes and there is some issue with referencing assets from build-deploy-gitea from the Gitea theme (as this isn't aware of assets that may be added later in the build chain).

no, I'm on it, first task is moving the CSS from build-deploy-gitea to the Gitea theme and reverting some special fixes. But I'm having issues to understand some of the changes and there is some issue with referencing assets from build-deploy-gitea from the Gitea theme (as this isn't aware of assets that may be added later in the build chain).
fnetX reopened this issue 1 month ago
Sign in to join this conversation.
No Milestone
No Assignees
6 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.