Project boards: checklist progressbar

[modmew8]

• Gitea version (or commit ref): 1.13.0
• Git version: 2.14.3
• Operating system: Ubuntu Server 18.04.5
• Database (use [x]):
  • [ ] PostgreSQL
  • [ ] MySQL
  • [ ] MSSQL
  • [x] SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • [ ] Yes (provide example URL)
  • [x] No

Description

I think it would be a great addition to the project boards to include the checklist progressbars like in the issue list:

I just added it on my running instance by editing the custom/templates/repo/projects/view.tmpl and adding the same implementation from shared/issuelist.tmpl in line 159 on master:

{{$tasks := .GetTasks}}
{{if gt $tasks 0}}
  {{$tasksDone := .GetTasksDone}}
  <span class="checklist">
    {{svg "octicon-checklist" 14 "mr-2"}}{{$tasksDone}} / {{$tasks}} <span class="progress-bar"><span class="progress" style="width:calc(100% * {{$tasksDone}} / {{$tasks}});"></span></span>
  </span>
{{end}}

Along with these css rules:

  .card .checklist {
    color: #999;
  }

  .card .checklist .progress-bar {
    margin-left: 2px;
    width: 80px;
    height: 6px;
    display: inline-block;
    background-color: #eee;
    overflow: hidden;
    border-radius: 3px;
    vertical-align: 2px !important;
  }

  .card .checklist .progress-bar .progress {
    background-color: #ccc;
    display: block;
    height: 100%;
  }

These css rules could just reuse the existing progress-bar rules by appending them with a comma.

[6543]

@modmew8 can you send a pull :)

[silverwind]

Looks good but it should share the CSS with the existing checklist, probably via .checklist class.