domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Refactor repo header/list (#29969)

Browse source 
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)

(cherry picked from commit bfa160fc98a23923b6ce1cd4d99e8970d937d6ec)

Conflicts:
	templates/explore/repo_list.tmpl
	templates/repo/header.tmpl
	web_src/css/repo/header.css

 Resolved the template conflicts by porting the changes to Forgejo (in
 case of `header.tmpl`, applying the changes in `header_fork.tmpl). In
 case of the CSS change, opted to take Gitea's version and drop the
 entire media query.
This commit is contained in:
wxiaoguang 2024-03-22 01:04:03 +08:00 • committed by Gergely Nagy
parent d5a3f14063
commit 65e190ae8b
No known key found for this signature in database
10 changed files with 53 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web_src/css/repo/header.css
View file

@ -1,4 +1,4 @@
.fork-flag {
.header-wrapper .fork-flag {
margin-top: 0.5rem;
font-size: 12px;
}
@ -14,11 +14,8 @@
padding: 0;
}
.repo-header .btn.interact-bg:hover {
text-decoration: none;
}
.repo-header .flex-item-main {
flex: 0;
flex-basis: unset;
}
@ -26,10 +23,6 @@
flex-wrap: nowrap;
}
.repo-header .flex-item-trailing .repo-icon {
display: none;
}
.repo-buttons {
align-items: center;
display: flex;
@ -74,24 +67,3 @@
padding-top: 12px;
background-color: var(--color-header-wrapper);
}
@media (max-width: 767.98px) {
.repo-header .flex-item {
flex-grow: 1;
}
.repo-buttons .ui.labeled.button .text,
.repo-header .flex-item-trailing .label {
/* the elements are hidden from users with intact eye vision,
* because SVG icons convey the meaning.
* However, they should remain accessible to screen readers */
position: absolute;
left: -1000vw;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.repo-header .flex-item-trailing .repo-icon {
display: initial;
}
}