Profile Card UI changes

Description

Dear Gitea developers!

I highly appreciate your afforts in Gitea development and wanted to thank you for its creation. This platforms is wonderful and had finally provided me an alternative to most Git hosting platforms like GitHub, GitLab. It's highly configurable, lightweight and has easy to use UI.

Nevertheless, with upcoming 1.13 release(which I am really hyped about because of Kanbans), I'd like to suggest you some changes in general UI. This change includes a new profile card which is shown on the profile page of user.

I’ve played with CSS of this profile card and, as a result, got a cleaner look on it: removed these gray/white borders around the whole card, made background to match page’s background, put description right under the profile picture and nickname, made profile picture rounded and made nickname/name fonts bigger a little bit so other users wouldn’t be overwhelmed by profile picture’s sizes. Also I removed icon from profile description because I though it’d look cleaner without any icons, except the ones included in profile description itself.

Why had I done so? Well, to be honest, I can’t fully answer to this question. Not because I have something to hide or pursue my personal goals but because I did so just because I had a feeling of GitHub’s UI looking somewhat stylish and clean. Not going to lie, I really like how GitHub looks like. That’s why this profile card UI reminds GitHub’s so much - I made it with minimalism and informativeness in mind while being inspired by GitHub’s design decisions.

I don't want to say that the whole UI code should be refurbished. But there could be little changes made so Gitea's general look could be improved a bit, made more minimalist, clean and kept highly informative.

I am looking forward for your feedback and opinions on these changes. Thank you for paying attention.

Screenshots

This screenshots shows current profile card which is a default for Gitea(the screenshot was taken from Codeberg website:

This screenshot shows a new profile card which is used on my own Gitea instance:

This screenshot shows a profile card which is currently used on GitHub and from which I've taken my inspiration:

This screenshot shows a profile card which is used by GitLab:

Last two screenshots were provided as a comparison to the changes I've made.

There're also other variants which would distinguish Gitea from other platforms in terms of profile page layouts and design - by using tear drops:

These changes do look unique and stylish, in my humble opinion. Nevertheless, since circled profile pictures become a standard around the web, so we could keep working on circled profile picture and create cleaner, harmonic profile card.

[lafriks]

Imho circle looks best

This is how the whole page would look like with arc-dark:

And this is the whole page with default gitea theme:

Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub?

[jolheiser]

Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub?

It will need to override any semantic styles, as fomantic is pulled in directly.
Probably in _user.less.

The PR can be to here on GitHub, currently the repo on gitea.com is a mirror. 🙂

[Extarys]

I personally like the teardrop. Could we use a instance-wide setting to control the shape of the profile picture?

[lafriks]

@Extarys you can always add additional CSS to your deployment to customize your instance look

[Extarys]

@lafriks Indeed, so in the end, the shape of the avatar shipped by Gitea doesn't really matter. CSS FTW

[6543]

I like to stay square-shaped, if you like teardrops or circles, you can use gimp to modify your avatar. The other way around is mouch harder(you will get tiny images :( )

If liked I can provide some examples ...

[6543]

I think https://codeberg.org/Codeberg/build-deploy-gitea/pulls/30#issuecomment-76507 got it the best ... let users deside themselve how they like to represent themselve

@unknownguydk just an idear: add a function to specify the shape on upload, may be an option to get all users happy?

I will be closing this issue for now because it has been inactive for nearly 3 months and I have nothing to add here. I highly appreciate your replies and suggestions, thank you for them! As far as I gain enough experience in web development, I will open a pull request with function in settings which would allow user to determine the shape of his profile card, therefore I would adopt @6543's suggestion.
Again, thank you and stay healthy 😄