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

Author: JakobDev

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

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>

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