Fix UI on mobile view (go-gitea#25315) (go-gitea#25340)

Backport go-gitea#25315 by @denyskon Various fixes to pages or elements which were looking ugly on mobile. <details> <summary>Screenshots</summary> ![Bildschirmfoto vom 2023-06-17 20-38-41](https://github.com/go-gitea/gitea/assets/47871822/30b5d3ce-df3b-43eb-a4c2-c3790667fb9d) ![Bildschirmfoto vom 2023-06-17 20-39-27](https://github.com/go-gitea/gitea/assets/47871822/27c07b25-3602-4fb2-b34d-d5e875e054e9) ![Bildschirmfoto vom 2023-06-17 20-41-27](https://github.com/go-gitea/gitea/assets/47871822/dacdbb4e-e3dd-4b94-abf0-c68e3d64bd3b) ![Bildschirmfoto vom 2023-06-17 20-41-48](https://github.com/go-gitea/gitea/assets/47871822/72432c35-7c4a-4c7f-a767-3562f26a5c14) ![Bildschirmfoto vom 2023-06-17 20-42-37](https://github.com/go-gitea/gitea/assets/47871822/737c26ed-1910-4467-98ef-e8769bbbe6f0) ![Bildschirmfoto vom 2023-06-17 20-42-52](https://github.com/go-gitea/gitea/assets/47871822/1813b4bc-43c0-4912-8acb-5d799c090bf3) ![Bildschirmfoto vom 2023-06-17 20-43-06](https://github.com/go-gitea/gitea/assets/47871822/136466e8-34e5-419d-97ec-5202ff819fd2) ![Bildschirmfoto vom 2023-06-17 20-43-42](https://github.com/go-gitea/gitea/assets/47871822/59270bb2-d661-4a84-8504-3e50f771f767) ![Bildschirmfoto vom 2023-06-17 20-44-44](https://github.com/go-gitea/gitea/assets/47871822/494e274d-3771-4141-9419-0a4bbd8b7f64) </details> Co-authored by: @silverwind Co-authored-by: Denys Konovalov <[email protected]> Co-authored-by: silverwind <[email protected]>
GiteaBot · Jun 18, 2023 · b673edb · b673edb
1 parent 0543159
commit b673edb
Show file tree

Hide file tree

Showing 17 changed files with 329 additions and 201 deletions.
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
@@ -35,33 +35,36 @@
 				</div>
 			</div>
 		</div>
-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Projects}}
-				<li class="item">
-					{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+				<li class="milestone-card">
+					<h3 class="flex-text-block gt-m-0">
+						{{svg .IconName 16}}
+						<a class="muted" href="{{.Link}}">{{.Title}}</a>
+					</h3>
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+						</div>
+						{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+						<div class="group">
+							<a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+							{{if .IsClosed}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+							{{else}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+							{{end}}
+							<a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} tesssst</a>
+						</div>
 						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-						</span>
 					</div>
-					{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-					<div class="ui right operate">
-						<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-						{{if .IsClosed}}
-							<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
-						{{else}}
-							<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
-						{{end}}
-						<a class="delete-button" href="#" data-url="{{$.Link}}/{{.ID}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
-					</div>
-					{{end}}
 					{{if .Description}}
 					<div class="content">
 						{{.RenderedContent|Str2html}}

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
@@ -46,7 +46,7 @@
 			{{if $.CanWriteProjects}}
 				<div class="column right aligned">
 					<div class="ui compact right small menu">
-						<a class="item" href="{{$.Link}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+						<a class="item" href="{{$.Link}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>

diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl
@@ -2,25 +2,24 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository commits">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<h2 class="ui header">{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}
-			<div class="ui right">
-				<!-- Period -->
-				<div class="ui floating dropdown jump filter">
-					<div class="ui basic compact button">
-						<span class="text">
-							{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-						</span>
-					</div>
-					<div class="menu">
-						<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
-						<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
-						<a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
-						<a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
-						<a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
-						<a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
-						<a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
-					</div>
+		<h2 class="ui header activity-header">
+			<span>{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}</span>
+			<!-- Period -->
+			<div class="ui floating dropdown jump filter">
+				<div class="ui basic compact button">
+					<span class="text">
+						{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
+						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					</span>
+				</div>
+				<div class="menu">
+					<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
+					<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
+					<a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
+					<a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
+					<a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
+					<a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
+					<a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
 				</div>
 			</div>
 		</h2>

diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
@@ -26,7 +26,7 @@
 						<div class="item">
 							<h3>{{.locale.Tr "repo.clone_this_repo"}} <small>{{.locale.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</small></h3>
 
-							<div class="gt-df">
+							<div class="repo-button-row">
 								{{if and .CanWriteCode (not .Repository.IsArchived)}}
 									<a class="ui small button" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/">
 										{{.locale.Tr "repo.editor.new_file"}}
@@ -44,7 +44,7 @@
 						</div>
 
 						{{if not .Repository.IsArchived}}
-							<div class="ui divider"></div>
+							<div class="ui divider gt-my-0"></div>
 
 							<div class="item">
 								<h3>{{.locale.Tr "repo.create_new_repo_command"}}</h3>

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
@@ -71,13 +71,13 @@
 			{{template "repo/issue/search" .}}
 			{{if not .Repository.IsArchived}}
 				{{if .PageIsIssueList}}
-					<a class="ui small green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
+					<a class="ui small green button issue-list-new" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
 				{{else}}
-					<a class="ui small green button new-pr-button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
+					<a class="ui small green button new-pr-button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
 				{{end}}
 			{{else}}
 				{{if not .PageIsIssueList}}
-					<a class="ui small green small button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
+					<a class="ui small green small button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
 				{{end}}
 			{{end}}
 		</div>

diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -13,7 +13,7 @@
 		{{template "base/alert" .}}
 
 		<div class="list-header">
-			<div class="small-menu-items ui compact tiny menu">
+			<div class="small-menu-items ui compact tiny menu list-header-toggle">
 				<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
 					{{svg "octicon-milestone" 16 "gt-mr-3"}}
 					{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@@ -53,50 +53,70 @@
 		</div>
 
 		<!-- milestone list -->
-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Milestones}}
-				<li class="item">
-					<div class="gt-df gt-ac gt-sb">
-						<h3 class="gt-df gt-ac gt-m-0 gt-fw">
-							{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
+				<li class="milestone-card">
+					<div class="milestone-header">
+						<h3 class="flex-text-block gt-m-0">
+							{{svg "octicon-milestone" 16}}
+							<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
 						</h3>
 						<div class="gt-df gt-ac">
 							<span class="gt-mr-3">{{.Completeness}}%</span>
 							<progress value="{{.Completeness}}" max="100"></progress>
 						</div>
 					</div>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-						{{else}}
-							{{svg "octicon-calendar"}}
-							{{if .DeadlineString}}
-								<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span>
-							{{else}}
-								{{$.locale.Tr "repo.milestones.no_due_date"}}
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+							{{if .TotalTrackedTime}}
+								<div class="flex-text-block">
+									{{svg "octicon-clock"}}
+									{{.TotalTrackedTime|Sec2Time}}
+								</div>
 							{{end}}
-						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-							{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
-							{{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}{{end}}
-						</span>
-					</div>
-					{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
-						<div class="ui right operate">
-							<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-							{{if .IsClosed}}
-								<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}}</a>
-							{{else}}
-								<a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}}</a>
+							{{if .UpdatedUnix}}
+								<div class="flex-text-block">
+									{{svg "octicon-clock"}}
+									{{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
+								</div>
 							{{end}}
-							<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+							<div class="flex-text-block">
+								{{if .IsClosed}}
+									{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
+									{{svg "octicon-clock" 14}}
+									{{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+								{{else}}
+									{{svg "octicon-calendar" 14}}
+									{{if .DeadlineString}}
+										<span {{if .IsOverdue}}class="overdue"{{end}}>
+											{{DateTime "short" .DeadlineString}}
+										</span>
+									{{else}}
+										{{$.locale.Tr "repo.milestones.no_due_date"}}
+									{{end}}
+								{{end}}
+							</div>
 						</div>
-					{{end}}
+						{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
+							<div class="group">
+								<a class="flex-text-inline" href="{{$.Link}}/{{.ID}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+								{{if .IsClosed}}
+									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}}</a>
+								{{else}}
+									<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}}</a>
+								{{end}}
+								<a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+							</div>
+						{{end}}
+					</div>
 					{{if .Content}}
 						<div class="markup content">
 							{{.RenderedContent|Str2html}}

diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu header small-menu-items">
+<h2 class="ui compact small menu header small-menu-items issue-list-navbar">
 	<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
 	<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
 </h2>
diff --git a/templates/repo/issue/search.tmpl b/templates/repo/issue/search.tmpl
@@ -1,4 +1,4 @@
-<form class="list-header-search ui form ignore-dirty">
+<form class="list-header-search ui form ignore-dirty issue-list-search">
 	<div class="ui small search fluid action input">
 		<input type="hidden" name="type" value="{{$.ViewType}}">
 		<input type="hidden" name="state" value="{{$.State}}">

diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar gt-mb-4">
+		<div class="navbar projects-header">
 			<div>
 				<div class="small-menu-items ui compact tiny menu">
 					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
@@ -15,7 +15,7 @@
 					</a>
 				</div>
 			</div>
-			<div>
+			<div class="projects-toolbar">
 				<!-- Sort -->
 				<div class="ui small dropdown type jump item">
 					<span class="text">
@@ -35,33 +35,36 @@
 		</div>
 		{{template "base/alert" .}}
 
-		<div class="milestone list">
+		<div class="milestone-list">
 			{{range .Projects}}
-				<li class="item">
-					{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
-					<div class="meta">
-						{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
-						{{if .IsClosed}}
-							{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-						{{end}}
-						<span class="issue-stats">
-							{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
-							{{svg "octicon-check" 16 "gt-mr-3"}}
-							{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
-						</span>
-					</div>
-					{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-					<div class="ui right operate">
-						<a href="{{.Link}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
-						{{if .IsClosed}}
-							<a class="link-action" href data-url="{{.Link}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
-						{{else}}
-							<a class="link-action" href data-url="{{.Link}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
+				<li class="milestone-card">
+					<h3 class="flex-text-block gt-m-0">
+						{{svg .IconName 16}}
+						<a class="muted" href="{{.Link}}">{{.Title}}</a>
+					</h3>
+					<div class="milestone-toolbar">
+						<div class="group">
+							<div class="flex-text-block">
+								{{svg "octicon-issue-opened" 14}}
+								{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
+							</div>
+							<div class="flex-text-block">
+								{{svg "octicon-check" 14}}
+								{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
+							</div>
+						</div>
+						{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+						<div class="group">
+							<a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+							{{if .IsClosed}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+							{{else}}
+								<a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+							{{end}}
+							<a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+						</div>
 						{{end}}
-						<a class="delete-button" href="#" data-url="{{.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
 					</div>
-					{{end}}
 					{{if .Description}}
 					<div class="content">
 						{{.RenderedContent|Str2html}}

diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
@@ -50,7 +50,7 @@
 			{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
 				<div class="column right aligned">
 					<div class="ui compact right small menu">
-						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+						<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project">
 							{{svg "octicon-pencil"}}
 							<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
 						</a>