mirror of
https://github.com/go-gitea/gitea
synced 2024-09-12 17:37:21 +02:00
Refactor repo header/list (#29969)
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)
This commit is contained in:
parent
d6fed9ab88
commit
bfa160fc98
@ -1063,6 +1063,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
|
||||||
@ -2966,9 +2967,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
|
||||||
|
@ -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>
|
||||||
|
@ -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 gt-df gt-ac">
|
<span class="text gt-df gt-ac">
|
||||||
{{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="gt-df gt-ac">
|
<div class="gt-df gt-ac">
|
||||||
@ -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 gt-df gt-ac">
|
<span class="text gt-df gt-ac">
|
||||||
{{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">
|
||||||
|
@ -30,16 +30,23 @@
|
|||||||
{{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">{{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}}
|
||||||
<a class="text grey flex-text-inline" href="{{.Link}}/forks">{{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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{$description := .DescriptionHTML $.Context}}
|
{{$description := .DescriptionHTML $.Context}}
|
||||||
|
@ -3,29 +3,31 @@
|
|||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<div class="repo-header">
|
<div class="repo-header">
|
||||||
<div class="flex-item gt-ac">
|
<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 gt-font-18">
|
<div class="flex-item-title gt-font-18">
|
||||||
<a class="muted gt-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>
|
||||||
@ -76,7 +78,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*/}}
|
||||||
@ -84,10 +86,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">
|
||||||
|
@ -1252,13 +1252,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;
|
||||||
|
@ -199,3 +199,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
.fork-flag {
|
.header-wrapper .fork-flag {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
@ -15,11 +15,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,10 +24,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;
|
||||||
@ -75,15 +68,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-header .flex-item-trailing .label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.repo-header .flex-item-trailing .repo-icon {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user