Skip to content
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

Fix inconsistent user profile layout across tabs #25625

Merged
merged 48 commits into from
Jul 6, 2023
Merged

Fix inconsistent user profile layout across tabs #25625

merged 48 commits into from
Jul 6, 2023

Conversation

puni9869
Copy link
Member

@puni9869 puni9869 commented Jul 2, 2023 •
edited
Loading

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

For Other Tabs:

image

Before

image

After changes

Project View
image

Packages View
image

Org view for projects page

image

Org view for packages page

image

@puni9869
Adjusting profile layout for package, project and code page.
519293d 
Big Profile avatar is implemented.
Org profile avatar is separated out from profile avater file.
Org layout for code, project, packages and package_versions pages is simplified.
@puni9869
Templates and go file formatting
aaa5f71
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 2, 2023
@pull-request-size pull-request-size bot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label Jul 2, 2023
@puni9869
Copy link
Member Author

puni9869 commented Jul 2, 2023 •
edited
Loading

I tried my best to not use if-else based check in templates. 💯
As mentioned here #25108 (comment) by @wxiaoguang (thanks a ton for the suggestions @wxiaoguang)
tagging @delvh @lunny @silverwind

@denyskon denyskon added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Jul 2, 2023
@puni9869
Copy link
Member Author

puni9869 commented Jul 2, 2023

@denyskon Please tag this pr to v1.21 milestone

@denyskon
Copy link
Member

denyskon commented Jul 2, 2023

I don't have the permission to assign to milestone

@lunny lunny added this to the 1.21.0 milestone Jul 2, 2023
@wxiaoguang
Copy link
Contributor

wxiaoguang commented Jul 2, 2023 •
edited
Loading

Some problems:

  1. The shared/user.PrepareContextForProfileBigAvatar(ctx *context.Context) duplicates a lot code of web/user.Profile(ctx *context.Context)
    • if the "shared" functions does the right thing, the web/user.Profile should also use it.
  2. The layout seems not right. There should be only one <div main page-content>

image

@puni9869
Copy link
Member Author

puni9869 commented Jul 2, 2023 •
edited
Loading

Some problems:

  1. The shared/user.PrepareContextForProfileBigAvatar(ctx *context.Context) duplicates a lot code of web/user.Profile(ctx *context.Context)

    • if the "shared" functions does the right thing, the web/user.Profile should also use it.

Yes, I agree with your point. But with profile page the code is shared between followers, followings, stars, activity and in repository tabs. The impact radius is large so I don't want to touch that code. We need a complete restructure of Profile Page in repo mode.

  1. The layout seems not right. There should be only one <div main page-content>

image

Fixed.

@wxiaoguang
Copy link
Contributor

What are the <div class="page-content"> and <div class="ui repository packages"> used for in 8eb033e ? I do not think they make sense.

The "page-content" means a whole page's main content in Gitea's templates, so only one for each page. Mixing them would cause unintentional style/selector conflicts.

@puni9869
Copy link
Member Author

puni9869 commented Jul 3, 2023 •
edited
Loading

ui repository packages

There was a previous style tagged to below code. That was creating the problem.
image

Can you test versionlist page. I don't have any package in local.

@wxiaoguang
Copy link
Contributor

You can use "curl" to push a generic package.

https://docs.gitea.com/packages/usage/packages/generic

@wxiaoguang
Copy link
Contributor

wxiaoguang commented Jul 5, 2023 •
edited
Loading

Almost done from my side.

Now the "nav menu" has consistent layouts, and a lot of duplicate code has been merged.

There might be still some problems in code, but I think it's easier to fix any problem in the future after this PR.

image

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jul 5, 2023
@delvh delvh changed the title Fix ::User Profile Page - Project/Packages Tabs Have Inconsistent Layout Fix inconsistent user profile layout across tabs Jul 5, 2023
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jul 6, 2023
@silverwind
Copy link
Member

I like this +411 −349 better :)

@silverwind
Copy link
Member

Gave it another quick test, still working fine. Pushed one small indendation fix.

@silverwind silverwind enabled auto-merge (squash) July 6, 2023 18:32
@puni9869
Copy link
Member Author

puni9869 commented Jul 6, 2023

Gave it another quick test, still working fine. Pushed one small indendation fix.

Looks good. Tested.

@silverwind silverwind merged commit 2af30f7 into go-gitea:main Jul 6, 2023
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jul 6, 2023
zjjhot added a commit to zjjhot/gitea that referenced this pull request Jul 7, 2023
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
55bdbdd 
* giteaofficial/main:
  [skip ci] Updated translations via Crowdin
  Remove unused code (go-gitea#25734)
  Fix commits table regression (go-gitea#25710)
  Fix inconsistent user profile layout across tabs (go-gitea#25625)
  Simplify the LFS GC logger usage (go-gitea#25717)
  Allow/fix review (approve/reject) of empty PRs (go-gitea#25690)
  Correct permissions for `.ssh` and `authorized_keys` (go-gitea#25721)
  Sync branches when mirroring (go-gitea#25722)
@wxiaoguang wxiaoguang mentioned this pull request Jul 7, 2023
Merged
silverwind pushed a commit that referenced this pull request Jul 7, 2023
@wxiaoguang @GiteaBot
Following up fixes for "Fix inconsistent user profile layout across t…
128d77a 
…abs" (#25739)

Follow
#25625 (comment)

1. Fix the incorrect "project view" layout
2. Fix the "follow/unfollow" link on "packages" and "projects" tab


Before:


![image](https://github.com/go-gitea/gitea/assets/2114189/3b071235-c186-4097-8a19-dd90dcb2a344)


After:


![image](https://github.com/go-gitea/gitea/assets/2114189/d1d23cd7-28d8-43e3-9f68-03e8a34a9b97)

---------

Co-authored-by: Giteabot <teabot@gitea.io>
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Oct 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@wxiaoguang wxiaoguang wxiaoguang approved these changes

@silverwind silverwind silverwind approved these changes

Assignees
No one assigned
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
1.21.0
Development

Successfully merging this pull request may close these issues.

User Profile Page Tabs Have Inconsistent Layout and Style
6 participants
@puni9869 @denyskon @wxiaoguang @silverwind @lunny @GiteaBot