Infrastructure/forgejo
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-22 23:33:15 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
options/locale/locale_en-US.ini
View file

@ -1083,6 +1083,7 @@ watchers = Watchers
stargazers = Stargazers stargazers = Stargazers
stars_remove_warning = This will remove all stars from this repository. stars_remove_warning = This will remove all stars from this repository.
forks = Forks forks = Forks
stars = Stars
reactions_more = and %d more reactions_more = and %d more
unit_disabled = The site administrator has disabled this repository section. unit_disabled = The site administrator has disabled this repository section.
language_other = Other language_other = Other
@ -3008,9 +3009,6 @@ repos.unadopted.no_more = No more unadopted repositories found
repos.owner = Owner repos.owner = Owner
repos.name = Name repos.name = Name
repos.private = Private repos.private = Private
repos.watches = Watches
repos.stars = Stars
repos.forks = Forks
repos.issues = Issues repos.issues = Issues
repos.size = Size repos.size = Size
repos.lfs_size = LFS Size repos.lfs_size = LFS Size

6
templates/admin/repo/list.tmpl
View file

@ -19,13 +19,13 @@
{{ctx.Locale.Tr "admin.repos.name"}} {{ctx.Locale.Tr "admin.repos.name"}}
{{SortArrow "alphabetically" "reversealphabetically" $.SortType false}} {{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
</th> </th>
<th>{{ctx.Locale.Tr "admin.repos.watches"}}</th> <th>{{ctx.Locale.Tr "repo.watchers"}}</th>
<th data-sortt-asc="moststars" data-sortt-desc="feweststars"> <th data-sortt-asc="moststars" data-sortt-desc="feweststars">
{{ctx.Locale.Tr "admin.repos.stars"}} {{ctx.Locale.Tr "repo.stars"}}
{{SortArrow "moststars" "feweststars" $.SortType false}} {{SortArrow "moststars" "feweststars" $.SortType false}}
</th> </th>
<th data-sortt-asc="mostforks" data-sortt-desc="fewestforks"> <th data-sortt-asc="mostforks" data-sortt-desc="fewestforks">
{{ctx.Locale.Tr "admin.repos.forks"}} {{ctx.Locale.Tr "repo.forks"}}
{{SortArrow "mostforks" "fewestforks" $.SortType false}} {{SortArrow "mostforks" "fewestforks" $.SortType false}}
</th> </th>
<th>{{ctx.Locale.Tr "admin.repos.issues"}}</th> <th>{{ctx.Locale.Tr "admin.repos.issues"}}</th>

10
templates/base/head_navbar.tmpl
View file

@ -11,7 +11,7 @@
</a> </a>
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column --> <!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
<div class="ui secondary menu item navbar-mobile-right"> <div class="ui secondary menu item navbar-mobile-right only-mobile">
{{if .IsSigned}} {{if .IsSigned}}
<a id="mobile-notifications-icon" class="item tw-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}"> <a id="mobile-notifications-icon" class="item tw-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative"> <div class="tw-relative">
@ -58,7 +58,7 @@
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text tw-flex tw-items-center"> <span class="text tw-flex tw-items-center">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}} {{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span> <span class="only-mobile gt-ml-3">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">
@ -80,7 +80,7 @@
{{svg "octicon-stopwatch"}} {{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span> <span class="header-stopwatch-dot"></span>
</div> </div>
<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span> <span class="only-mobile gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
</a> </a>
<div class="active-stopwatch-popup item tippy-target gt-p-3"> <div class="active-stopwatch-popup item tippy-target gt-p-3">
<div class="tw-flex tw-items-center"> <div class="tw-flex tw-items-center">
@ -122,7 +122,7 @@
<span class="text"> <span class="text">
{{svg "octicon-plus"}} {{svg "octicon-plus"}}
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span> <span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
</span> </span>
<div class="menu"> <div class="menu">
<a class="item" href="{{AppSubUrl}}/repo/create"> <a class="item" href="{{AppSubUrl}}/repo/create">
@ -144,7 +144,7 @@
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text tw-flex tw-items-center"> <span class="text tw-flex tw-items-center">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}} {{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span> <span class="only-mobile gt-ml-3">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">

17
templates/explore/repo_list.tmpl
View file

@ -30,17 +30,24 @@
{{end}} {{end}}
</span> </span>
</div> </div>
<div class="flex-item-trailing"> <div class="flex-item-trailing muted-links">
{{if .PrimaryLanguage}} {{if .PrimaryLanguage}}
<a class="muted" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}"> <a class="flex-text-inline" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span> <i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>
{{.PrimaryLanguage.Language}}
</a> </a>
{{end}} {{end}}
{{if not $.DisableStars}} {{if not $.DisableStars}}
<a class="text grey flex-text-inline" href="{{.Link}}/stars" aria-label="{{ctx.Locale.TrN .NumStars "explore.stars_one" "explore.stars_few" .NumStars}}">{{svg "octicon-star" 16}}{{.NumStars}}</a> <a class="flex-text-inline" href="{{.Link}}/stars">
<span aria-label="{{ctx.Locale.Tr "repo.stars"}}">{{svg "octicon-star" 16}}</span>
<span {{if ge .NumStars 1000}}data-tooltip-content="{{.NumStars}}"{{end}}>{{CountFmt .NumStars}}</span>
</a>
{{end}} {{end}}
{{if not $.DisableForks}} {{if not $.DisableForks}}
<a class="text grey flex-text-inline" href="{{.Link}}/forks" aria-label="{{ctx.Locale.TrN .NumForks "explore.forks_one" "explore.forks_few" .NumForks}}">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a> <a class="flex-text-inline" href="{{.Link}}/forks">
<span aria-label="{{ctx.Locale.Tr "repo.forks"}}">{{svg "octicon-git-branch" 16}}</span>
<span {{if ge .NumForks 1000}}data-tooltip-content="{{.NumForks}}"{{end}}>{{CountFmt .NumForks}}</span>
</a>
{{end}} {{end}}
</div> </div>
</div> </div>

28
templates/repo/header.tmpl
View file

@ -2,30 +2,32 @@
{{with .Repository}} {{with .Repository}}
<div class="ui container"> <div class="ui container">
<div class="repo-header"> <div class="repo-header">
<div class="flex-item tw-items-center"> <div class="flex-item gt-ac">
<div class="flex-item-leading">{{template "repo/icon" .}}</div> <div class="flex-item-leading">
{{template "repo/icon" .}}
</div>
<div class="flex-item-main"> <div class="flex-item-main">
<div class="flex-item-title tw-text-18"> <div class="flex-item-title gt-font-18">
<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/ <a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div> </div>
</div> </div>
<div class="flex-item-trailing"> <div class="flex-item-trailing">
{{if .IsArchived}} {{if .IsArchived}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span> <span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div> <div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
{{end}} {{end}}
{{if .IsPrivate}} {{if .IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private"}}</span> <span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.private"}}</span>
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div> <div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div>
{{else}} {{else}}
{{if .Owner.Visibility.IsPrivate}} {{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal"}}</span> <span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div> <div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div>
{{end}} {{end}}
{{end}} {{end}}
{{if .IsTemplate}} {{if .IsTemplate}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span> <span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.template"}}</span>
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div> <div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div>
{{end}} {{end}}
{{if eq .ObjectFormatName "sha256"}} {{if eq .ObjectFormatName "sha256"}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.sha256"}}</span> <span class="ui basic label">{{ctx.Locale.Tr "repo.desc.sha256"}}</span>

6
templates/repo/header_fork.tmpl
View file

@ -13,7 +13,7 @@
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button" <a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
{{if not $.CanSignedUserFork}} {{if not $.CanSignedUserFork}}
{{if gt (len $.UserAndOrgForks) 1}} {{if gt (len $.UserAndOrgForks) 1}}
data-modal="#fork-repo-modal" href="#" data-modal="#fork-repo-modal"
{{else if eq (len $.UserAndOrgForks) 1}} {{else if eq (len $.UserAndOrgForks) 1}}
href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}" href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}} {{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
@ -21,10 +21,10 @@
{{else if not $.UserAndOrgForks}} {{else if not $.UserAndOrgForks}}
href="{{$.RepoLink}}/fork" href="{{$.RepoLink}}/fork"
{{else}} {{else}}
data-modal="#fork-repo-modal" href="#" data-modal="#fork-repo-modal"
{{end}} {{end}}
> >
{{svg "octicon-repo-forked"}}<span class="text">{{ctx.Locale.Tr "repo.fork"}}</span> {{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
</a> </a>
<div class="ui small modal" id="fork-repo-modal"> <div class="ui small modal" id="fork-repo-modal">
<div class="header"> <div class="header">

7
web_src/css/base.css
View file

@ -1336,13 +1336,6 @@ strong.attention-caution, svg.attention-caution {
text-align: center; text-align: center;
} }
@media (max-width: 767.98px) {
/* double selector so it wins over .gt-df etc */
.not-mobile.not-mobile {
display: none !important;
}
}
overflow-menu { overflow-menu {
margin-bottom: 15px !important; margin-bottom: 15px !important;
border-bottom: 1px solid var(--color-secondary) !important; border-bottom: 1px solid var(--color-secondary) !important;

12
web_src/css/helpers.css
View file

@ -154,3 +154,15 @@ only use:
* showElem/hideElem/toggleElem functions in "utils/dom.js" * showElem/hideElem/toggleElem functions in "utils/dom.js"
*/ */
.gt-hidden.gt-hidden { display: none !important; } .gt-hidden.gt-hidden { display: none !important; }
@media (max-width: 767.98px) {
/* double selector so it wins over .tw-flex (old .gt-df) etc */
.not-mobile.not-mobile {
display: none !important;
}
}
@media (min-width: 767.98px) {
.only-mobile.only-mobile {
display: none !important;
}
}

7
web_src/css/modules/navbar.css
View file

@ -108,13 +108,6 @@
} }
} }
@media (min-width: 767.98px) {
#navbar .navbar-mobile-right,
#navbar .mobile-only {
display: none;
}
}
#navbar a.item .notification_count { #navbar a.item .notification_count {
color: var(--color-nav-bg); color: var(--color-nav-bg);
padding: 0 3.75px; padding: 0 3.75px;

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

@ -1,4 +1,4 @@
.fork-flag { .header-wrapper .fork-flag {
margin-top: 0.5rem; margin-top: 0.5rem;
font-size: 12px; font-size: 12px;
} }
@ -14,11 +14,8 @@
padding: 0; padding: 0;
} }
.repo-header .btn.interact-bg:hover {
text-decoration: none;
}
.repo-header .flex-item-main { .repo-header .flex-item-main {
flex: 0;
flex-basis: unset; flex-basis: unset;
} }
@ -26,10 +23,6 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.repo-header .flex-item-trailing .repo-icon {
display: none;
}
.repo-buttons { .repo-buttons {
align-items: center; align-items: center;
display: flex; display: flex;
@ -74,24 +67,3 @@
padding-top: 12px; padding-top: 12px;
background-color: var(--color-header-wrapper); 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;
}
}