Skip to content

User Profile Page Tabs Have Inconsistent Layout and Style #24871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
yekanchi opened this issue May 23, 2023 · 7 comments · Fixed by #25625
Closed

User Profile Page Tabs Have Inconsistent Layout and Style #24871

yekanchi opened this issue May 23, 2023 · 7 comments · Fixed by #25625
Assignees
@puni9869
Labels
topic/ui Change the appearance of the Gitea UI

Comments

@yekanchi
Copy link

Description

in the user profile page the Packages and Projects tab have small icons for user but other tabs have bigger profile picture with user info:

Screenshots

For Packages And Projects:

image

For Other Tabs:

image

Gitea Version

1.19

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

No response

Browser Version

110
@yekanchi yekanchi added type/bug topic/ui Change the appearance of the Gitea UI labels May 23, 2023
@yekanchi yekanchi changed the title User Profile Tabs Have Inconsistent Layout and Style User Profile Page Tabs Have Inconsistent Layout and Style May 23, 2023
@lunny
Copy link
Member

lunny commented May 23, 2023

duplicated with #24848

@lunny lunny closed this as completed May 23, 2023
@lunny lunny added issue/duplicate The issue has already been reported. and removed type/bug labels May 23, 2023
@yekanchi
Copy link
Author

duplicated with #24848

this is not duplicate of #24848
this issue is related to size of and position of user profile when switching between Tabs.

@lunny lunny reopened this May 23, 2023
@lunny lunny removed the issue/duplicate The issue has already been reported. label May 23, 2023
@silverwind
Copy link
Member

silverwind commented May 23, 2023 •
edited
Loading

Yes, those pages should use all use the "big box" style, and likely also leave less space between user box and page content.

@puni9869
Copy link
Member

Please assign this to me

@puni9869
Copy link
Member

puni9869 commented May 30, 2023 •
edited
Loading

This is the new UI.
image

Ui is distorted
image

Do I need to modify also
tplProjects base.TplName = "org/projects/list"
tplProjectsNew base.TplName = "org/projects/new"

@delvh

@silverwind
Copy link
Member

silverwind commented May 30, 2023 •
edited
Loading

Projects list renders in a few "full width" places only so far. It's likely that some CSS changes need to be done to it to make it behave in smaller spaces.

Take a look at templates/shared/issuelist, this is a template that is also rendered in many places, both big and small.

@yekanchi
Copy link
Author

This is the new UI. image

Ui is distorted image

Do I need to modify also tplProjects base.TplName = "org/projects/list" tplProjectsNew base.TplName = "org/projects/new"

@delvh
looks good.
the organizations page also have a similar problem. if you change the tabs you will notice the inconsistency.

This was referenced May 31, 2023
Closed
Closed
@puni9869 puni9869 mentioned this issue Jul 2, 2023
Merged
silverwind added a commit that referenced this issue Jul 6, 2023
@puni9869 @wxiaoguang
@GiteaBot @silverwind
Fix inconsistent user profile layout across tabs (#25625)
2af30f7 
Fix ::User Profile Page  Project Tab Have Inconsistent Layout and Style
Added the big_avator for consistency in the all header_items tabs.
Fixes: #24871
> ### Description
> in the user profile page the `Packages` and `Projects` tab have small
icons for user but other tabs have bigger profile picture with user
info:
> 
> ### Screenshots
> ### **For Packages And Projects:**
>
![image](https://user-images.githubusercontent.com/25511175/240148601-2420d77b-ba25-4718-9ccb-c5d0d95e3079.png)
> 
> ### **For Other Tabs:**
>
![image](https://user-images.githubusercontent.com/25511175/240148461-ce9636b3-fe11-4c46-a230-30d83eee5947.png)
> 

## Before

![image](https://github.com/go-gitea/gitea/assets/80308335/975ad038-07ca-4b10-b75d-ccf259be7b9d)


 ## After changes
Project View 
<img width="1394" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/95d181d7-8e61-496d-9899-7b825c91ad56">


Packages View
<img width="1378" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/7f5fd60f-6b18-4fa8-8c56-7b0d45d1a610">


## Org view for projects page
<img width="1385" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/6400dc89-a5ae-4f0a-831b-5b6efa020d89">

## Org view for packages page
<img width="1387" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/4e1e9ffe-1e4b-4334-8657-de11b5fd31d0">

---------

Co-authored-by: wxiaoguang <[email protected]>
Co-authored-by: Giteabot <[email protected]>
Co-authored-by: silverwind <[email protected]>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@puni9869 puni9869

Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix inconsistent user profile layout across tabs puni9869/gitea
4 participants
@lunny @silverwind @yekanchi @puni9869