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.

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

Refactor repo header/list #29969

Merged
merged 6 commits into from
Mar 21, 2024
Merged

Refactor repo header/list #29969

merged 6 commits into from
Mar 21, 2024

Conversation

wxiaoguang
Copy link
Contributor

  1. Use general "mobile-only" and "not-mobile" CSS styles, remove some @media (max-width: 767.98px) tricks
  2. Use CountFmt for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)

image

image

image

@wxiaoguang wxiaoguang added this to the 1.22.0 milestone Mar 21, 2024
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Mar 21, 2024
@pull-request-size pull-request-size bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Mar 21, 2024
@wxiaoguang wxiaoguang enabled auto-merge (squash) March 21, 2024 13:24
@silverwind
Copy link
Member

silverwind commented Mar 21, 2024

Sidenote: longterm we should use the tailwind responsive prefixes over .not-mobile:

https://tailwindcss.com/docs/responsive-design

@wxiaoguang
Copy link
Contributor Author

Sidenote: longterm we should use th tailwind responsive prefixes over .not-mobile:

https://tailwindcss.com/docs/responsive-design

It could be. At the moment, "not-mobile" and "mobile-only" have been widely used. So I think it's good to keep using them, and refactor them together later.

@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Mar 21, 2024

Oh by the way, I think for this special case, "not-mobile" and "mobile-only" are still good enough. And they selectors need to be doubled to win the chance (see the old comment)

@silverwind
Copy link
Member

silverwind commented Mar 21, 2024

Yeah we need to work out how to use those tailwind classes. To me it's confusing that they use min-width instead of max-width like all our media queries do. I think we might want to reverse that behaviour in tailwind config.

@pull-request-size pull-request-size bot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Mar 21, 2024
@silverwind
Copy link
Member

silverwind commented Mar 21, 2024

I wonder, can we figure out a tailwind class that does what mobile-only does, avoiding that introduction?

@wxiaoguang
Copy link
Contributor Author

wxiaoguang commented Mar 21, 2024

I wonder, can we figure out a tailwind class that does what mobile-only does, avoiding that introduction?

not-mobile and mobile-only have been widely used, this PR doesn't introduce them, but only uses them.

image

@silverwind
Copy link
Member

Huh, according to the CSS diff the class was only on #navbar .mobile-only?

@silverwind
Copy link
Member

silverwind commented Mar 21, 2024

I see the 4 matches:

templates/base/head_navbar.tmpl:61:					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
templates/base/head_navbar.tmpl:83:				<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
templates/base/head_navbar.tmpl:125:					<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
templates/base/head_navbar.tmpl:147:					<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
web_src/css/modules/navbar.css:113:  #navbar .mobile-only {

Can we at least rename it to only-mobile so it's consistent with word order of not-mobile?

@wxiaoguang
Copy link
Contributor Author

I see the 4 matches:

Yup, there were 4 matches, and I added 4~5 in this PR, not too many, and they have a clear / non-conflicting name, it could be easily refactored later (which is not in this PR's scope)

Can we at least rename it to only-mobile so it's consistent with word order of not-mobile?

If you really would like: 8cda574

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Mar 21, 2024
@GiteaBot GiteaBot removed the lgtm/need 1 This PR needs approval from one additional maintainer to be merged. label Mar 21, 2024
@GiteaBot GiteaBot added the lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. label Mar 21, 2024
@wxiaoguang wxiaoguang added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 21, 2024
@wxiaoguang wxiaoguang merged commit bfa160f into go-gitea:main Mar 21, 2024
26 checks passed
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 21, 2024
@wxiaoguang wxiaoguang deleted the refactor-repo branch March 21, 2024 17:04
silverwind added a commit to silverwind/gitea that referenced this pull request Mar 21, 2024
* origin/main: (332 commits)
  Refactor external URL detection (go-gitea#29973)
  Refactor repo header/list (go-gitea#29969)
  Fix various loading states, remove `.loading` class (go-gitea#29920)
  Update register application URL for GitLab (go-gitea#29959)
  Refactor StringsToInt64s (go-gitea#29967)
  Switch to happy-dom for testing (go-gitea#29948)
  Performance improvements for pull request list page (go-gitea#29900)
  Refactor URL detection (go-gitea#29960)
  Solving the issue of UI disruption when the review is deleted without refreshing (go-gitea#29951)
  Fix JS error and improve error message styles (go-gitea#29963)
  Fix the bug that user may logout if he switch pages too fast (go-gitea#29962)
  Cancel previous runs of the same PR automatically (go-gitea#29961)
  Exclude `routers/private/tests` from air (go-gitea#29949)
  Remove codecov badge (go-gitea#29950)
  Misc color tweaks (go-gitea#29943)
  Fix and rewrite markup anchor processing (go-gitea#29931)
  Remove fomantic grid module (go-gitea#29894)
  Add background to dashboard navbar, fix missing padding (go-gitea#29940)
  Prevent layout shift in `<overflow-menu>` items (go-gitea#29831)
  Fix loadOneBranch panic (go-gitea#29938)
  ...
zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 22, 2024
* giteaofficial/main:
  Fix bugs in rerunning jobs (go-gitea#29955)
  remove PATH and GOPATH modification in Makefile (go-gitea#29978)
  Refactor external URL detection (go-gitea#29973)
  Refactor repo header/list (go-gitea#29969)
  Fix various loading states, remove `.loading` class (go-gitea#29920)
  Update register application URL for GitLab (go-gitea#29959)
  Refactor StringsToInt64s (go-gitea#29967)
  Switch to happy-dom for testing (go-gitea#29948)
  Performance improvements for pull request list page (go-gitea#29900)
@wxiaoguang wxiaoguang added the type/refactoring Existing code has been cleaned up. There should be no new functionality. label Apr 27, 2024
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Jun 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/templates This PR modifies the template files modifies/translation size/L Denotes a PR that changes 100-499 lines, ignoring generated files. type/refactoring Existing code has been cleaned up. There should be no new functionality.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants