mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki 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)
pull/29973/head^2
wxiaoguang 8 months ago committed by GitHub
parent d6fed9ab88
commit bfa160fc98
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 51 additions and 65 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      options/locale/locale_en-US.ini
  2. 6
      templates/admin/repo/list.tmpl
  3. 10
      templates/base/head_navbar.tmpl
  4. 17
      templates/explore/repo_list.tmpl
  5. 30
      templates/repo/header.tmpl
  6. 7
      web_src/css/base.css
  7. 12
      web_src/css/helpers.css
  8. 7
      web_src/css/modules/navbar.css
  9. 23
      web_src/css/repo/header.css

4
options/locale/locale_en-US.ini
Unescape View File

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

6
templates/admin/repo/list.tmpl
Unescape View File

@ -19,13 +19,13 @@
{{ctx.Locale.Tr "admin.repos.name"}}
{{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
</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">
{{ctx.Locale.Tr "admin.repos.stars"}}
{{ctx.Locale.Tr "repo.stars"}}
{{SortArrow "moststars" "feweststars" $.SortType false}}
</th>
<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}}
</th>
<th>{{ctx.Locale.Tr "admin.repos.issues"}}</th>

10
templates/base/head_navbar.tmpl
Unescape View File

@ -11,7 +11,7 @@
</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 -->
<div class="ui secondary menu item navbar-mobile-right">
<div class="ui secondary menu item navbar-mobile-right only-mobile">
{{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"}}">
<div class="tw-relative">
@ -58,7 +58,7 @@
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text gt-df gt-ac">
{{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>
<div class="menu user-menu">
@ -80,7 +80,7 @@
{{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span>
</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>
<div class="active-stopwatch-popup item tippy-target gt-p-3">
<div class="gt-df gt-ac">
@ -122,7 +122,7 @@
<span class="text">
{{svg "octicon-plus"}}
<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>
<div class="menu">
<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"}}">
<span class="text gt-df gt-ac">
{{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>
<div class="menu user-menu">

17
templates/explore/repo_list.tmpl
Unescape View File

@ -30,16 +30,23 @@
{{end}}
</span>
</div>
<div class="flex-item-trailing">
<div class="flex-item-trailing muted-links">
{{if .PrimaryLanguage}}
<a class="muted" 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>
<a class="flex-text-inline" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
<i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>
{{.PrimaryLanguage.Language}}
</a>
{{end}}
{{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}}
<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>
{{$description := .DescriptionHTML $.Context}}

30
templates/repo/header.tmpl
Unescape View File

@ -3,29 +3,31 @@
<div class="ui container">
<div class="repo-header">
<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-title gt-font-18">
<a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
<a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
</div>
</div>
<div class="flex-item-trailing">
{{if .IsArchived}}
<span class="ui basic label">{{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>
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
{{end}}
{{if .IsPrivate}}
<span class="ui basic label">{{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>
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.private"}}</span>
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div>
{{else}}
{{if .Owner.Visibility.IsPrivate}}
<span class="ui basic label">{{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>
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div>
{{end}}
{{end}}
{{if .IsTemplate}}
<span class="ui basic label">{{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>
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.template"}}</span>
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div>
{{end}}
{{if eq .ObjectFormatName "sha256"}}
<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"
{{if not $.CanSignedUserFork}}
{{if gt (len $.UserAndOrgForks) 1}}
data-modal="#fork-repo-modal"
href="#" data-modal="#fork-repo-modal"
{{else if eq (len $.UserAndOrgForks) 1}}
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*/}}
@ -84,10 +86,10 @@
{{else if not $.UserAndOrgForks}}
href="{{$.RepoLink}}/fork"
{{else}}
data-modal="#fork-repo-modal"
href="#" data-modal="#fork-repo-modal"
{{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>
<div class="ui small modal" id="fork-repo-modal">
<div class="header">

7
web_src/css/base.css
Unescape View File

@ -1252,13 +1252,6 @@ strong.attention-caution, svg.attention-caution {
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 {
margin-bottom: 15px !important;
border-bottom: 1px solid var(--color-secondary) !important;

12
web_src/css/helpers.css
Unescape View File

@ -199,3 +199,15 @@ only use:
* showElem/hideElem/toggleElem functions in "utils/dom.js"
*/
.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
Unescape 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 {
color: var(--color-nav-bg);
padding: 0 3.75px;

23
web_src/css/repo/header.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save