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 <me@silverwind.io>
This commit is contained in:
JakobDev 2023-06-05 08:25:46 +02:00 committed by GitHub
parent d63d8108b4
commit 7d192cb674
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 19 deletions

View file

@ -1759,7 +1759,7 @@ milestones.no_due_date = No due date
milestones.open = Open milestones.open = Open
milestones.close = Close milestones.close = Close
milestones.new_subheader = Milestones organize issues and track progress. milestones.new_subheader = Milestones organize issues and track progress.
milestones.completeness = %d%% Completed milestones.completeness = <strong>%d%%</strong> Completed
milestones.create = Create Milestone milestones.create = Create Milestone
milestones.title = Title milestones.title = Title
milestones.desc = Description milestones.desc = Description

View file

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

View file

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