Skip to content

Fix Progress bar width #6119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Borreg0 wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Fix Progress bar width #6119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fc17ddc
Beautified code
Apr 24, 2026
c0dffa7
Never forgotten scss
Apr 24, 2026
674c779
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
Apr 27, 2026
92cd176
Linter run
Apr 27, 2026
1f5c48a
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
May 5, 2026
1b1d2e6
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
May 5, 2026
c1983f6
Rounded bar corners
May 5, 2026
192c7c7
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
May 27, 2026
d542d1c
Cleanup
May 27, 2026
0535c93
Merge branch 'main' into 5855-expandable-progress-bar
Elblinator Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 119 additions & 79 deletions ...pants/pages/mandate-check/components/mandate-check-list/mandate-check-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,97 +22,126 @@ <h1 class="mock-h2" translate>Mandate check</h1>
<mat-card-content>
<div class="header-grid">
<h1 class="text-large-bold color-inherit">{{ entry.name }}</h1>
<div>&nbsp;</div>
</div>
<div class="card-grid">
<div class="map-grid">
<!-- first row-->
<div></div>
<div class="flex-container align-left foreground-active">
<div class="text-medium-bold">{{ 'present' | translate }}</div>
</div>
<div class="flex-container">
<div>&nbsp;</div>
</div>
<div class="flex-container align-left text">
<div class="text-medium-bold">{{ 'total' | translate }}</div>
</div>
<div></div>
<!-- second row -->
<div></div>
<div class="flex-container align-left foreground-active">
<div class="text-medium-bold">
{{ entry.presentUserIds.length }} {{ displayPercent(entry.getPercent()) }}
<div class="row-mandate">
<!-- first col -->
<div class="flex-container"></div>
<!-- second col -->
<div
class="flex-container margin-auto foreground-active text-medium-bold min-width-50 align-right"
>
{{ 'present' | translate }}
</div>
<!-- third col -->
<div class="flex-container center central-element padding-right"></div>
<!-- fourth col -->
<div class="flex-container margin-auto text text-medium-bold min-width-50">
{{ 'total' | translate }}
</div>
<!-- fifth col -->
<div class="flex-container">
<div></div>
</div>
</div>
<div class="center">
<mat-progress-bar
class="progressbar-colored bar-height"
[bufferValue]="100"
[mode]="'determinate'"
[value]="entry.getPercent() * 100"
></mat-progress-bar>
</div>
<div class="flex-container align-left text">
<div class="text-medium-bold">{{ entry.getTotalCount() }}</div>
<div class="row-mandate">
<!-- second row -->
<!-- first col -->
<div class="flex-container">
<div></div>
</div>
<!-- second col -->
<div
class="flex-container foreground-active text-medium-bold min-width-50 align-right fit-content"
>
{{ displayPercent(entry.getPercent()) }} {{ entry.presentUserIds.length }}
</div>
<!-- third col -->
<div class="center flex-container">
<div class="central-element">
<mat-progress-bar
class="progressbar-colored bar-height"
[bufferValue]="100"
[mode]="'determinate'"
[value]="entry.getPercent() * 100"
></mat-progress-bar>
</div>
</div>
<!-- fourth col -->
<div class="flex-container margin-auto text align-left text-medium-bold min-width-50">
{{ entry.getTotalCount() }}
</div>
<!-- fifth col -->
<div class="flex-container">
<div></div>
</div>
</div>
<div></div>
</div>
<div class="header-grid">
<h2 class="text-large-bold color-inherit">
<button matButton (click)="toggle(entry.id, true)">
<!-- Gender field-->
<div class="header-grid stroke">
<h1 class="text-large-bold color-inherit">
<button class="text-medium-bold" matButton (click)="toggle(entry.id, true)">
{{ 'Gender' | translate }}
</button>
</h2>
<div>
<button matIconButton (click)="toggle(entry.id, true)">
@if (toggleGenderMap.get(entry.id)) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</div>
</h1>
<button matIconButton (click)="toggle(entry.id, true)">
@if (toggleGenderMap.get(entry.id)) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</div>
@if (toggleGenderMap.get(entry.id)) {
<div class="card-grid">
<div class="map-grid">
@for (gender of genders; track gender.id) {
@if (entry.getTotalCount(gender.id)) {
<div></div>
<div class="foreground-active align-left">
@if (entry.getTotalCount(gender.id)) {
<div class="text-medium">
{{ entry.genderEntryMap.get(gender.id)?.present }}
<!-- LEFT EMPTY -->
<div class="row">
<div class="flex-container">
<div></div>
</div>
<div class="foreground-active min-width-50 align-right cell-width">
@if (entry.getTotalCount(gender.id)) {
<!-- FIRST VAL -->
{{
displayPercent(
entry.genderEntryMap.get(gender.id)?.present /
entry.presentUserIds.length
)
}}
</div>
}
</div>
<div class="justify-center bold">
<div>{{ entry.genderEntryMap.get(gender.id)?.label | translate }}</div>
</div>
<div class="text align-left">
@if (entry.getTotalCount(gender.id)) {
<div class="text-medium">
{{ entry.genderEntryMap.get(gender.id)?.present }}
}
</div>
<div class="center bold margin-auto">
<!-- SECOND VAL -->
{{ entry.genderEntryMap.get(gender.id)?.label | translate }}
</div>
<div class="text text-medium margin-auto align-left">
@if (entry.getTotalCount(gender.id)) {
<!-- THIRD VAL -->
{{ entry.getTotalCount(gender.id) }}
{{ displayPercent(entry.getTotalCount(gender.id) / entry.getTotalCount()) }}
</div>
}
}
</div>
<!-- LEFT EMPTY -->
<div class="flex-container">
<div></div>
</div>
</div>
<div></div>
}
}
</div>
}
<div class="header-grid">
<h2 class="text-large-bold color-inherit">
<button matButton (click)="toggle(entry.id)">
{{ 'Participants' | translate }}
</button>
</h2>
<div class="header-grid stroke">
<h1 class="text-large-bold color-inherit">
<div class="row">
<button class="text-medium-bold" matButton (click)="toggle(entry.id)">
{{ 'Participants' | translate }}
</button>
</div>
</h1>
<div>
<button matIconButton (click)="toggle(entry.id)">
@if (toggleMap.get(entry.id)) {
Expand All @@ -125,22 +154,33 @@ <h2 class="text-large-bold color-inherit">
</div>
@if (toggleMap.get(entry.id)) {
<div class="footer-grid">
<div>
<div class="bold margin-left-medium small-margin-top text foreground-active">
{{ 'Present' | translate }}
<!-- Empty cell -->
<div class="flex-container"><div></div></div>
<!-- central cell -->
<div class="participants-cell">
<div class="present">
<div class="bold small-margin-top text foreground-active">
{{ 'Present' | translate }}
</div>
@for (userId of entry.presentUserIds; track userId) {
<div class="text foreground-active">
{{ getName(userId) }}
</div>
}
</div>
@for (userId of entry.presentUserIds; track userId) {
<div class="margin-left-large text foreground-active">{{ getName(userId) }}</div>
}
</div>
<div>
<div class="bold margin-left-medium small-margin-top text">
{{ 'Absent' | translate }}
<div class="absent">
<div class="bold small-margin-top text">
{{ 'Absent' | translate }}
</div>
@for (userId of entry.absentUserIds; track userId) {
<div class="color-black">
{{ getName(userId) }}
</div>
}
</div>
@for (userId of entry.absentUserIds; track userId) {
<div class="margin-left-large color-black">{{ getName(userId) }}</div>
}
</div>
<!-- Empty cell -->
<div class="flex-container"><div></div></div>
</div>
}
</mat-card-content>
Expand Down
Loading
Loading