Project boards: checklist progressbar #6477

New Issue

GiteaMirror · 2025-11-02T06:57:08-06:00

GiteaMirror commented

2025-11-02 06:57:08 -06:00

Originally created by @modmew8 on GitHub (Dec 7, 2020).

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
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL)
- 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.

Originally created by @modmew8 on GitHub (Dec 7, 2020). - 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: ![grafik](https://user-images.githubusercontent.com/6024058/101302157-26327900-383b-11eb-948f-34b12f3f0095.png) 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}} {{svg "octicon-checklist" 14 "mr-2"}}{{$tasksDone}} / {{$tasks}} {{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.

GiteaMirror added the type/proposal label 2025-11-02 06:57:08 -06:00

GiteaMirror commented

2025-11-02 06:57:09 -06:00

@6543 commented on GitHub (Dec 8, 2020):

@modmew8 can you send a pull :)

@6543 commented on GitHub (Dec 8, 2020): @modmew8 can you send a pull :)

GiteaMirror commented

2025-11-02 06:57:09 -06:00

@silverwind commented on GitHub (Dec 9, 2020):

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

@silverwind commented on GitHub (Dec 9, 2020): Looks good but it should share the CSS with the existing checklist, probably via `.checklist` class.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#6477