Add Progressbar to Milestone Page (#25050)

This is adds the progress bar, which is already on the Milestone List, also to the Page of a Single Milestone. ![grafik](https://github.com/go-gitea/gitea/assets/15185051/24e0fa28-369b-4bb9-807a-ee823b46ba81) --------- Co-authored-by: silverwind <[email protected]>
go-gitea · Jun 5, 2023 · 7d192cb · 7d192cb
1 parent d63d810
commit 7d192cb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
@@ -1759,7 +1759,7 @@ milestones.no_due_date = No due date
 milestones.open = Open
 milestones.close = Close
 milestones.new_subheader = Milestones organize issues and track progress.
-milestones.completeness = %d%% Completed
+milestones.completeness = <strong>%d%%</strong> Completed
 milestones.create = Create Milestone
 milestones.title = Title
 milestones.desc = Description

diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div class="gt-df">
-			<h1>{{.Milestone.Name}}</h1>
+			<h1 class="gt-mb-3">{{.Milestone.Name}}</h1>
 			{{if not .Repository.IsArchived}}
 				<div class="text right gt-f1">
 					{{if or .CanWriteIssues .CanWritePulls}}
@@ -20,26 +20,28 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="ui one column stackable grid">
-			<div class="column markup content">
-					{{.Milestone.RenderedContent|Str2html}}
-			</div>
+		{{if .Milestone.RenderedContent}}
+		<div class="markup content gt-mb-4">
+				{{.Milestone.RenderedContent|Str2html}}
 		</div>
-		<div class="ui one column stackable grid">
-			<div class="column">
-				{{$closedDate:= TimeSinceUnix .Milestone.ClosedDateUnix $.locale}}
-				{{if .IsClosed}}
-					{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
-				{{else}}
-					{{svg "octicon-calendar"}}
-					{{if .Milestone.DeadlineString}}
-						<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .Milestone.DeadlineString}}</span>
+		{{end}}
+		<div class="gt-df gt-fc gt-gap-3">
+			<progress class="milestone-progress-big" value="{{.Milestone.Completeness}}" max="100"></progress>
+			<div class="gt-df gt-gap-4">
+				<div classs="gt-df gt-ac">
+					{{$closedDate:= TimeSinceUnix .Milestone.ClosedDateUnix $.locale}}
+					{{if .IsClosed}}
+						{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
 					{{else}}
-						{{$.locale.Tr "repo.milestones.no_due_date"}}
+						{{svg "octicon-calendar"}}
+						{{if .Milestone.DeadlineString}}
+							<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .Milestone.DeadlineString}}</span>
+						{{else}}
+							{{$.locale.Tr "repo.milestones.no_due_date"}}
+						{{end}}
 					{{end}}
-				{{end}}
-				&nbsp;
-				<b>{{.locale.Tr "repo.milestones.completeness" .Milestone.Completeness}}</b>
+				</div>
+				<div class="gt-mr-3">{{.locale.Tr "repo.milestones.completeness" .Milestone.Completeness | Safe}}</div>
 			</div>
 		</div>
 		<div class="ui divider"></div>

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -1225,6 +1225,11 @@
   height: 200px;
 }
 
+.milestone-progress-big {
+  width: min(420px, 96vw);
+  height: 10px;
+}
+
 .repository.compare.pull .show-form-container {
   text-align: left;
 }