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 13 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
13 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
cfbdd5e
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
Jul 7, 2026
dc92890
Angular 22
Jul 21, 2026
df777e1
Merge remote-tracking branch 'origin' into 5855-expandable-progress-bar
Jul 24, 2026
db6f8ad
Changed mat-card components disposition
Jul 24, 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
277 changes: 177 additions & 100 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 @@ -15,138 +15,215 @@ <h1 class="mock-h2" translate>Mandate check</h1>
</mat-form-field>
</div>

@for (entry of entries; track entry.id) {
<div class="border-grid">
@for (entry of entries; track entry.id; let first = $first) {
<div class="border-grid mandate-card" [class.first]="first">
<div></div>
<mat-card appearance="outlined" class="margin-bottom-20">
<mat-card-content>
<div class="header-grid">
<h1 class="text-large-bold color-inherit">{{ entry.name }}</h1>
<div>&nbsp;</div>
<button class="updown-arrow" matIconButton (click)="toggle(entry.id)">
@if (toggleMap.get(entry.id)) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</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 text-medium-bold min-width-50 align-right margin-right--5"
>
{{ '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 text-medium-bold min-width-50 fit-content mandate-ammount margin-bottom-15"
>
<div class="text-large">{{ entry.presentUserIds.length }}&nbsp;</div>
<div>{{ displayPercent(entry.getPercent()) }}&nbsp;</div>
</div>
<!-- third col -->
<div class="center flex-container">
<div class="central-element center margin-top--30">
<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 margin-bottom-15"
>
<div class="text-large">{{ entry.getTotalCount() }}</div>
<div class="no-left-margin">100%&nbsp;</div>
</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)">
@if (toggleMap.get(entry.id)) {
<!-- Gender field-->
<div class="header-grid">
<h1 class="text-large-bold color-inherit margin-top-20 margin-bottom-10">
{{ '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>
</h1>
</div>
</div>
@if (toggleGenderMap.get(entry.id)) {
<div class="card-grid">
@for (gender of genders; track gender.id) {
<div class="gender-grid">
@for (gender of genders; track gender.id; let last = $last) {
@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 }}
{{
displayPercent(
$safeNavigationMigration(
entry.genderEntryMap.get(gender.id)?.present
) / entry.presentUserIds.length
)
}}
</div>
}
</div>
<div class="justify-center bold">
<div>
<!-- LEFT EMPTY -->
<div class="row">
<!-- 1 col -->
<div class="flex-container">
<div></div>
</div>
<!-- 2 col -->
<div class="min-width-50 align-right cell-width">
@if (entry.getTotalCount(gender.id)) {
<!-- FIRST VAL -->
<div class="flex-row bold">
<div>
{{ entry.genderEntryMap.get(gender.id).present }}
</div>
<div>
{{
displayPercent(
$safeNavigationMigration(
entry.genderEntryMap.get(gender.id)?.present
) / entry.presentUserIds.length
)
}}
</div>
</div>
}
</div>
<!-- 3 col -->
<div class="justify-center bold justify-content-center flex">
{{
$safeNavigationMigration(entry.genderEntryMap.get(gender.id)?.label)
| translate
$safeNavigationMigration(
entry.genderEntryMap.get(gender.id)?.label === 'NA'
? 'nonbinary'
: entry.genderEntryMap.get(gender.id)?.label
) | translate
}}
</div>
<!-- 4 col -->
<div class="text align-left">
@if (entry.getTotalCount(gender.id)) {
<div class="text-medium bold flex-row gap">
<div>{{ entry.getTotalCount(gender.id) }}</div>
<div>
{{
displayPercent(
entry.getTotalCount(gender.id) / entry.getTotalCount()
)
}}
</div>
<div></div>
</div>
}
</div>
<!-- LEFT EMPTY -->
<div class="flex-container">
<div></div>
</div>
</div>
}
}
<div>
<!-- LAST ROW WITH TOTAL GENDERS -->
<div class="row">
<!-- 1 col -->
<div class="flex-container">
<div></div>
</div>
<div class="text align-left">
@if (entry.getTotalCount(gender.id)) {
<div class="text-medium">
{{ entry.getTotalCount(gender.id) }}
{{ displayPercent(entry.getTotalCount(gender.id) / entry.getTotalCount()) }}
<!-- 2 col -->
<div class="min-width-50 align-right cell-width">
@if (entry.presentUserIds.length) {
<!-- FIRST VAL -->
<div class="flex-row bold" style="color: #b7b7b7">
<div>{{ entry.presentUserIds.length }}</div>
<div>100%</div>
</div>
}
</div>
<div></div>
}
}
<!-- 3 col -->
<div class="justify-center bold empty-center"></div>
<!-- 4 col -->
<div class="text align-left flex-row bold" style="color: #b7b7b7">
<div>{{ entry.getTotalCount() }}</div>
<div>100%</div>
<div></div>
</div>
<!-- LEFT EMPTY -->
<div class="flex-container">
<div></div>
</div>
</div>
</div>
</div>
}
<div class="header-grid">
<h2 class="text-large-bold color-inherit">
<button matButton (click)="toggle(entry.id)">
<!-- PARTICIPANTS -->
<div class="header-grid">
<h1 class="text-large-bold color-inherit" style="padding-top: 30px">
{{ 'Participants' | translate }}
</button>
</h2>
<div>
<button matIconButton (click)="toggle(entry.id)">
@if (toggleMap.get(entry.id)) {
<mat-icon>keyboard_arrow_up</mat-icon>
} @else {
<mat-icon>keyboard_arrow_down</mat-icon>
}
</button>
</h1>
</div>
</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>
<!-- central cell -->
<div class="participants-cell">
<div class="present">
<div class="bold small-margin-top text margin-bottom-20">
{{ 'Present' | translate }}
</div>
@for (userId of entry.presentUserIds; track userId) {
<div class="text">
{{ 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">
<div class="absent margin-left--10 text-align-end">
<div class="bold small-margin-top text margin-bottom-20">
{{ 'Absent' | translate }}
</div>
@for (userId of entry.absentUserIds; track userId) {
<div class="margin-left-large color-black">{{ getName(userId) }}</div>
<div class="color-black">
{{ getName(userId) }}
</div>
}
</div>
<!-- Empty cell -->
<div class="flex-container"><div></div></div>
</div>
}
</mat-card-content>
Expand Down
Loading
Loading