Revamp repo header

[denyskon]

Redesign repo header with following new aspects:

• responsive & better-looking repo title
• hide repo button text instead of icons in mobile view
• use same tab style as on explore and org page

Before:

After:

[silverwind]

I still prefer the user / repo rendering with bigger font than this two-line thing. It pictures what is in the URL and it's also what GitHub retained in their last header redesign. We should likely mute the links.

[denyskon]

Well if others think the same I can bring it back, but then we'd need a way for it to no longer look horrible on mobile if the repo name is even a bit longer :)

[JakobDev]

show owner displayname instead of username

I'm not a fan of this. The Username is used for all technical purposes (repo url, git clone etc.), s we should show the username instead of the displayname.

[puni9869]

I am biased with

horizontal scroller.
Could you make it like github ... for mobile approach if the row items are not accomodated in row we will shift them to ...

There is some view port math here, calculate the length of overall row view port and then calculate the length of every item, if sum of all view row item > view port then hide the last one and push in the ... and use the % approach for more item push and pop. It is little bit tricker in JS.

And I agree with @JakobDev point we should use the username. Not displayed name.

For Private label you can show the lock icon in mobile view. this will use less space.

IMO desktop view looks good in gitea, we need to focus on mobile view and Accessibility more.

[denyskon]

Alright, so I brought back the one-line-view and showing username instead of display name. Opinions welcome!

[puni9869]

This hurts my soul for mobile view. Since you are an UI expert, could you do some magic here.🪄

[denyskon]

@puni9869

What do you think?

[puni9869]

😃 Much better, just the template icon is should be standard, Add a tooltip if applicable in mobile view.

Overall looks good.

[denyskon]

This is the standard template icon:

Tooltip added:

[silverwind]

Could you make it like github ... for mobile approach if the row items are not accomodated in row we will shift them to ...

Yes we should do this but I think the implementation will be complex as it can not be done in CSS and it needs JS with an ResizeObserver to dynamically populate the dropdown. I would defer this to another PR.

[denyskon]

I agree that we should do it at some point, but to be honest, my JS skills are not good enough to create something that would be maintainable 😆

[mpeter50]

Hi!
I have noticed that the empty space around objects have also increased. I think with the exception of the 2nd "before" image, the margins were better the way it was originally.

Relatively a lot of software projects have adopted huge margins, but I don't think thats a good change. Screens are larger to fit more information nicely, not to have larger empty spaces, and at the same time, not everyone has large screens.
I agree that too small margins would make it a mess, but I don't think that was the case (with the exception of the 2nd "before" image, because of the wrapped button line).

[denyskon]

@mpeter50

I also am a fan of small margins as long as you can still visually separate elements without thinking about it. For me, the sheer amount of different elements in that header justifies the big margins, but I can try to play with it a bit and maybe I'll find a better combination

[lafriks]

I really dislike that background in repo name

[denyskon]

@lafriks I thought it would be a good highlight on hover, but I can remove it if others think the same

[lafriks]

Personally it makes it harder to read because of less contrast and the UI too crowded :)

[denyskon]

@mpeter50 I reduced the paddings and updated the screenshots.

@lafriks I removed that hover effect

[denyskon]

Some more reviews would be nice :) Are there any things left that should be changed?

[delvh]

ping for reviewers.