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 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

6
templates/admin/repo/list.tmpl
Unescape 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
Unescape 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 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">

17
templates/explore/repo_list.tmpl
Unescape View File

@ -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}}

30
templates/repo/header.tmpl
Unescape View File

@ -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">

7
web_src/css/base.css
Unescape View File

@ -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;

12
web_src/css/helpers.css
Unescape View File

@ -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;
}
}

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 { #navbar a.item .notification_count {
color: var(--color-nav-bg); color: var(--color-nav-bg);
padding: 0 3.75px; 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; 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;
}
}

Write Preview
Loading…
Cancel
Save