Repo avatar alignment on Explore page #3410

New Issue

GiteaMirror · 2025-11-02T05:12:05-06:00

GiteaMirror commented

2025-11-02 05:12:05 -06:00

Originally created by @bkraul on GitHub (Jun 2, 2019).

Gitea version (or commit ref): 8eba27c
Git version: 1.9.0+dev-314-g8eba27c79
Operating system: docker (Ubuntu 18.04 LTS)
Database (use [x]):
- PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL): https://try.gitea.io/Arrow
- No
- Not relevant
Log gist:

Description

The vertical alignment of the project avatar on the Explore page looks a little weird. It seems it would look better if it was vertically centered with the text, like it is on the project page. Looking closer, it looks like the one on the project page could be fine-tuned as well 😃 . (screenshots attached).

Screenshots

Originally created by @bkraul on GitHub (Jun 2, 2019). - Gitea version (or commit ref): 8eba27c - Git version: 1.9.0+dev-314-g8eba27c79 - Operating system: docker (Ubuntu 18.04 LTS) - Database (use `[x]`): - [ ] PostgreSQL - [x] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: - [x] Yes (provide example URL): https://try.gitea.io/Arrow - [ ] No - [ ] Not relevant - Log gist: ## Description The vertical alignment of the project avatar on the Explore page looks a little weird. It seems it would look better if it was vertically centered with the text, like it is on the project page. Looking closer, it looks like the one on the project page could be fine-tuned as well 😃 . (screenshots attached). ## Screenshots ![image](https://user-images.githubusercontent.com/14616851/58761294-4546a100-8508-11e9-9700-745a0f4aac3e.png) ![image](https://user-images.githubusercontent.com/14616851/58761307-5abbcb00-8508-11e9-88be-0168665133c5.png)

GiteaMirror added the issue/confirmed topic/ui labels 2025-11-02 05:12:05 -06:00

GiteaMirror closed this issue

2025-11-02 05:12:05 -06:00

GiteaMirror commented

2025-11-02 05:12:06 -06:00

@saitho commented on GitHub (Jun 2, 2019):

I was able to successfully align the repository avatar vertically using flexbox.
Just leaving some notes on the HTML and CSS I've used for now - I'm currently on Windows and can't add the changes on that. ^^

Repository page title part:

<div class="ui huge breadcrumb repo-title" style="display: flex;align-items: center;">
	<img class="ui avatar image" src="/repo-avatars/5564-f6a2875c257b57343b1a765f077d3ab4" style="margin-right: 0.5em;">	
	<div>
		<a href="/Arrow">Arrow</a>
		<div class="divider"> / </div>
		<a href="/Arrow/TestRepo">TestRepo</a>
	</div>
</div>

Repository list item header:

<div class="ui header">
	<div style="display: inline-flex;align-items: center;">
		<img class="ui avatar image" src="/repo-avatars/5564-f6a2875c257b57343b1a765f077d3ab4" style="margin-right: 0.5em;">
		<a class="name" href="/Arrow/TestRepo">TestRepo</a>
	</div>
	<div class="ui right metas">
		<span class="text grey"><i class="octicon octicon-star"></i> 0</span>
		<span class="text grey"><i class="octicon octicon-git-branch"></i> 0</span>
	</div>
</div>

@saitho commented on GitHub (Jun 2, 2019): I was able to successfully align the repository avatar vertically using flexbox. Just leaving some notes on the HTML and CSS I've used for now - I'm currently on Windows and can't add the changes on that. ^^ Repository page title part: ``` <div class="ui huge breadcrumb repo-title" style="display: flex;align-items: center;"> <img class="ui avatar image" src="/repo-avatars/5564-f6a2875c257b57343b1a765f077d3ab4" style="margin-right: 0.5em;"> <div> <a href="/Arrow">Arrow</a> <div class="divider"> / </div> <a href="/Arrow/TestRepo">TestRepo</a> </div> </div> ``` Repository list item header: ``` <div class="ui header"> <div style="display: inline-flex;align-items: center;"> <img class="ui avatar image" src="/repo-avatars/5564-f6a2875c257b57343b1a765f077d3ab4" style="margin-right: 0.5em;"> <a class="name" href="/Arrow/TestRepo">TestRepo</a> </div> <div class="ui right metas"> <span class="text grey"><i class="octicon octicon-star"></i> 0</span> <span class="text grey"><i class="octicon octicon-git-branch"></i> 0</span> </div> </div> ```

GiteaMirror commented

2025-11-02 05:12:06 -06:00

@silverwind commented on GitHub (Jun 3, 2019):

Maybe also bump the size if the avatar a bit so it matches the second screenshot more closely.

@silverwind commented on GitHub (Jun 3, 2019): Maybe also bump the size if the avatar a bit so it matches the second screenshot more closely.

GiteaMirror commented

2025-11-02 05:12:07 -06:00

@bkraul commented on GitHub (Jun 3, 2019):

@silverwind Hmm...not sure, it would look too big...24px seems like a good size as it is. 😃

@bkraul commented on GitHub (Jun 3, 2019): @silverwind Hmm...not sure, it would look too big...24px seems like a good size as it is. 😃

GiteaMirror commented

2025-11-02 05:12:07 -06:00

@silverwind commented on GitHub (Jun 3, 2019):

I think it should be at least slightly bigger than the highest letter. But I don't see why not make them the same size, given the font seems also to be the same size.

@silverwind commented on GitHub (Jun 3, 2019): I think it should be at least slightly bigger than the highest letter. But I don't see why not make them the same size, given the font seems also to be the same size.

GiteaMirror commented

2025-11-02 05:12:07 -06:00

@stale[bot] commented on GitHub (Aug 2, 2019):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

@stale[bot] commented on GitHub (Aug 2, 2019): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs during the next 2 weeks. Thank you for your contributions.

GiteaMirror commented

2025-11-02 05:12:07 -06:00

@bkraul commented on GitHub (Aug 2, 2019):

Soooo, stale because it's not going to be addressed?

@bkraul commented on GitHub (Aug 2, 2019): Soooo, stale because it's not going to be addressed?

GiteaMirror commented

2025-11-02 05:12:07 -06:00

@saitho commented on GitHub (Aug 2, 2019):

Soooo, stale because it's not going to be addressed?

Stale because no one replied to this issue for two months.

@saitho commented on GitHub (Aug 2, 2019): > Soooo, stale because it's not going to be addressed? Stale because no one replied to this issue for two months.

GiteaMirror commented

2025-11-02 05:12:08 -06:00

@silverwind commented on GitHub (May 1, 2023):

Looks okay currently:

@silverwind commented on GitHub (May 1, 2023): Looks okay currently: <img width="300" alt="Screenshot 2023-05-01 at 21 54 26" src="https://user-images.githubusercontent.com/115237/235520061-183a9106-f64a-4c64-97f3-a33ef650ccd1.png">

GiteaMirror referenced this issue

2025-11-02 12:23:57 -06:00

[PR #3566] [MERGED] Fix remove team member issue #17000

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#3410