Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Repo homepage styling tweaks#33289

Merged
silverwind merged 8 commits intogo-gitea:mainfrom
silverwind:sidebar-width
Jan 24, 2025
Merged

Repo homepage styling tweaks#33289
silverwind merged 8 commits intogo-gitea:mainfrom
silverwind:sidebar-width

Conversation

@silverwind
Copy link
Member

Reduce it to a value that results in.repo-home-sidebar-top and.repo-home-sidebar-bottom having 240px content width, the same as GitHub.

Before:
Screenshot 2025-01-15 at 18 28 34

After:
Screenshot 2025-01-15 at 18 28 27

Reduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.
@GiteaBotGiteaBot added the lgtm/need 2This PR needs two approvals by maintainers to be considered for merging. labelJan 15, 2025
@silverwindsilverwind added the type/enhancementAn improvement of existing functionality labelJan 15, 2025
@techknowlogicktechknowlogick added the topic/uiChange the appearance of the Gitea UI labelJan 15, 2025
@GiteaBotGiteaBot added lgtm/need 1This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2This PR needs two approvals by maintainers to be considered for merging. labelsJan 15, 2025
@silverwind
Copy link
MemberAuthor

Adding backport as I would like to have this in 1.23, and it's a stylistic change only.

@lunnylunny requested a review fromyp05327January 15, 2025 19:10
@yp05327
Copy link
Contributor

yp05327 commentedJan 16, 2025
edited
Loading

image

having 240px content width, the same as GitHub.

For my case, it is around 300px in GitHub.

@lunny
Copy link
Member

image

having 240px content width, the same as GitHub.

For my case, it is around 300px in GitHub.

Same for me.

@wxiaoguang
Copy link
Contributor

For my case, it is around 300px in GitHub.

Same for me.

Same for me.

@silverwind
Copy link
MemberAuthor

silverwind commentedJan 16, 2025
edited
Loading

Huh, mine is definitely 240px, even if I zoom out. Same for issue sidebar btw (I will tackle that in Gitea in another PR).

image

@silverwind
Copy link
MemberAuthor

silverwind commentedJan 16, 2025
edited
Loading

Ah, I see the 240px comes from a userstyle of mine that sets--Layout-sidebar-width: 240px. Still I think 300px is too much and slightly smaller look better.

@yp05327
Copy link
Contributor

yp05327 commentedJan 16, 2025
edited
Loading

It seems that it is related to the screen size:
image

I prefer this.

@silverwind
Copy link
MemberAuthor

Yes, that makes sense. On a small screen like mine, 300px is too much. On big screen, it's ok. I will add a CSS variable, WIP until then.

yp05327 reacted with thumbs up emoji

@silverwindsilverwind marked this pull request as draftJanuary 16, 2025 11:09
@silverwindsilverwind marked this pull request as ready for reviewJanuary 22, 2025 23:54
@silverwind
Copy link
MemberAuthor

silverwind commentedJan 22, 2025
edited
Loading

I ended up just matching GitHub's 296px now, e.g. 4px smaller sidebar now.

Also I changed padding to gap, using the CSS variable, so spacing is now 2px larger.

Minor, but still worth a backport imho 😉

@silverwind
Copy link
MemberAuthor

Added a CSS variable for it and used it on issue sidebar as well which was also 300px.

@yp05327
Copy link
Contributor

The width in GitHub does not include the padding space, but Gitea side does.
Actually, for my case, the current width is 286px, which is 10px smaller than GitHub.
image
image
image

So it is notreduce butincrease (in title) for my case. 😂

@silverwind
Copy link
MemberAuthor

How come it's 286px for you? The CSS variable is 296px for me and that matches the rendering:

imageimage

The width in GitHub does not include the padding space, but Gitea side does.

No, the width you see in the devtools is always without padding, so content width was 300 before, is now 296. In any case, this PR removes the padding in favor ofgap.

@yp05327
Copy link
Contributor

yp05327 commentedJan 23, 2025
edited
Loading

How come it's 286px for you?

It is the width in main branch, not from this PR.
In this PR, I also get 296px 😃

So it is not reduce but increase (in title) for my case. 😂

@silverwind
Copy link
MemberAuthor

You're right. Main branch content width is 300px - 1rem, which is 286px.

@silverwind
Copy link
MemberAuthor

silverwind commentedJan 23, 2025
edited
Loading

Let's just call the PR an adjustment then:

  • Sidebar content width in repo goes from 286px to 296px
  • Sidebar width in issue goes from 300px to 296px (still has padding)

Would have liked to go a bit lower, but the issue sidebar does not work well with lower values, so I guess best is to keep the width and keep them the same.

@github-actionsgithub-actionsbot added the modifies/templatesThis PR modifies the template files labelJan 23, 2025
@silverwindsilverwind changed the titleAdjust repo sidebar widthRepo homepage CSS tweaksJan 23, 2025
@silverwind
Copy link
MemberAuthor

Added one more tiny change: Remove margin on top of these elements. Other tab contents also did not have this margin, so tab switching to issue list looks better now.

image

@silverwindsilverwind changed the titleRepo homepage CSS tweaksRepo homepage styling tweaksJan 23, 2025
@silverwind
Copy link
MemberAuthor

Ah I think it's actually not a good idea to couple these sidebars just yet because one has padding and the other not. So I ended up reverting and reducing the sidebar width very slightly from 286px to 280px.

@hiifong
Copy link
Member

hiifong commentedJan 23, 2025
edited
Loading

image
When the window's width is less than 1000px or so, the width of GitHub's sidebar will be 240px.

I think we can add a media query to keep the same width as GitHub.

@silverwind
Copy link
MemberAuthor

When the window's width is less than 1000px or so, the width of GitHub's sidebar will be 240px.

No, as you showed in#33289 (comment), they only downsize it starting at 768px width, but at that breakpoint, gitea switches to single-column layout, so there is no point at altering the size at 768px.

hiifong reacted with thumbs up emoji

@GiteaBotGiteaBot added lgtm/doneThis PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1This PR needs approval from one additional maintainer to be merged. labelsJan 24, 2025
@silverwindsilverwind added the reviewed/wait-mergeThis pull request is part of the merge queue. It will be merged soon. labelJan 24, 2025
@silverwindsilverwindenabled auto-merge (squash)January 24, 2025 17:00
@silverwindsilverwind merged commit642e8c1 intogo-gitea:mainJan 24, 2025
26 checks passed
@GiteaBotGiteaBot added this to the1.24.0 milestoneJan 24, 2025
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull requestJan 24, 2025
Reduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.Before:<img width="1333" alt="Screenshot 2025-01-15 at 18 28 34"src="https://github.com/user-attachments/assets/cf0fa21b-87be-40e3-a6cd-26d146bce9cc"/>After:<img width="1330" alt="Screenshot 2025-01-15 at 18 28 27"src="https://github.com/user-attachments/assets/28acd837-10f4-4176-b8a0-510cd28c8b8d"/>
@GiteaBotGiteaBot removed the reviewed/wait-mergeThis pull request is part of the merge queue. It will be merged soon. labelJan 24, 2025
@GiteaBotGiteaBot added the backport/doneAll backports for this PR have been created labelJan 24, 2025
techknowlogick pushed a commit that referenced this pull requestJan 24, 2025
Backport#33289 by@silverwindReduce it to a value that results in `.repo-home-sidebar-top` and`.repo-home-sidebar-bottom` having 240px content width, the same asGitHub.Co-authored-by: silverwind <me@silverwind.io>
@go-giteago-gitea locked asresolvedand limited conversation to collaboratorsApr 24, 2025
Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.

Reviewers

@techknowlogicktechknowlogicktechknowlogick approved these changes

@yp05327yp05327Awaiting requested review from yp05327

+1 more reviewer

@hiifonghiifonghiifong approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

backport/doneAll backports for this PR have been createdlgtm/doneThis PR has enough approvals to get merged. There are no important open reservations anymore.modifies/templatesThis PR modifies the template filestopic/uiChange the appearance of the Gitea UItype/enhancementAn improvement of existing functionality

Projects

None yet

Milestone

1.24.0

Development

Successfully merging this pull request may close these issues.

7 participants

@silverwind@yp05327@lunny@wxiaoguang@hiifong@techknowlogick@GiteaBot

[8]ページ先頭

©2009-2026 Movatter.jp