From 65e190ae8bd6c72d8701a58d67b256c87b92c189 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 22 Mar 2024 01:04:03 +0800
Subject: [PATCH 1/2] 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)
(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.
---
options/locale/locale_en-US.ini | 4 +---
templates/admin/repo/list.tmpl | 6 +++---
templates/base/head_navbar.tmpl | 10 +++++-----
templates/explore/repo_list.tmpl | 17 ++++++++++++-----
templates/repo/header.tmpl | 28 +++++++++++++++-------------
templates/repo/header_fork.tmpl | 6 +++---
web_src/css/base.css | 7 -------
web_src/css/helpers.css | 12 ++++++++++++
web_src/css/modules/navbar.css | 7 -------
web_src/css/repo/header.css | 32 ++------------------------------
10 files changed, 53 insertions(+), 76 deletions(-)
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index e93be52214..7cb8dfc084 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1083,6 +1083,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
@@ -3008,9 +3009,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
diff --git a/templates/admin/repo/list.tmpl b/templates/admin/repo/list.tmpl
index e977c8307c..4b27d87a45 100644
--- a/templates/admin/repo/list.tmpl
+++ b/templates/admin/repo/list.tmpl
@@ -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>
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index ad80d3367c..fac2809d17 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -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 tw-flex tw-items-center">
{{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="tw-flex tw-items-center">
@@ -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 tw-flex tw-items-center">
{{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">
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 505387988b..9e5042d650 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -30,17 +30,24 @@
{{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" 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}}
{{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}}
</div>
</div>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 53ce17dbcc..6f2bf42297 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -2,30 +2,32 @@
{{with .Repository}}
<div class="ui container">
<div class="repo-header">
- <div class="flex-item tw-items-center">
- <div class="flex-item-leading">{{template "repo/icon" .}}</div>
+ <div class="flex-item gt-ac">
+ <div class="flex-item-leading">
+ {{template "repo/icon" .}}
+ </div>
<div class="flex-item-main">
- <div class="flex-item-title tw-text-18">
- <a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
- <a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
+ <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>
</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>
diff --git a/templates/repo/header_fork.tmpl b/templates/repo/header_fork.tmpl
index 3ac8889615..b186a5859f 100644
--- a/templates/repo/header_fork.tmpl
+++ b/templates/repo/header_fork.tmpl
@@ -13,7 +13,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*/}}
@@ -21,10 +21,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">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e0c43442af..f78fd920e5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1336,13 +1336,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;
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index b7742b5cf9..c9c051faf4 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -154,3 +154,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;
+ }
+}
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index 11020df359..3673e89a11 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -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;
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index 482608a1a6..0a2c0c82ad 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -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;
- }
-}
From 2692ee3791edb56344f27207c6d9568c86111e8d Mon Sep 17 00:00:00 2001
From: Gergely Nagy <forgejo@gergo.csillger.hu>
Date: Wed, 27 Mar 2024 09:33:06 +0100
Subject: [PATCH 2/2] Further consistency in the repo header
The recent refactor imported from Gitea made the Fork counter/button in
the repo header appear as icon only on mobile, but left the Star & Watch
buttons unchanged, so they appeared with text. That resulted in the
mobile view looking a bit awkward, with half the widgets (rss & fork) as
icon-only, while the other half (star & watch) with both icon and text.
This changes the other two in the same way: to appear without text on
mobile.
Signed-off-by: Gergely Nagy <forgejo@gergo.csillger.hu>
---
templates/repo/star_unstar.tmpl | 4 ++--
templates/repo/watch_unwatch.tmpl | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/templates/repo/star_unstar.tmpl b/templates/repo/star_unstar.tmpl
index 9c342f4065..a407aa62f8 100644
--- a/templates/repo/star_unstar.tmpl
+++ b/templates/repo/star_unstar.tmpl
@@ -2,9 +2,9 @@
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsStaringRepo}}
- {{svg "octicon-star-fill"}}<span class="text">{{ctx.Locale.Tr "repo.unstar"}}</span>
+ {{svg "octicon-star-fill"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.unstar"}}</span>
{{else}}
- {{svg "octicon-star"}}<span class="text">{{ctx.Locale.Tr "repo.star"}}</span>
+ {{svg "octicon-star"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.star"}}</span>
{{end}}
</button>
<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
diff --git a/templates/repo/watch_unwatch.tmpl b/templates/repo/watch_unwatch.tmpl
index c42bc5a9e7..3fea509ede 100644
--- a/templates/repo/watch_unwatch.tmpl
+++ b/templates/repo/watch_unwatch.tmpl
@@ -2,9 +2,9 @@
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsWatchingRepo}}
- {{svg "octicon-eye-closed" 16}}<span class="text">{{ctx.Locale.Tr "repo.unwatch"}}</span>
+ {{svg "octicon-eye-closed" 16}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.unwatch"}}</span>
{{else}}
- {{svg "octicon-eye"}}<span class="text">{{ctx.Locale.Tr "repo.watch"}}</span>
+ {{svg "octicon-eye"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.watch"}}</span>
{{end}}
</button>
<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">