Skip to content

Commit 7d62615

Browse files
denyskondenyskon
authored
Revamp repo header (#27760)
Redesign repo header with following new aspects: - responsive & better-looking repo title - hide repo button text instead of icons in mobile view - use same tab style as on explore and org page <details> <summary>Before:</summary> ![grafik](https://github.com/go-gitea/gitea/assets/47871822/57360b77-d43c-49ac-b798-2363c03da7ec) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/d4117f79-a5f5-4f36-bf65-bbada3e7e73b) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/e26f967f-e264-4337-9925-3d942e04fd6d) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/b4683c8d-9c6a-4089-afa7-8dd219e43a46) </details> <details> <summary>After:</summary> ![grafik](https://github.com/go-gitea/gitea/assets/47871822/8ddbc9f6-53c7-4e4e-bea9-704fd93524ca) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/c0588aa9-788d-469c-98a0-81484fbd220c) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/206e931e-404d-4d1b-92ce-908698addfcc) ![grafik](https://github.com/go-gitea/gitea/assets/47871822/a508f9c8-fadc-4a85-94ba-18796f77e07b)
1 parent ba4d0b8 commit 7d62615

File tree

5 files changed

+149
-153
lines changed

5 files changed

+149
-153
lines changed

‎templates/repo/header.tmpl

+47-43
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,32 @@
22
{{with .Repository}}
33
<div class="ui container">
44
<div class="repo-header">
5-
<div class="repo-title-wrap gt-df gt-fc">
6-
<div class="repo-title" role="heading" aria-level="1">
7-
<div class="gt-mr-3">
8-
{{template "repo/icon" .}}
9-
</div>
10-
<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
11-
<div class="gt-mx-2">/</div>
12-
<a href="{{$.RepoLink}}">{{.Name}}</a>
13-
<div class="labels gt-df gt-ac gt-fw">
14-
{{if .IsArchived}}
15-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
16-
{{end}}
17-
{{if .IsPrivate}}
18-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
19-
{{else}}
20-
{{if .Owner.Visibility.IsPrivate}}
21-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
22-
{{end}}
23-
{{end}}
24-
{{if .IsTemplate}}
25-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span>
5+
<div class="flex-item gt-ac">
6+
<div class="flex-item-leading">{{template "repo/icon" .}}</div>
7+
<div class="flex-item-main">
8+
<div class="flex-item-title">
9+
<a class="text light thin" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
10+
<a class="text primary" href="{{$.RepoLink}}">{{.Name}}</a></div>
11+
</div>
12+
<div class="flex-item-trailing">
13+
{{if .IsArchived}}
14+
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
15+
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
16+
{{end}}
17+
{{if .IsPrivate}}
18+
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
19+
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div>
20+
{{else}}
21+
{{if .Owner.Visibility.IsPrivate}}
22+
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
23+
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div>
2624
{{end}}
27-
</div>
25+
{{end}}
26+
{{if .IsTemplate}}
27+
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span>
28+
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div>
29+
{{end}}
2830
</div>
29-
{{if $.PullMirror}}
30-
<div class="fork-flag">{{ctx.Locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a></div>
31-
{{end}}
32-
{{if .IsFork}}<div class="fork-flag">{{ctx.Locale.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{.BaseRepo.FullName}}</a></div>{{end}}
33-
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
3431
</div>
3532
{{if not (or .IsBeingCreated .IsBroken)}}
3633
<div class="repo-buttons">
@@ -62,7 +59,11 @@
6259
{{$.CsrfTokenHtml}}
6360
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
6461
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
65-
{{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{ctx.Locale.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{ctx.Locale.Tr "repo.watch"}}{{end}}
62+
{{if $.IsWatchingRepo}}
63+
{{svg "octicon-eye-closed" 16}}<span class="text">{{ctx.Locale.Tr "repo.unwatch"}}</span>
64+
{{else}}
65+
{{svg "octicon-eye"}}<span class="text">{{ctx.Locale.Tr "repo.watch"}}</span>
66+
{{end}}
6667
</button>
6768
<a class="ui basic label" href="{{.Link}}/watchers">
6869
{{CountFmt .NumWatches}}
@@ -74,7 +75,11 @@
7475
{{$.CsrfTokenHtml}}
7576
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
7677
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
77-
{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{ctx.Locale.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{ctx.Locale.Tr "repo.star"}}{{end}}
78+
{{if $.IsStaringRepo}}
79+
{{svg "octicon-star-fill"}}<span class="text">{{ctx.Locale.Tr "repo.unstar"}}</span>
80+
{{else}}
81+
{{svg "octicon-star"}}<span class="text">{{ctx.Locale.Tr "repo.star"}}</span>
82+
{{end}}
7883
</button>
7984
<a class="ui basic label" href="{{.Link}}/stars">
8085
{{CountFmt .NumStars}}
@@ -107,7 +112,7 @@
107112
data-modal="#fork-repo-modal"
108113
{{end}}
109114
>
110-
{{svg "octicon-repo-forked"}}{{ctx.Locale.Tr "repo.fork"}}
115+
{{svg "octicon-repo-forked"}}<span class="text">{{ctx.Locale.Tr "repo.fork"}}</span>
111116
</a>
112117
<div class="ui small modal" id="fork-repo-modal">
113118
<div class="header">
@@ -117,17 +122,13 @@
117122
<div class="ui list">
118123
{{range $.UserAndOrgForks}}
119124
<div class="ui item gt-py-3">
120-
<a href="{{.Link}}">
121-
{{svg "octicon-repo-forked" 16 "gt-mr-3"}}{{.FullName}}
122-
</a>
125+
<a href="{{.Link}}">{{svg "octicon-repo-forked" 16 "gt-mr-3"}}{{.FullName}}</a>
123126
</div>
124127
{{end}}
125128
</div>
126129
{{if $.CanSignedUserFork}}
127130
<div class="divider"></div>
128-
<a href="{{AppSubUrl}}/repo/fork/{{.ID}}">
129-
{{ctx.Locale.Tr "repo.fork_to_different_account"}}
130-
</a>
131+
<a href="{{AppSubUrl}}/repo/fork/{{.ID}}">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
131132
{{end}}
132133
</div>
133134
</div>
@@ -138,12 +139,15 @@
138139
{{end}}
139140
</div>
140141
{{end}}
141-
</div><!-- end grid -->
142-
</div><!-- end container -->
142+
</div>
143+
{{if $.PullMirror}}<div class="fork-flag">{{ctx.Locale.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener noreferrer" href="{{$.PullMirror.RemoteAddress}}">{{$.PullMirror.RemoteAddress}}</a></div>{{end}}
144+
{{if .IsFork}}<div class="fork-flag">{{ctx.Locale.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{.BaseRepo.FullName}}</a></div>{{end}}
145+
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
146+
</div>
143147
{{end}}
144-
<div class="ui tabs container">
148+
<div class="ui container secondary pointing tabular top attached borderless menu new-menu navbar">
145149
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
146-
<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
150+
<div class="new-menu-inner">
147151
{{if .Permission.CanRead $.UnitTypeCode}}
148152
<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
149153
{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -228,14 +232,14 @@
228232
{{template "custom/extra_tabs" .}}
229233

230234
{{if .Permission.IsAdmin}}
231-
<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
235+
<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
232236
{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
233237
</a>
234238
{{end}}
235239
</div>
236240
{{else if .Permission.IsAdmin}}
237-
<div class="ui tabular menu navbar gt-overflow-x-auto gt-overflow-y-hidden">
238-
<a class="{{if .PageIsRepoSettings}}active {{end}}right item" href="{{.RepoLink}}/settings">
241+
<div class="new-menu-inner">
242+
<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
239243
{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
240244
</a>
241245
</div>

‎web_src/css/base.css

-17
Original file line numberDiff line numberDiff line change
@@ -1358,23 +1358,6 @@ img.ui.avatar,
13581358
padding-right: 4.5px;
13591359
}
13601360

1361-
.repo-title {
1362-
font-size: 1.5rem;
1363-
display: flex;
1364-
align-items: center;
1365-
flex: 1;
1366-
word-break: break-all;
1367-
color: var(--color-text-light);
1368-
}
1369-
1370-
.repo-title .labels {
1371-
margin-left: 0.5rem;
1372-
}
1373-
1374-
.repo-title .labels > * + * {
1375-
margin-left: 0.5rem;
1376-
}
1377-
13781361
.activity-bar-graph {
13791362
background-color: var(--color-primary);
13801363
color: var(--color-primary-contrast);

‎web_src/css/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
@import "./repo/list-header.css";
4848
@import "./repo/linebutton.css";
4949
@import "./repo/wiki.css";
50+
@import "./repo/header.css";
5051

5152
@import "./editor/fileeditor.css";
5253
@import "./editor/combomarkdowneditor.css";

‎web_src/css/repo.css

-93
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,6 @@
44
user-select: none;
55
}
66

7-
.repository .repo-header .ui.compact.menu {
8-
margin-left: 1rem;
9-
}
10-
11-
.repository .repo-header .ui.header {
12-
margin-top: 0;
13-
}
14-
15-
.repository .repo-header .fork-flag {
16-
font-size: 12px;
17-
margin-top: 2px;
18-
}
19-
20-
.repository .tabs .navbar {
21-
justify-content: initial;
22-
}
23-
247
.repository .navbar {
258
display: flex;
269
justify-content: space-between;
@@ -106,14 +89,6 @@
10689
white-space: nowrap;
10790
}
10891

109-
.repository .header-wrapper {
110-
background-color: var(--color-header-wrapper);
111-
}
112-
113-
.repository .header-wrapper .ui.tabular .svg {
114-
margin-right: 5px;
115-
}
116-
11792
.repository .filter.menu.labels .label-filter .menu .info {
11893
display: inline-block;
11994
padding: 0.5rem 0;
@@ -2593,74 +2568,6 @@ tbody.commit-list {
25932568
overflow: hidden;
25942569
}
25952570

2596-
.repo-header {
2597-
display: flex;
2598-
align-items: center;
2599-
justify-content: space-between;
2600-
flex-wrap: wrap;
2601-
word-break: break-word;
2602-
gap: 0.5rem;
2603-
}
2604-
2605-
@media (max-width: 767.98px) {
2606-
.repo-header + .container {
2607-
margin-top: 7px;
2608-
}
2609-
}
2610-
2611-
.repo-buttons {
2612-
align-items: center;
2613-
display: flex;
2614-
flex-direction: row;
2615-
flex-wrap: wrap;
2616-
word-break: keep-all;
2617-
gap: 0.25em;
2618-
}
2619-
2620-
@media (max-width: 767.98px) {
2621-
.repo-buttons {
2622-
margin-top: 1em;
2623-
}
2624-
}
2625-
2626-
.repo-buttons .ui.labeled.button > .label:hover {
2627-
color: var(--color-primary-light-2);
2628-
background: var(--color-light);
2629-
}
2630-
2631-
.repo-buttons button[disabled] ~ .label {
2632-
opacity: var(--opacity-disabled);
2633-
color: var(--color-text-dark);
2634-
background: var(--color-light-mimic-enabled) !important;
2635-
}
2636-
2637-
.repo-buttons button[disabled] ~ .label:hover {
2638-
color: var(--color-primary-dark-1);
2639-
}
2640-
2641-
.repo-buttons .ui.labeled.button.disabled {
2642-
pointer-events: inherit !important;
2643-
}
2644-
2645-
.repo-buttons .ui.labeled.button.disabled > .label {
2646-
color: var(--color-text-dark);
2647-
background: var(--color-light-mimic-enabled) !important;
2648-
}
2649-
2650-
.repo-buttons .ui.labeled.button.disabled > .label:hover {
2651-
color: var(--color-primary-dark-1);
2652-
}
2653-
2654-
.repo-buttons .ui.labeled.button.disabled > .button {
2655-
pointer-events: none !important;
2656-
}
2657-
2658-
@media (max-width: 767.98px) {
2659-
.repo-buttons .ui.labeled.button .svg {
2660-
display: none;
2661-
}
2662-
}
2663-
26642571
.tag-code {
26652572
height: 28px;
26662573
}

0 commit comments

Comments
 (0)